JavaScript Map und Set

Dieses Kapitel behandelt zwei Schlüsselsammlungen, die in modernem JavaScript eingeführt wurden: Map (Schlüssel-Wert-Paare) und Set (eindeutige Werte). Sie erfahren, was sie leisten, wann Sie sie anstelle von einfachen objects und arrays verwenden sollten, wie man über sie iteriert und welche Muster Sie im Alltag tatsächlich einsetzen werden – etwa das Deduplizieren eines array oder das Erstellen eines Häufigkeitszählers.

JavaScript Map

Eine Map ist eine Sammlung von Schlüssel-Wert-Paaren, ähnlich wie ein einfaches object – aber mit wichtigen Unterschieden, die sie in vielen Situationen zur besseren Wahl machen.

Map vs. einfaches object: Wann sollte man eine Map verwenden?

Greifen Sie zu einer Map statt eines einfachen object, wenn:

• Schlüssel keine strings sind. Object-Schlüssel werden immer zu strings (oder Symbolen) umgewandelt. Eine Map erlaubt es, beliebige Werte als Schlüssel zu verwenden: objects, Funktionen, Zahlen oder sogar NaN.
• Sie häufig Einträge hinzufügen und entfernen. Maps sind für häufiges Einfügen und Löschen optimiert, und map.size liefert die Anzahl direkt (bei objects wird Object.keys(obj).length benötigt).
• Sie eine garantierte Iterationsreihenfolge benötigen. Eine Map iteriert immer in Einfügereihenfolge.
• Sie Prototype-Kollisionen vermeiden möchten. Ein einfaches object erbt Schlüssel wie toString und constructor; eine Map hat keine solchen eingebauten Schlüssel, sodass benutzerdefinierte Schlüssel niemals damit kollidieren können.

Verwenden Sie ein einfaches object, wenn die Daten eine feste, bekannte Struktur haben (ein Record) oder wenn Sie JSON-Serialisierung benötigen – JSON.stringify funktioniert mit objects, nicht aber mit Maps.

Maps erstellen und bearbeiten

Um eine Map zu erstellen, verwenden Sie new Map(). Sie unterstützt folgende Methoden und Eigenschaften:

• map.set(key, value): Fügt ein Schlüssel-Wert-Paar hinzu oder aktualisiert es. Gibt die Map zurück, sodass Aufrufe verkettet werden können.
• map.get(key): Ruft den Wert für einen Schlüssel ab (undefined, wenn er nicht vorhanden ist).
• map.has(key): Gibt true zurück, wenn der Schlüssel existiert.
• map.delete(key): Entfernt ein Schlüssel-Wert-Paar.
• map.clear(): Entfernt alles.
• map.size: Die Anzahl der Schlüssel-Wert-Paare.

Da set() die Map zurückgibt, können Aufrufe verkettet werden:

Beliebige Werte als Schlüssel verwenden

Im Gegensatz zu objects behält eine Map Schlüssel unverändert. Die Zahl 1 und der string "1" sind unterschiedliche Schlüssel, und objects oder Funktionen können als Schlüssel verwendet werden (Vergleich per Referenz):

Über eine Map iterieren

Eine Map iteriert in Einfügereihenfolge und bietet drei Iterator-Methoden sowie forEach:

• map.keys() — ein Iterable der Schlüssel.
• map.values() — ein Iterable der Werte.
• map.entries() — ein Iterable von [key, value]-Paaren (das ist der Standard, daher funktioniert for...of map direkt).
• map.forEach((value, key) => ...) — führt einen Callback für jeden Eintrag aus.

Zwischen Map und object konvertieren

Eine Map kann aus den Einträgen eines object erstellt und wieder in eines umgewandelt werden:

JavaScript Set

Ein Set ist eine Sammlung eindeutiger Werte – jeder Wert kann nur einmal vorkommen. Es ist eng mit einem array verwandt, aber ohne Duplikate und ohne Indexzugriff.

Set vs. array: Wann sollte man ein Set verwenden?

Greifen Sie zu einem Set statt eines array, wenn:

• Eindeutigkeit wichtig ist. Ein Set lehnt Duplikate automatisch ab, sodass Sie vor dem Hinzufügen nie prüfen müssen.
• Sie die Zugehörigkeit häufig testen. set.has(value) ist schnell und gut lesbar, während array.includes(value) jedes Mal das gesamte array durchsucht.

Bleiben Sie bei einem array, wenn Sie Indexreihenfolge, Duplikate oder array-Methoden wie map/filter/reduce benötigen. (Eine Konvertierung zwischen beiden ist jederzeit möglich.)

Mit Sets arbeiten

• new Set(iterable): Erstellt ein Set, optional aus einem array oder einem beliebigen Iterable.
• set.add(value): Fügt einen Wert hinzu (gibt das Set zurück, sodass Aufrufe verkettet werden können). Duplikate werden ignoriert.
• set.has(value): Gibt true zurück, wenn der Wert vorhanden ist.
• set.delete(value): Entfernt einen Wert.
• set.size: Die Anzahl der Werte.
• set.clear(): Entfernt alles.

Ein array deduplizieren (der häufigste Anwendungsfall)

Der häufigste Grund, ein Set zu verwenden, ist das Entfernen von Duplikaten aus einem array. Wandeln Sie das Set mit [...new Set(arr)] wieder in ein array um:

Über ein Set iterieren

Sets iterieren in Einfügereihenfolge und unterstützen for...of und forEach:

Vereinigung, Schnittmenge und Differenz

Sets machen klassische Mengenoperationen einfach. Moderne Engines bieten auch eingebaute Methoden wie set.union(), set.intersection() und set.difference(), aber hier ist der portable Ansatz mit arrays:

Ein reales Szenario: Worthäufigkeitszähler

Dieses Beispiel zeigt, warum eine Map einem einfachen object oft überlegen ist. Wir zählen, wie oft jedes Wort in einem Satz vorkommt. Mit einer Map bleiben Schlüssel echte string-Werte, size ist sofort verfügbar, und es besteht kein Risiko, dass ein Wort mit einem geerbten Eigenschaftsnamen kollidiert:

Methoden-Übersicht

Map

Set

Faustregel: Verwenden Sie eine Map, wenn Sie Schlüssel-Daten mit Nicht-string-Schlüsseln, häufige Aktualisierungen oder garantierte Reihenfolge benötigen; verwenden Sie ein Set, wenn Sie eine Sammlung eindeutiger Werte mit schnellen Zugehörigkeitsprüfungen benötigen. Für alles andere bleiben einfache objects und arrays die richtigen Werkzeuge.

Übung