Einführung in JavaScript Maps

Vor der Einführung von ECMAScript 6 (ES6) haben Entwickler häufig Objekte verwendet, um Schlüssel-Wert-Paare zu speichern. Diese Methode hatte jedoch einige Einschränkungen.
Zum Beispiel hatten Objekte immer Standard-Schlüssel, die vom Prototypen stammten, und die Schlüssel konnten nur Strings oder Symbole sein. Um diese Probleme zu beheben, wurde das
Map-Objekt in ES6 eingeführt.

Was ist ein Map-Objekt?

Ein Map-Objekt speichert Schlüssel-Wert-Paare, wobei jeder Schlüssel in der Sammlung eindeutig ist. Die Werte und Schlüssel in einem Map können von jedem Datentyp sein.
Wenn Sie durch ein Map-Objekt iterieren, erhalten Sie bei jeder Iteration ein Array mit zwei Elementen: [Schlüssel, Wert]. Die Reihenfolge der Iteration entspricht der Reihenfolge,
in der jedes Schlüssel-Wert-Paar mit der set()-Methode eingefügt wurde.

Erstellung eines Map-Objekts

Um ein neues Map-Objekt zu erstellen, können Sie die folgende Syntax verwenden:

let map = new Map([iterable]);

Die Map()-Funktion akzeptiert ein optionales iterierbares Objekt, dessen Elemente Schlüssel-Wert-Paare sind.

Nützliche Methoden von JavaScript Maps

Hier sind einige der nützlichsten Methoden, die Sie mit Map-Objekten verwenden können:

• clear() – Entfernt alle Elemente aus dem Map-Objekt.
• delete(key) – Entfernt ein Element, das durch den Schlüssel angegeben ist. Gibt true zurück, wenn das Element existiert, andernfalls false.
• entries() – Gibt einen neuen Iterator zurück, der ein Array von [Schlüssel, Wert] für jedes Element im Map enthält.
• forEach(callback[, thisArg]) – Ruft eine Callback-Funktion für jedes Schlüssel-Wert-Paar im Map in der Einfügeordnung auf.
• get(key) – Gibt den Wert zurück, der mit dem Schlüssel verknüpft ist. Wenn der Schlüssel nicht existiert, wird undefined zurückgegeben.
• has(key) – Gibt true zurück, wenn ein Wert mit dem Schlüssel existiert, andernfalls false.
• keys() – Gibt einen neuen Iterator zurück, der die Schlüssel für die Elemente in der Einfügeordnung enthält.
• set(key, value) – Setzt den Wert für den Schlüssel im Map-Objekt. Gibt das Map-Objekt selbst zurück, sodass Sie diese Methode mit anderen Methoden verketten können.
• values() – Gibt einen neuen Iterator zurück, der die Werte für jedes Element in der Einfügeordnung enthält.

Beispiele zur Verwendung von Map-Objekten

Erstellen eines neuen Map-Objekts

Angenommen, Sie haben eine Liste von Benutzerobjekten:

let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};

Um eine Zuordnung von Benutzern und Rollen zu erstellen, verwenden Sie den folgenden Code:

let userRoles = new Map();

Das userRoles-Objekt ist eine Instanz des Map-Objekts:

console.log(typeof(userRoles)); // object

console.log(userRoles instanceof Map); // true

Hinzufügen von Elementen zu einem Map

Um eine Rolle einem Benutzer zuzuweisen, verwenden Sie die set()-Methode:

userRoles.set(john, 'admin');

Die set()-Methode kann auch zum Ändern vorhandener Map-Werte verwendet werden:

userRoles.set(lily, 'editor').set(peter, 'subscriber');

Initialisieren eines Maps mit einem iterierbaren Objekt

Sie können ein iterierbares Objekt an den Map()-Konstruktor übergeben:

let userRoles = new Map([[john, 'admin'], [lily, 'editor'], [peter, 'subscriber']]);

Werte aus einer Map abrufen

Um die Rolle von John zu sehen, verwenden Sie die get()-Methode:

userRoles.get(john); // admin

Überprüfen der Existenz eines Schlüssels

Um zu überprüfen, ob ein Schlüssel im Map existiert, verwenden Sie die has()-Methode:

userRoles.has(peter); // true

Die Anzahl der Elemente in der Map abrufen

Die size-Eigenschaft gibt die Anzahl der Einträge im Map-Objekt zurück:

console.log(userRoles.size); // 3

Iterieren über die Schlüssel der Map

Um die Schlüssel eines Map-Objekts zu erhalten, verwenden Sie die keys()-Methode:

for (const user of userRoles.keys()) { console.log(user.name); }

Iterieren über die Werte der Map

Ebenso können Sie die values()-Methode verwenden, um alle Werte in der Map zu erhalten:

for (let role of userRoles.values()) { console.log(role); }

Iterieren über die Elemente der Map

Auch die entries()-Methode gibt einen Iterator zurück, der ein Array von [Schlüssel, Wert] für jedes Element im Map enthält:

for (const [user, role] of userRoles.entries()) { console.log(`${user.name}: ${role}`); }

Konvertieren von Map-Schlüsseln oder -Werten in ein Array

Manchmal möchten Sie mit einem Array anstelle eines iterierbaren Objekts arbeiten. In diesem Fall können Sie den Spread-Operator verwenden:

let keys = [...userRoles.keys()];

Elemente aus einer Map löschen

Um einen Eintrag in der Map zu löschen, verwenden Sie die delete()-Methode:

userRoles.delete(john);

Alle Elemente in der Map löschen

Um alle Einträge im Map-Objekt zu löschen, verwenden Sie die clear()-Methode:

userRoles.clear();

Nach dem Aufruf dieser Methode beträgt die Größe des Maps jetzt null:

console.log(userRoles.size); // 0

Unterschiede zwischen Map und Objekt

Hier sind einige der Hauptunterschiede zwischen einem Map und einem Objekt:

• Maps sind direkt iterierbar, während Objekte nicht direkt iterierbar sind.
• Maps haben eine size-Eigenschaft, während Objekte dies nicht haben.
• Die Schlüssel einer Map können jeden Datentyp haben, während die Schlüssel eines Objekts Strings oder Symbole sein müssen.
• Die Schlüssel in einem Map werden in der Einfügeordnung gespeichert, während die Schlüssel eines Objekts nicht gut geordnet sind.

Schlussfolgerung

In diesem Artikel haben Sie gelernt, wie Sie mit dem JavaScript Map-Objekt arbeiten und dessen nützliche Methoden zur Manipulation von Einträgen in der Map verwenden können.
Maps bieten eine flexiblere und leistungsfähigere Möglichkeit, Daten in Schlüssel-Wert-Paaren zu speichern als herkömmliche Objekte. Wenn Sie mehr über die Grundlagen des Programmierens erfahren möchten,
besuchen Sie gerne den verlinkten Leitfaden.