JavaScript Map: Einführung in das Map-Objekt mit Beispielen

Map ist ein Konstruktor, der in bestimmten Anwendungsfällen einfachere und effizientere Wege bietet, Daten zu strukturieren und darauf zuzugreifen. 

Was ein Map-Objekt konkret leistet, in drei Punkten:

• Map enthält Schlüssel-Wert-Paare, wobei die Schlüssel von beliebigem Datentyp sein dürfen.

• Map merkt sich die ursprüngliche Einfügereihenfolge der Schlüssel.

• Map hat eine Eigenschaft, die seine Größe angibt.

Nützliche Methoden des JavaScript-Map-Objekts

• clear() – entfernt alle Elemente aus dem Map-Objekt.
•  delete(key) – entfernt das Element mit dem angegebenen Schlüssel. Sie gibt true zurück, wenn das Element im Map-Objekt liegt, sonst false.
•  entries() – gibt ein neues Iterator-Objekt zurück, das für jedes Element des Map-Objekts ein Array [key, value] enthält. Die Reihenfolge der Objekte im Map-Objekt entspricht der Einfügereihenfolge.
•  forEach(callback[, thisArg]) – ruft für jedes Schlüssel-Wert-Paar der Map einen Callback in der Einfügereihenfolge auf. Der optionale Parameter thisArg legt den Wert von this für jeden Callback fest.
•  get(key) – gibt den Wert zum Schlüssel zurück. Existiert der Schlüssel nicht, kommt undefined zurück.
•  has(key) – gibt true zurück, wenn zu dem Schlüssel ein Wert existiert, sonst false.
•  keys() –  gibt einen neuen Iterator zurück, der die Schlüssel der Elemente in der Einfügereihenfolge enthält.
•  set(key, value) – setzt den Wert des Schlüssels im Map-Objekt. Sie gibt das Map-Objekt selbst zurück, du kannst diese Methode also mit weiteren Methoden verketten.
•  values() gibt ein neues Iterator-Objekt zurück, das die Werte aller Elemente in der Einfügereihenfolge enthält.

Beispiele für den Einsatz des JavaScript-Map-Objekts

Ein neues Map-Objekt anlegen

Angenommen, du hast folgende Liste von Nutzerobjekten:

let pierre = {name: 'Pierre Lepez'},
    jean = {name: 'Jean Doe'},
    kevin = {name: 'Kévin Gomez'};

Angenommen, du sollst daraus ein Map-Objekt aus Nutzern und Rollen aufbauen. Dafür nutzt du folgenden Code:

let userRoles = new Map();

userRoles ist eine Instanz des Map-Objekts, und sein Typ ist object, wie das folgende Beispiel zeigt:

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

Elemente zur Map hinzufügen

Um einem Nutzer eine Rolle zuzuweisen, nimmst du die Methode set():

userRoles.set(kevin, 'admin');

Die Methode set() weist dem Nutzer kevin die Rolle des Administrators zu. Da set() verkettbar ist, sparst du dir Tipparbeit, wie dieses Beispiel zeigt:

userRoles.set(pierre, 'éditeur')
          .set(jean, 'abonné');

Ein Map-Objekt mit einem iterierbaren Objekt initialisieren

Wie oben erwähnt kannst du dem Konstruktor Map() ein iterierbares Objekt übergeben:

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

Ein Element über seinen Schlüssel abrufen

Willst du die Rollen von Kévin sehen, nimmst du die Methode get():

userRoles.get(kevin); // admin

Übergibst du einen Schlüssel, der nicht existiert, gibt get() undefined zurück.

let foo = {name: 'Foo'};
userRoles.get(foo); //undefined

Prüfen, ob ein Element zu einem Schlüssel existiert

Um zu prüfen, ob ein Schlüssel in unserem Map-Objekt vorkommt, nimmst du die Methode has().

userRoles.has(foo); // false
userRoles.has(pierre); // true

Die Anzahl der Elemente unseres Map-Objekts ermitteln

Die Eigenschaft size gibt die Anzahl der Einträge des Map-Objekts zurück.

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

Über die Schlüssel deines Map-Objekts iterieren

Um die Schlüssel eines Map-Objekts zu bekommen, nimmst du die Methode keys(). Die Methode keys() gibt ein neues Iterator-Objekt zurück, das die Schlüssel der Elemente enthält.

Das folgende Beispiel gibt die Namen der Nutzer aus dem Map-Objekt userRoles aus.

let kevin = { name: 'Kévin Feige' },
  pierre = { name: 'Pierre Rocher' },
  jean = { name: 'Jean Moulin' };

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

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

Ausgabe:

Kévin Feige
Pierre Rocher
Jean Moulin

Über die Werte deines Map-Objekts iterieren

Genauso holst du dir mit der Methode values() ein Iterator-Objekt mit den Werten aller Elemente deines Map-Objekts:

let kevin = { name: 'Kévin Feige' },
  pierre = { name: 'Pierre Rocher' },
  jean = { name: 'Jean Moulin' };

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

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

Ausgabe:

admin
éditeur
abonné

Über die Elemente deines Map-Objekts iterieren

Außerdem gibt die Methode entries() ein Iterator-Objekt zurück, das für jedes Element des Map-Objekts ein Array [key,value] enthält:

let kevin = { name: 'Kévin Feige' },
  pierre = { name: 'Pierre Rocher' },
  jean = { name: 'Jean Moulin' };

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

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

Damit sich die Iteration natürlicher liest, kannst du Destructuring nutzen:

let kevin = { name: 'Kévin Feige' },
  pierre = { name: 'Pierre Rocher' },
  jean = { name: 'Jean Moulin' };

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

userRoles.forEach((role, user) => console.log(`${user.name}: ${role}`));

Neben der Schleife for…of steht dir die Methode forEach() des Map-Objekts zur Verfügung:

Schlüssel oder Werte der Map in ein Array umwandeln

Manchmal willst du lieber mit einem Array als mit einem iterierbaren Objekt arbeiten. Dafür nimmst du den Spread-Operator.

Das folgende Beispiel wandelt die Schlüssel aller Elemente in ein Array von Schlüsseln um:

var keys = [...userRoles.keys()];
console.log(keys);

Ausgabe:

[ { name: 'Kévin Feige' },
  { name: 'Pierre Rocher' },
  { name: 'Jean Moulin' } ]

Und so wandelst du die Werte der Elemente in ein Array um:

let roles = [...userRoles.values()];
console.log(roles);

Ausgabe:

[ 'admin', 'éditeur', 'abonné' ]

Ein Element über seinen Schlüssel löschen

Um einen Eintrag aus deinem Map-Objekt zu entfernen, nimmst du die Methode delete().

userRoles.delete(pierre);

Alle Elemente eines Map-Objekts löschen

Um alle Einträge des Map-Objekts zu entfernen, nimmst du die Methode clear():

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

WeakMap

Eine WeakMap funktioniert ähnlich wie eine Map, nur müssen die Schlüssel einer WeakMap Objekte sein. Sobald keine Referenz auf einen Schlüssel (ein Objekt) mehr existiert, wird der zugehörige Wert automatisch aus dem Speicher freigegeben.

Eine WeakMap hat nur einen Teil der Methoden eines Map-Objekts:

• get(key)
• set(key, value)
• has(key)
• delete(key)

Das sind die wichtigsten Unterschiede zwischen einer Map und einer WeakMap:

• Über die Elemente einer WeakMap lässt sich nicht iterieren.
• Alle Elemente auf einmal löschen geht nicht.
• Die Größe einer WeakMap lässt sich nicht abfragen.

In diesem Tutorial hast du gelernt, wie du mit dem JavaScript-Objekt Map und seinen nützlichen Methoden die Einträge des Map-Objekts verwaltest.