`Map`-Objekt

Dieser Artikel erklärt das Map-Objekt.

Wir erklären Schritt für Schritt von den grundlegenden Operationen bis hin zu praktischen Beispielen, die in realen Szenarien nützlich sind.

YouTube Video

Map-Objekt

Map ist eine Sammlung, die Schlüssel-Wert-Paare speichert. Es ist einem Objekt ähnlich, unterscheidet sich jedoch darin, dass beliebige Typen wie Objekte, Funktionen oder primitive Werte als Schlüssel verwendet werden können und die Einfügereihenfolge beibehalten wird.

Grundlagen von Map

Schauen wir uns zunächst an, wie man eine Map erstellt und grundlegende Operationen durchführt.

Der folgende Code ist ein minimales Beispiel, das eine leere Map erstellt, Schlüssel hinzufügt und Werte abruft.

1// Create an empty Map and add key-value pairs
2const m = new Map();
3m.set('a', 1);
4m.set('b', 2);
5
6console.log(m.get('a')); // 1
7console.log(m.size);     // 2

• In diesem Code können Sie Elemente mit set hinzufügen, Werte mit get abrufen und die Anzahl der Elemente mit size überprüfen.
• Map erhält die Einfügereihenfolge bei, was es für eine abfolgeabhängige Verarbeitung geeignet macht.

Verhalten von set, get, has und delete

Hier sind Beispiele für typische Lese-, Schreib-, Existenzprüfungs- und Löschoperationen.

Mit dem folgenden Code können Sie die Rückgabewerte und Auswirkungen jeder Methode überprüfen.

 1// Demonstrate set, get, has, and delete
 2const m2 = new Map();
 3m2.set('x', 10);
 4console.log(m2.has('x'));  // true
 5console.log(m2.get('y'));  // undefined
 6
 7m2.delete('x');
 8console.log(m2.has('x'));  // false
 9
10// set returns the map itself, allowing method chaining
11m2.set('a', 1).set('b', 2);
12console.log(m2);  // Map { 'a' => 1, 'b' => 2 }

• get gibt undefined zurück, wenn der Schlüssel nicht existiert. has prüft, ob ein Schlüssel vorhanden ist, und delete entfernt einen Schlüssel.
• Da set die Map selbst zurückgibt, ist Method Chaining möglich.

Jeder Typ kann als Schlüssel verwendet werden (einschließlich Objekten als Schlüssel).

Einer der Hauptvorteile von Map ist, dass Objekte direkt als Schlüssel verwendet werden können.

Das folgende Beispiel zeigt, wie man Werte in einer Map mit Objektschlüsseln verknüpft.

 1// Use objects as keys in a Map
 2const keyObj = { id: 1 };
 3const keyFunc = () => {};
 4const objMap = new Map();
 5
 6// Another object with the same content but a different reference
 7const anotherKeyObj = { id: 1 };
 8
 9objMap.set(keyObj, 'objectValue');
10objMap.set(keyFunc, 'functionValue');
11objMap.set(anotherKeyObj, 'anotherValue');
12
13console.log(objMap.get(keyObj));         // 'objectValue'
14console.log(objMap.get(keyFunc));        // 'functionValue'
15console.log(objMap.get(anotherKeyObj));  // 'anotherValue'

• Beim Verwenden von Objekten als Schlüssel ist es wichtig, dass sie die gleiche Referenz besitzen. Selbst wenn ihr Inhalt gleich ist, werden Objekte mit unterschiedlichen Referenzen als unterschiedlich betrachtet und sind somit nicht derselbe Schlüssel.

Iteration (Schleife)

Map erhält die Einfügereihenfolge, daher wird oft iteriert.

Im Folgenden zeigen wir, wie man for...of, forEach sowie die Methoden keys(), values() und entries() verwendet.

 1// Iterating a Map with for...of and forEach
 2const iterMap = new Map([['a', 1], ['b', 2], ['c', 3]]);
 3
 4// for...of over entries (default)
 5for (const [key, value] of iterMap) {
 6  console.log(key, value);
 7}
 8
 9// forEach callback
10iterMap.forEach((value, key) => {
11  console.log(key, value);
12});
13
14// keys() and values()
15console.log([...iterMap.keys()]);   // ['a','b','c']
16console.log([...iterMap.values()]); // [1,2,3]

• entries() gibt ein Array von [key, value]-Paaren zurück, das mit der Spread-Syntax in ein Array umgewandelt werden kann. Beachten Sie, dass der Callback für forEach die Argumente in der Reihenfolge value, key erhält.

Konvertierung zwischen Map und Object

Sie können ein vorhandenes Objekt zu einer Map konvertieren oder eine Map in ein einfaches Objekt oder Array umwandeln.

 1// Convert between Map and Object / Array
 2const obj = { a: 1, b: 2 };
 3const mapFromObj = new Map(Object.entries(obj)); // Object -> Map
 4console.log(mapFromObj.get('a')); // 1
 5
 6const objFromMap = Object.fromEntries(mapFromObj); // Map -> Object
 7console.log(objFromMap); // { a: 1, b: 2 }
 8
 9const arrayFromMap = [...mapFromObj]; // Map -> Array of [key, value]
10console.log(arrayFromMap); // [['a',1], ['b',2]]

• Die Verwendung von Object.entries und Object.fromEntries erleichtert die Konvertierung. Da Objektschlüssel jedoch auf Strings oder Symbole beschränkt sind, gehen nicht-String-Schlüssel bei der Rückkonvertierung in ein Objekt verloren.

Praktisches Muster: Häufigkeitszählung (Count Map)

Beim Zählen der Häufigkeit von Elementen in einem Array vereinfacht die Verwendung einer Map den Prozess.

Der folgende Code ist ein Beispiel, wie man mit einer Map die Häufigkeit von Zeichenfolgen in einem Array zählt und sie sortiert.

1// Count frequencies with Map
2const arr = ['apple','banana','apple','orange','banana','apple'];
3const freq = new Map();
4
5for (const item of arr) {
6  freq.set(item, (freq.get(item) || 0) + 1);
7}
8
9console.log([...freq.entries()]); // [['apple',3], ['banana',2], ['orange',1]]

• Mit einer Map sind Existenzprüfungen und Aktualisierungen einfach durchzuführen. Dies ist auch mit Objekten möglich, aber die Map ist bei der Arbeit mit beliebigen Schlüsseln oft intuitiver.

Hinweise zu Map und JSON.stringify (Serialisierung)

JSON.stringify kann eine Map nicht direkt serialisieren. Wenn Sie eine Map speichern müssen, müssen Sie sie zuerst umwandeln.

Das folgende Beispiel zeigt, wie man eine Map vor der Umwandlung in JSON in ein Array konvertiert und wie man sie wiederherstellt.

1// Serialize and deserialize a Map
2const m3 = new Map([['x', 1], ['y', 2]]);
3const json = JSON.stringify([...m3]); // convert to array first
4console.log(json); // '[["x",1],["y",2]]'
5
6const restored = new Map(JSON.parse(json));
7console.log(restored.get('x')); // 1

• Maps, die gespeichert oder übertragen werden sollen, sollten vor der Serialisierung in Arrays umgewandelt werden. Beim Wiederherstellen verwenden Sie JSON.parse, um das Array zu erzeugen, und wandeln es dann in eine Map um.

Einführung in WeakMap und deren Verwendung

WeakMap unterscheidet sich darin, dass ihre Schlüssel schwach referenziert sind (und somit vom Garbage Collector entfernt werden können).

Sie ist nützlich, um Caches oder Metadaten mit Objekten als Schlüsseln zu speichern, und gibt diese automatisch frei, wenn das Schlüsselobjekt aufgeräumt wird.

1// WeakMap for metadata tied to object lifecycle
2const wm = new WeakMap();
3let obj = {};
4wm.set(obj, { meta: 'info' });
5console.log(wm.get(obj)); // { meta: 'info' }
6
7obj = null; // now the object can be GC'd and its entry removed from WeakMap

• WeakMap kann nicht aufgezählt oder in ihrer Größe geprüft werden, ist aber nützlich, um Speicherlecks zu vermeiden.

Zusammenfassung

Map ist eine praktische Sammlung, die im Gegensatz zu Objekten jeden Typ als Schlüssel erlaubt und die Einfügereihenfolge erhält. Wenn Sie alles von den Grundoperationen bis hin zur fortgeschrittenen Verwendung verstehen, können Sie Daten flexibler und intuitiver verwalten. Durch den angemessenen Einsatz von Object und Map je nach Anwendungsfall können Sie die Klarheit und Lesbarkeit des Codes erheblich verbessern.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video