JavaScript Map: Schlüssel-Wert-Speicher und Lookup

Ein JavaScript-Map-Objekt speichert Schlüssel-Wert-Paare und erlaubt jeden Wert als Schlüssel, also Objekte, Funktionen und Primitive. Verwende es, wenn du Iteration in Einfügereihenfolge, Nicht-String-Schlüssel oder häufiges Hinzufügen und Entfernen brauchst. Im Gegensatz zu normalen Objekten sind Map-Schlüssel nicht von geerbten Prototypeigenschaften betroffen. Das vermeidet Überraschungen bei dynamischen String-Schlüsseln.

JavaScript-Map-Beispiel für Schlüssel-Wert-Speicherung

Ausgabe:

95
false
2

So funktioniert dieses Beispiel

1. new Map() erzeugt eine leere Map. Der Aufruf von Map() ohne new wirft einen TypeError.
2. set fügt ein Schlüssel-Wert-Paar hinzu und gibt die Map-Instanz zurück. Dadurch sind Kettenaufrufe wie map.set("a", 1).set("b", 2) möglich. Wird set mit einem vorhandenen Schlüssel aufgerufen, überschreibt es den Wert, ohne die Iterationsposition dieses Schlüssels zu ändern.
3. get gibt den gespeicherten Wert zurück oder undefined, wenn der Schlüssel fehlt. Verwende has, um einen fehlenden Schlüssel von einem Schlüssel zu unterscheiden, der explizit auf undefined gesetzt wurde.
4. size zeigt die aktuelle Anzahl der Einträge an, anders als bei Objekten, bei denen Object.keys(obj).length nötig ist.

Häufige Fehler mit JavaScript Map

Klammer-Syntax statt set/get verwenden:

Falsch:

const map = new Map();
map["schlüssel"] = "wert";
console.log(map.get("schlüssel")); // undefined

Richtig:

const map = new Map();
map.set("schlüssel", "wert");
console.log(map.get("schlüssel")); // "wert"

Klammer-Syntax setzt eine Objekteigenschaft auf der Map-Instanz, aber keinen Map-Eintrag. get, has und size ignorieren das.

Strukturelle Gleichheit bei Objekt-Schlüsseln erwarten:

Falsch:

const map = new Map();
map.set({id: 1}, "anna");
console.log(map.get({id: 1})); // undefined

Richtig:

const schluessel = {id: 1};
map.set(schluessel, "anna");
console.log(map.get(schluessel)); // "anna"

Map verwendet SameValueZero für Schlüsselgleichheit. Bei Objekten bedeutet das Referenzidentität: Zwei gleich aussehende Objektliterale sind unterschiedliche Schlüssel.

JavaScript Map vs Objekt

Verwende Map, wenn Schlüssel keine Strings sind, wenn Einträge häufig hinzugefügt und entfernt werden oder wenn du nicht vertrauenswürdige Schlüssel speicherst. Verwende ein normales Objekt für Datensätze mit fester Struktur oder Daten, die JSON-Serialisierung brauchen. Wenn du ein Objekt brauchst, aber Prototyp-Schlüsselkollisionen vermeiden willst, verwende Object.create(null) als Basisobjekt.

FAQ

Bewahrt JavaScript Map die Einfügereihenfolge?

Ja. Map iteriert Einträge in der Reihenfolge, in der sie zuerst eingefügt wurden. set() auf einem vorhandenen Schlüssel aktualisiert den Wert, behält aber die ursprüngliche Position. Wenn du einen Schlüssel löschst und erneut hinzufügst, wandert er ans Ende.

Kann JavaScript Map Objekte als Schlüssel verwenden?

Ja, aber Map vergleicht Objekt-Schlüssel per Referenz, nicht nach Struktur. Zwei verschiedene Objekte mit denselben Eigenschaften gelten als getrennte Schlüssel. Speichere die Referenz in einer Variable und nutze exakt diese Referenz für set und get.

Wie konvertiere ich eine JavaScript Map in ein Objekt oder JSON?

Rufe Object.fromEntries(map) auf, um ein normales Objekt zu erstellen. Das funktioniert, wenn alle Schlüssel Strings oder Symbole sind. Bei Nicht-String-Schlüsseln serialisiere stattdessen das Entries-Array: JSON.stringify([...map]).

Was ist der Unterschied zwischen JavaScript Map und der JavaScript map()-Funktion?

Map ist eine Schlüssel-Wert-Sammlung zum Speichern und Abrufen von Daten. Die JavaScript-map()-Funktion (Array.prototype.map) ist eine Array-Methode, die durch Anwenden eines Callbacks auf jedes Element ein neues Array erzeugt. Beide heißen ähnlich, dienen aber unterschiedlichen Zwecken.