10 JavaScript-Map-Methoden, die Sie heute beherrschen sollten

Eine JavaScript-Map ist eine Sammlung, die jedes ihrer Elemente als Schlüssel-Wert-Paar speichert. Dieser Datentyp wird auch als assoziatives Array oder Wörterbuch bezeichnet.

Sie können jeden Datentyp (Primitive und Objekte) entweder als Schlüssel oder als Wert verwenden. Das Map-Objekt merkt sich die ursprüngliche Einfügereihenfolge, obwohl Sie normalerweise über ihren Schlüssel auf Werte zugreifen.

In diesem Artikel lernen Sie zehn JavaScript-Map-Methoden kennen, die Sie heute beherrschen sollten.

1. So erstellen Sie eine neue Karte in JavaScript

Sie können ein neues Map-Objekt erstellen, indem Sie das Karte() Konstrukteur. Dieser Konstruktor akzeptiert einen Parameter: ein iterierbares Objekt, dessen Elemente Schlüssel-Wert-Paare sind.

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman'],
[1992, 'Batman kehrt zurück'],
[1995, 'Batman für immer'],
[2005, 'Batman beginnt'],
[2008, 'Der dunkle Ritter'],
[2012, 'Der dunkle Ritter erhebt sich']
]);
Konsole.log (mapObj);

Ausgabe:

Karte (7) {
1966 => 'Batman: Der Film',
1989 => 'Batman',
1992 => 'Batman kehrt zurück',
1995 => 'Batman für immer',
2005 => 'Batman beginnt',
2008 => 'Der dunkle Ritter',
2012 => 'Der dunkle Ritter erhebt sich'
}

Wenn Sie den Parameter nicht angeben, erstellt JavaScript eine neue leere Karte.

let mapObj = new Map();
Konsole.log (mapObj);

Ausgabe:

Karte (0) {}

Wenn Sie versuchen, eine Map mit doppelten Schlüsseln zu erstellen, überschreibt jeder wiederholte Schlüssel den vorherigen Wert mit dem neuen Wert.

let mapObj = new Map([
['Schlüssel1', 'Wert1'],
['Schlüssel2', 'Wert2'],
['key2', 'newValue2']
]);
Konsole.log (mapObj);

Ausgabe:

Karte (2) {
'Schlüssel1' => 'Wert1',
'key2' => 'neuerWert2'
}

Hier wird der Wert gegen den Schlüssel2 Schlüssel ist neuerWert2, nicht früher Wert2.

Sie können auch ein Map-Objekt erstellen, das Schlüssel-Wert-Paare mit gemischten Datentypen enthält.

let mapObj = new Map([
["string1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
Konsole.log (mapObj);

Ausgabe:

Karte (4) {
'string1' => 1,
2 => 'string2',
'string3' => 433.234,
23.56 => 45
}

2. Hinzufügen neuer Elemente zu einem Kartenobjekt

Sie können dem Map-Objekt ein neues Element hinzufügen, indem Sie die einstellen() Methode. Diese Methode akzeptiert einen Schlüssel und einen Wert und fügt dann dem Map-Objekt ein neues Element hinzu. Die Methode gibt dann das neue Map-Objekt mit dem hinzugefügten Wert zurück. Wenn der Schlüssel bereits in der Map vorhanden ist, ersetzt der neue Wert den vorhandenen Wert.

let mapObj = new Map();
mapObj.set (1966, 'Batman: Der Film');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman Forever');
Konsole.log (mapObj);

Ausgabe:

Karte (4) {
1966 => 'Batman: Der Film',
1989 => 'Batman',
1992 => 'Batman kehrt zurück',
1995 => 'Batman für immer'
}

Sie können auch Variablen oder Konstanten als Schlüssel oder Werte verwenden:

const Jahr1 = 1966;
const movieName1 = 'Batman: Der Film';
sei Jahr2 = 1989;
var movieName2 = 'Batman';
let mapObj = new Map();
mapObj.set (Jahr1, Filmname1);
mapObj.set (Jahr2, Filmname2);
Konsole.log (mapObj);

Ausgabe:

Karte (2) {
1966 => 'Batman: Der Film',
1989 => 'Batman'
}

Die einstellen() -Methode unterstützt die Verkettung.

let mapObj = new Map();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman Returns')
.set (1995, 'Batman Forever');
Konsole.log (mapObj);

Ausgabe:

Karte (4) {
1966 => 'Batman: Der Film',
1989 => 'Batman',
1992 => 'Batman kehrt zurück',
1995 => 'Batman für immer'
}

3. Alle Elemente aus einem Kartenobjekt entfernen

Sie können alle Elemente aus einem Map-Objekt entfernen, indem Sie die klar() Methode. Diese Methode gibt immer zurück nicht definiert.

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman']
]);
console.log("Größe des Map-Objekts: " + mapObj.size);
Konsole.log (mapObj);
mapObj.clear();
console.log("Größe des Map-Objekts nach dem Löschen von Elementen: " + mapObj.size);
Konsole.log (mapObj);

Ausgabe:

Größe des Kartenobjekts: 2
Karte (2) { 1966 => 'Batman: Der Film', 1989 => 'Batman' }
Größe des Map-Objekts nach dem Löschen von Elementen: 0
Karte (0) {}

4. Löschen eines bestimmten Elements aus einer Karte

Sie können ein bestimmtes Element aus einem Map-Objekt entfernen, indem Sie die löschen() Methode. Diese Methode akzeptiert den Schlüssel des Elements, das aus der Map gelöscht werden soll. Wenn der Schlüssel vorhanden ist, gibt die Methode zurück wahr. Andernfalls kehrt es zurück falsch.

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman']
]);
console.log("Anfangszuordnung: ");
Konsole.log (mapObj);
mapObj.delete (1966);
console.log("Map nach dem Löschen des Elements mit dem Schlüssel 1966");
Konsole.log (mapObj);

Ausgabe:

Anfangskarte:
Karte (2) { 1966 => 'Batman: Der Film', 1989 => 'Batman' }
Karte nach dem Löschen des Elements mit dem Schlüssel 1966
Karte (1) { 1989 => 'Batman' }

5. Überprüfen Sie, ob ein Element in einer Karte vorhanden ist

Sie können überprüfen, ob ein Element in einem Map-Objekt vorhanden ist, indem Sie die hat() Methode. Diese Methode akzeptiert den Schlüssel des Elements als Parameter, um das Vorhandensein im Map-Objekt zu testen. Diese Methode gibt zurück wahr wenn der Schlüssel vorhanden ist. Andernfalls kehrt es zurück falsch.

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman'],
[1992, 'Batman kehrt zurück'],
[1995, 'Batman für immer'],
[2005, 'Batman beginnt'],
[2008, 'Der dunkle Ritter'],
[2012, 'Der dunkle Ritter erhebt sich']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Ausgabe:

wahr
falsch

Ein Element mit Schlüssel 1966 existiert im Map-Objekt, daher wurde die Methode zurückgegeben wahr. Aber da es kein Element mit Schlüssel gibt 1977 im Map-Objekt wurde die Methode zurückgegeben falsch ab dem zweiten Anruf.

Verwandt: Was ist JavaScript und wie funktioniert es?

6. Auf den Wert für einen bestimmten Schlüssel zugreifen

Die werden() -Methode gibt ein bestimmtes Element aus dem Map-Objekt zurück. Diese Methode akzeptiert den Schlüssel des Elements als Parameter. Wenn der Schlüssel im Map-Objekt vorhanden ist, gibt die Methode den Wert des Elements zurück. Andernfalls kehrt es zurück nicht definiert.

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman'],
[1992, 'Batman kehrt zurück'],
[1995, 'Batman für immer'],
[2005, 'Batman beginnt'],
[2008, 'Der dunkle Ritter'],
[2012, 'Der dunkle Ritter erhebt sich']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Ausgabe:

Batman: Der Film
nicht definiert

Ein Element mit Schlüssel 1966 existiert im Map-Objekt, daher hat die Methode den Wert des Elements zurückgegeben. Es gibt kein Element mit Schlüssel 1988 im Map-Objekt, so dass die Methode zurückgegeben wurde nicht definiert.

7. Greifen Sie über einen Iterator auf die Einträge einer Karte zu

Nach Angaben des Beamten MDN-Webdokumente:

Die Methode entries() gibt ein neues Iterator-Objekt zurück, das die [Schlüssel, Wert]-Paare für jedes Element im Map-Objekt in der Einfügereihenfolge enthält. In diesem speziellen Fall ist dieses Iteratorobjekt auch iterierbar, sodass die for-of-Schleife verwendet werden kann. Wenn das Protokoll [Symbol.iterator] verwendet wird, gibt es eine Funktion zurück, die beim Aufrufen diesen Iterator selbst zurückgibt.

Sie können mit diesem Iterator auf jedes Element der Karte zugreifen und a für...von Stellungnahme:

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman'],
[1992, 'Batman kehrt zurück'],
[1995, 'Batman für immer'],
[2005, 'Batman beginnt'],
[2008, 'Der dunkle Ritter'],
[2012, 'Der dunkle Ritter erhebt sich']
]);
for (Eintrag von mapObj.entries() lassen) {
console.log (Eintrag);
}

Ausgabe:

[ 1966, 'Batman: Der Film' ]
[ 1989, 'Batman' ]
[1992, 'Batman kehrt zurück']
[ 1995, 'Batman für immer' ]
[ 2005, 'Batman beginnt' ]
[ 2008, 'Der dunkle Ritter' ]
[2012, 'Der dunkle Ritter erhebt sich']

Oder Sie können die ES6-Zerstörungszuweisungsfunktion verwenden, um auf jeden Schlüssel und Wert zuzugreifen:

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman'],
[1992, 'Batman kehrt zurück'],
[1995, 'Batman für immer'],
[2005, 'Batman beginnt'],
[2008, 'Der dunkle Ritter'],
[2012, 'Der dunkle Ritter erhebt sich']
]);
for (let [Schlüssel, Wert] von mapObj.entries()) {
console.log("Schlüssel: " + Schlüssel + " Wert: " + Wert);
}

Ausgabe:

Legende: 1966 Wert: Batman: The Movie
Schlüssel: 1989 Wert: Batman
Schlüssel: 1992 Wert: Batman Returns
Schlüssel: 1995 Wert: Batman Forever
Schlüssel: 2005 Wert: Batman beginnt
Schlüssel: 2008 Wert: The Dark Knight
Schlüssel: 2012 Wert: The Dark Knight Rises

8. So iterieren Sie über die Werte einer Karte

Die Werte() Methode gibt ein zurück Iterator -Objekt, das alle Werte in einer Map enthält, und zwar in der Einfügereihenfolge.

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman'],
[1992, 'Batman kehrt zurück']
]);
const iteratorObj = mapObj.values();
for (lass den Wert von iteratorObj) {
console.log (Wert);
}

Ausgabe:

Batman: Der Film
Batman
Batman kehrt zurück

9. Über die Schlüssel einer Karte iterieren

Die Schlüssel() Methode gibt ein zurück Iterator -Objekt, das alle Schlüssel in einer Map enthält, und zwar in der Einfügereihenfolge.

let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman'],
[1992, 'Batman kehrt zurück']
]);
const iteratorObj = mapObj.keys();
for (lass den Schlüssel von iteratorObj) {
console.log (Schlüssel);
}

Ausgabe:

1966
1989
1992

Verwandt: JavaScript-Pfeilfunktionen können Sie zu einem besseren Entwickler machen

10. Über Elemente in einer Map mit einem Callback iterieren

Die für jeden() -Methode ruft für jedes Element des Map-Objekts eine Callback-Funktion auf. Die Callback-Funktion benötigt zwei Parameter: den Schlüssel und den Wert.

Funktion printKeyValue (Schlüssel, Wert) {
console.log("Schlüssel: " + Schlüssel + " Wert: " + Wert);
}
let mapObj = new Map([
[1966, 'Batman: Der Film'],
[1989, 'Batman'],
[1992, 'Batman kehrt zurück']
]);
mapObj.forEach (printKeyValue);

Ausgabe:

Schlüssel: Batman: The Movie Wert: 1966
Schlüssel: Batman Wert: 1989
Schlüssel: Batman Rückgabewert: 1992

Jetzt wissen Sie über Karten in JavaScript Bescheid

Jetzt haben Sie genug Wissen, um das Konzept von Maps in JavaScript zu beherrschen. Die Map-Datenstruktur wird in vielen Programmieraufgaben häufig verwendet. Sobald Sie es beherrschen, können Sie zu anderen nativen JavaScript-Objekten wie Sets, Arrays usw. übergehen.

15 JavaScript-Array-Methoden, die Sie heute beherrschen sollten

Sie möchten JavaScript-Arrays verstehen, kommen aber nicht damit zurecht? Sehen Sie sich unsere JavaScript-Array-Beispiele an, um eine Anleitung zu erhalten.

Weiter lesen

Über den Autor