JavaScript >> Javascript-Tutorial >  >> Tags >> map

Einführung in Karten in JavaScript – Alles, was Sie wissen müssen

Haben Sie schon einmal von Karten in JavaScript gehört? Karten sind ein neuer Objekttyp, der in ES2015 eingeführt wurde. In diesem Tutorial erfahren Sie alles, was Sie über diesen weniger bekannten Objekttyp wissen müssen. Sie erfahren, was Karten in JavaScript sind, wie sie funktionieren und wie man sie benutzt.

Schnelle Einführung in Karten

Als JavaScript-Entwickler kennen Sie wahrscheinlich JavaScript-Objekte. Objekte ermöglichen es Ihnen, Daten in Form eines Schlüssel-Wert-Paares zu speichern. Karten sind JavaScript-Objekten sehr ähnlich. Wenn Sie einige Daten in Karten speichern möchten, speichern Sie diese Daten auch in Form eines Schlüssel-Wert-Paares.

Ebenso wie bei Objekten können Sie neue Schlüssel hinzufügen und vorhandene löschen und ihre Werte aus Karten abrufen. Wenn Sie Karten und Objekte vergleichen, gibt es einige Unterschiede, die Sie kennen sollten. Sehen wir uns diese Unterschiede an, bevor wir weitermachen.

Karten vs. Objekte

Einer der wichtigsten Unterschiede besteht darin, dass Sie bei Karten in JavaScript jeden Datentyp zum Erstellen von Schlüsseln verwenden können. Sie können sogar Objekte oder Funktionen verwenden. Objekte erlauben Ihnen, nur Zeichenfolgen oder Symbole zu verwenden. Ein weiterer wichtiger Unterschied ist die Reihenfolge der Schlüssel/Wert-Paare.

In Karten werden Schlüssel basierend auf der Reihenfolge geordnet, in der Sie sie der Karte hinzugefügt haben. Wenn Sie eine Karte durchlaufen, erhalten Sie ihre Schlüssel in derselben Reihenfolge, in der Sie sie erstellt haben. Bei Objekten gilt dies seit ES2015 und nur für JavaScript-Engines, die diese Spezifikation unterstützen. Vor ES2015 wurden Schlüssel in Objekten nicht bestellt.

Ein weiterer Unterschied besteht darin, wie einfach es ist, die Größe einer Karte zu ermitteln. Wie im Set hat jede Map einen size -Eigenschaft, die angibt, wie viele Schlüsselwertpaare sie enthält. Bei Objekten müssten Sie keys() verwenden oder values() um ein Array von Schlüsseln oder Werten zu erhalten. Verwenden Sie dann length um die Länge dieses Arrays zu erhalten, um schließlich die Größe eines Objekts zu erhalten.

Eine weitere nette Sache ist, dass Maps, wie Array, iterierbar sind. Sie müssen nicht zuerst die Schlüssel oder Werte abrufen, um sie zu durchlaufen. Sie können es sofort tun. Beispielsweise können Sie die Methode forEach() genau wie bei Array verwenden. Sie können auch eine for…of-Schleife verwenden, genau wie bei Objekten.

Der letzte gut zu wissende Unterschied besteht darin, dass Maps für das Hinzufügen und Entfernen von Schlüssel-Wert-Paaren optimiert sind. Objekte sind es nicht. Dies spielt möglicherweise keine Rolle, wenn Sie nicht oft mit Daten manipulieren müssen. Wenn Sie Karten verwenden, können Sie möglicherweise die Leistung Ihres JavaScript-Codes verbessern.

Karten in JavaScript erstellen

Karten ähneln Objekten. Eine Sache, die sich zwischen ihnen unterscheidet, ist, wie Sie sie erstellen, unter den Dingen, die wir gerade besprochen haben. Wenn Sie ein neues Objekt erstellen möchten, gibt es dafür mehrere Möglichkeiten. Sie können beispielsweise new Object() verwenden , Object.create() , Objektliteral oder Objektkonstruktor.

Wenn Sie eine neue Karte erstellen möchten, gibt es zwei Möglichkeiten. Nun, theoretisch. Die erste Option zum Erstellen neuer Karten besteht darin, ein neues leeres Kartenobjekt mit new Map() zu erstellen und ihm später Werte zuweisen.

// Creating new map
let myMap = new Map()

Vom Array zur Karte

Bei der zweiten Option geht es ebenfalls um die Verwendung von new Map() um ein neues Kartenobjekt zu erstellen. Sie können jedoch auch ein Array übergeben. Damit dies funktioniert, muss dieses Array auf eine bestimmte Weise strukturiert werden. Es muss ein verschachteltes Array für jedes Schlüssel-Wert-Paar enthalten. Jedes Array (Schlüssel-Wert-Paar) muss zwei Elemente enthalten, den Schlüssel und den Wert.

// Create new map and assign it some values right away
const myMap = new Map([
  ['name',  'Jackie'],
  ['gender', 'female'],
  ['age', 23]
])

// Log the content of "myMap" map
console.log(myMap)
// Output:
// Map { 'name' => 'Jackie', 'gender' => 'female', 'age' => 23 }

Vom Objekt zur Karte

Sie können die zweite Option auch mit Objekten verwenden. Sie können ein vorhandenes Objekt nehmen und alle seine Einträge mit entries() abrufen Methode. Die entries() -Methode gibt alle Einträge im gleichen Format zurück wie das Array, das Sie im vorherigen Beispiel gesehen haben. Sie können also das Ergebnis des Aufrufs von entries() übergeben Methode zum Map() Objekt.

// Create new object
const myObj = {
  subject: 'Math',
  level: '1',
  difficulty: 'Medium'
}

// Create new map from "myObj"
const myMap = new Map(Object.entries(myObj))

// Log the content of "myMap" map
console.log(myMap)
// Outputs:
// Map { 'subject' => 'Math', 'level' => '1', 'difficulty' => 'Medium' }


// Or, a bit longer
// Create new object
const myObj = {
  subject: 'Math',
  level: '1',
  difficulty: 'Medium'
}

// Get all entries
const myObjEntries = Object.entries(myObj)

// Create new map from "myObjEntries"
const myMap = new Map(myObjEntries)

// Log the content of "myMap" map
console.log(myMap)
// Outputs:
// Map { 'subject' => 'Math', 'level' => '1', 'difficulty' => 'Medium' }

Hinzufügen von Werten zu Karten

Wenn Sie einem Objekt Werte, Schlüssel-Wert-Paare, hinzufügen möchten, gibt es zwei Möglichkeiten, dies zu tun. Nun, drei, wenn Sie das Hinzufügen von Werten während der Objektinitialisierung zählen. Die erste verwendet die do-Notation. Die zweite verwendet eckige Klammern. Der zweite Weg, eckige Klammern, funktioniert auch mit Karten.

Das Hinzufügen von Werten zu Karten mit eckigen Klammern ist jedoch keine gute Praxis. Das Problem ist, dass Sie, wenn Sie dies tun, Leistungsoptimierungskarten verlieren. Der richtige Weg, Karten Werte hinzuzufügen, ist die Verwendung von set() Methode. Diese Methode akzeptiert zwei Parameter. Der erste ist für key und zweitens für value .

// Create new map
const myMap = new Map()

// Create simple function
function sayHi() {
  return 'Hello!'
}

// Add some values (key-value pairs) to "myMap"
myMap.set('name', 'James Reacher')
myMap.set('bio', { age: 35, height: 189, weight: 82 })
myMap.set(sayHi, 'Function as a key?')

// Log the content of "myMap"
console.log(myMap)
// Output:
// Map {
//   'name' => 'James Reacher',
//   'bio' => { age: 35, height: 189, weight: 82 },
//   [Function: sayHi] => 'Function as a key?'
// }

Wenn Sie einer Karte mehrere Schlüssel-Wert-Paare hinzufügen möchten, können Sie dies jeweils nur einzeln tun. Eine interessante Sache ist, dass Maps Verkettung unterstützen. Also, ja, Sie müssen set() verwenden -Methode für jedes Schlüssel/Wert-Paar, das Sie hinzufügen möchten. Sie können diese Methoden jedoch verketten, sodass Sie den Namen der Karte nicht immer wieder verwenden müssen.

// Create new map
const myMap = new Map()

// Add some values using chaining
myMap.set('Language', 'JavaScript')
  .set('Author', 'Brendan Eich')
  .set('First appeared', '1995')

// Log the content of "myMap"
console.log(myMap)
// Output:
// Map {
//   'Language' => 'JavaScript',
//   'Author' => 'Brendan Eich',
//   'First appeared' => '1995'
// }

Entfernen von Werten aus Karten

Wenn Sie Werte aus Karten entfernen möchten, ist der Vorgang einfach. Es gibt eine Methode namens delete(), die Sie verwenden müssen . Diese Methode akzeptiert einen Parameter, den Schlüssel des Schlüssel-Wert-Paares, das Sie entfernen möchten. Bei erfolgreicher Löschung wird die delete() -Methode gibt true zurück . Wenn der Schlüssel nicht existiert, wird false zurückgegeben .

Eine Sache zu delete(), die Sie sich merken sollten Methode ist, dass es immer nur mit einem Schlüssel funktioniert. Sie können nicht mehrere Schlüssel übergeben. Wenn Sie es versuchen, delete() -Methode entfernt nur den ersten Schlüssel. Der Rest wird ignoriert.

// Create new map
const myMap = new Map()

// Add some values to "myMap"
myMap.set('name', 'Joe')
myMap.set('age', 25)

// Log the content of "myMap"
console.log(myMap)
// Output:
// Map { 'name' => 'Joe', 'age' => 25 }

// Remove "name" from "myMap"
myMap.delete('name')

// Log the content of "myMap" again
console.log(myMap)
// Output:
// Map { 'age' => 25 }


// This will not work
// Create new map
const myMap = new Map()

// Add some values to "myMap"
myMap.set('name', 'Joe')
myMap.set('age', 25)

// Try to remove "name" and "age" at the same time
myMap.delete('name', 'age')

// Log the content of "myMap" again
// Hint: only the "name" will be removed
// because it was the first parameter
console.log(myMap)
// Output:
// Map { 'age' => 25 }

Entfernen aller Werte aus Karten

Werte mit delete() entfernen -Methode ist praktisch, wenn Sie nur einen oder wenige Werte entfernen möchten. Wenn Sie alle Werte in einer Karte auf einmal entfernen möchten, gibt es einen besseren und schnelleren Weg, dies zu tun. Neben dem Überschreiben der Karte können Sie dies auch mit clear() tun Methode. Diese Methode akzeptiert keine Parameter.

// Create new map
const myMap = new Map()

// Add some values to "myMap"
myMap.set('The Lean Startup', 'Eric Ries')
myMap.set('Measure What Matters', 'John Doerr')
myMap.set('The Startup Owner\'s Manual', 'Steve Blank')

// Log the content of "myMap"
console.log(myMap)
// Output:
// Map {
//   'The Lean Startup' => 'Eric Ries',
//   'Measure What Matters' => 'John Doerr',
//   "The Startup Owner's Manual" => 'Steve Blank'
// }

// Remove all values from "myMap"
myMap.clear()

// Log the content of "myMap"
console.log(myMap)
// Output:
// Map {}

Abrufen von Werten aus Karten

Das Hinzufügen und Entfernen von Werten aus Karten ist unkompliziert. Sie können dasselbe über das Abrufen sagen. Wenn Sie einen bestimmten Wert aus einer Karte abrufen möchten, können Sie get() verwenden Methode. Diese Methode akzeptiert einen Parameter, einen Schlüssel, der dem abzurufenden Wert zugeordnet ist.

Wenn der Wert des Schlüssels, den Sie abrufen möchten, vorhanden ist, wird der Wert zurückgegeben. Wenn es nicht existiert, wird undefined zurückgegeben .

// Create new map
const myMap = new Map()

// Add some values to "myMap"
myMap.set('front-end', 'React')
myMap.set('back-end', 'Node.js')
myMap.set('database', 'MongoDB')

// Get the value of "back-end" key
myMap.get('back-end')
// Output:
// 'Node.js'

// Try to get the value of non-existent key "cms"
myMap.get('cms')
// Output:
// undefined

Überprüfen, ob der Wert in der Karte vorhanden ist

In gewisser Weise die get() -Methode kann Ihnen auch dabei helfen, zu überprüfen, ob ein Schlüssel in einer Map vorhanden ist. Dafür gibt es jedoch eine spezielle Methode. Diese Methode heißt has() . Ähnlich wie get() , der has() -Methode akzeptiert auch einen Parameter, den key du suchst nach. Wenn der Schlüssel existiert has() gibt true zurück . Wenn nicht, wird false zurückgegeben .

// Create new map
const myMap = new Map()

// Add some values to "myMap"
myMap.set('language', 'English')

// Check if "myMap" has "language" key
myMap.get('language')
// Output:
// true

// Check if "myMap" has "compiler" key
myMap.get('compiler')
// Output:
// false

Ermitteln der Größe der Karte

In „Karten vs. Objekte“ haben wir besprochen, dass einer der Vorteile von Karten darin besteht, dass es einfach ist, ihre Größe herauszufinden. Das ist wahr. Jedes Map-Objekt hat seinen eigenen size Eigentum. Diese Eigenschaft ist analog zur Eigenschaft length, die für Arrays vorhanden ist. Verwenden Sie diesen size -Eigenschaft wird Ihnen schnell sagen, wie viele Schlüssel-Wert-Paare in einer bestimmten Map vorhanden sind.

// Create new map
const myMap = new Map()

// Log the size of "myMap"
console.log(myMap.size)
// Output:
// 0

// Add some values to "myMap"
myMap.set('Tony Stark', 'Iron Man')
  .set('Steve Rogers', 'Captain America')
  .set('Black Widow', 'Natasha Romanoff')
  .set('Bruce Banner', 'Hulk')

// Log the size of "myMap" again
console.log(myMap.size)
// Output:
// 4

Karten durchlaufen

Sie wissen, wie man Karten Werte hinzufügt und wie man sie entfernt. Sie wissen auch, wie Sie Werte einzeln abrufen. Die Frage ist, was ist, wenn Sie alle Werte aus einer Karte abrufen möchten? Es gibt vier Optionen, aus denen Sie wählen können. Diese Optionen sind keys() , values() , entries() und forEach() Methoden.

Map.keys(), Map.values() und Map.entries()

Die ersten drei Methoden geben alle Iterator zurück Objekt, das bestimmte Daten enthält. Die erste Methode, keys() , gibt einen Iterator zurück mit Schlüsseln, ein Schlüssel für jedes Paar in der Karte. Die zweite Methode, values() Iterator mit Werten, auch ein Wert für jedes Paar in der Karte. Die dritte Methode entries() gibt ein Iterable für alle Einträge zurück.

Diese Einträge werden in Form eines [key, value] zurückgegeben . Wenn Sie diese drei Methoden verwenden, können Sie über den zurückgegebenen Iterator iterieren Objekt mit next() Methode und ihr value Eigentum. Jede Verwendung von next() -Methode zusammen mit value , gibt den nächsten Wert im Iterator, den nächsten Wert, Schlüssel oder Eintrag in der Map zurück.

// Create new map
const myMap = new Map()

// Add some values
myMap.set('First name', 'Joshua Doer')
myMap.set('Email', '[email protected]')
myMap.set('username', 'josh1234')


// Example no.1: Map.keys()
// Create iterator for keys
const myKeysIterator = myMap.keys()

// Log the first key
console.log(myKeysIterator.next().value)
// Output:
// 'First name'

// Log the second key
console.log(myKeysIterator.next().value)
// Output:
// 'Email'

// Log the third key
console.log(myKeysIterator.next().value)
// Output:
// 'username'


// Example no.2: Map.values()
// Create iterator for values
const myValuesIterator = myMap.values()

// Log the first value
console.log(myValuesIterator.next().value)
// Output:
// 'Joshua Doer'

// Log the second value
console.log(myValuesIterator.next().value)
// Output:
// '[email protected]'

// Log the third value
console.log(myValuesIterator.next().value)
// Output:
// 'josh1234'


// Example no.3: Map.entries()
// Create iterator for entries
const myEntriesIterator = myMap.entries()

// Log the first entry
console.log(myEntriesIterator.next().value)
// Output:
// [ 'First name', 'Joshua Doer' ]

// Log the second entry
console.log(myEntriesIterator.next().value)
// Output:
// [ 'Email', '[email protected]' ]

// Log the third entry
console.log(myEntriesIterator.next().value)
// Output:
// [ 'username', 'josh1234' ]

Maps, Iteratoren und For…of-Schleife

Verwenden Sie den next() und value wird nicht das beste Werkzeug sein, wenn Sie alle Daten von Iterator erhalten möchten Objekt auf einmal. Dafür ist for...of eine bessere Option Schleife. Mit dieser Schleife können Sie über Iterator iterieren und erhalten Sie alle Daten, ohne next() verwenden zu müssen mehrmals.

// Create new map
const myMap = new Map()

// Add some values
myMap.set('First name', 'Joshua Doer')
myMap.set('Email', '[email protected]')
myMap.set('username', 'josh1234')


// Create iterator for entries
// NOTE: this will work in the same way
// also for keys() and values()
const myEntriesIterator = myMap.entries()

// Loop over the iterate object "myEntriesIterator"
for (let iteratorItem of myEntriesIterator) {
  // Log each item in the iterator
  console.log(iteratorItem)
}
// Output:
// [ 'First name', 'Joshua Doer' ]
// [ 'Email', '[email protected]' ]
// [ 'username', 'josh1234' ]

Map.forEach()

Der forEach() Methode ist etwas anders. Iterator wird nicht zurückgegeben Objekt wie keys() , values() und entries() und lässt Sie diese Werte manuell durchlaufen. Stattdessen forEach() iteriert direkt über die Karte. Iteriert auch automatisch über alle Schlüssel-Wert-Paare.

Wenn es über die Paare iteriert, führt es für jedes von ihnen eine Callback-Funktion aus. Diese Callback-Funktion akzeptiert drei Parameter. Alle diese Parameter sind optional. Diese Parameter sind value , key und map . Der value ermöglicht Ihnen den Zugriff auf den aktuellen value in jeder Iteration.

Der key ermöglicht Ihnen den Zugriff auf den aktuellen key in der Iteration. Der letzte, der map , ermöglicht Ihnen den Zugriff auf die gesamte Karte, über die Sie iterieren.

// Create new map
const myMap = new Map()

// Add some values
myMap.set('title', 'JavaScript: The Definitive Guide')
myMap.set('author', 'David Flanagan')
myMap.set('publisher', 'O\'Reilly Media')

// Loop over "myMap" map directly
myMap.forEach((value, key) => {
  // Log key and value in the map
  console.log(`${key}: ${value}`)
})
// Output:
// 'title: JavaScript: The Definitive Guide'
// 'author: David Flanagan'
// "publisher: O'Reilly Media"

Von Karten zu Objekten

Sie wissen, dass Sie Karten aus Objekten erstellen können. Sie können auch das Gegenteil tun. Sie können eine vorhandene Karte nehmen und damit ein neues Objekt erstellen. Dies kann mit fromEntries() erfolgen Methode. Am Anfang haben Sie entries() verwendet Methode zum Erstellen eines Arrays aus Einträgen, die in einem Objekt vorhanden sind.

Die fromEntries() Methode bewirkt das Gegenteil. Es nimmt ein Array in Form von [key, value] an , und wandelt es in ein Objekt um. Die entries() -Methode, die auf der Karte vorhanden ist, hilft Ihnen, jede Karte in ein Array umzuwandeln, das Sie benötigen. Sie können dieses Array dann mit fromEntries() verwenden Methode zum Erstellen eines neuen Objekts.

// Create new map
const myMap = new Map()

// Add some values
myMap.set('spanish', 'Buenos dias')
myMap.set('french', 'Bonjour')
myMap.set('russian', 'Доброе утро')

// Transform the map into an array
const myTransformedMap = myMap.entries()

// Create new object from transformed map
const myObj = Object.fromEntries(myTransformedMap)

// Log the content of "myObj"
console.log(myObj)
// Output:
// {
//   spanish: 'Buenos dias',
//   french: 'Bonjour',
//   russian: 'Доброе утро'
// }

Fazit:Einführung in Karten in JavaScript

Karten sind einer der weniger bekannten und weniger häufig verwendeten Objekttypen in JavaScript. Ich hoffe, dieses Tutorial hat Ihnen geholfen zu lernen, was Karten in JavaScript sind, wie sie funktionieren und wie man sie verwendet. Ich hoffe auch, dass es Ihnen geholfen hat, zu unterscheiden, wann sie eine bessere Wahl als Objekte sein können.