Iterieren durch eine Map in JavaScript

1. Allgemeine Methode zum Durchlaufen einer Map in JavaScript
2. Verwenden Sie die for of-Schleife, um eine Map in JavaScript zu durchlaufen
3. Verwenden Sie die forEach-Methode, um eine Map zu durchlaufen

Eine Map besteht aus zwei Komponenten, dem Schlüssel und dem Wert. Die verfügbaren Techniken zum Durchlaufen eines Map-objekts greifen zunächst den Schlüssel und iterieren dann durch den Wert oder die Werte. Diese Schleife endet bis zum letzten Zuordnungsschlüssel, und ihr Wert wird wiederholt (nur wenn Sie nicht vorher abbrechen).

Hier konzentrieren wir uns auf die einfachsten Methoden, um an der Iteration zu arbeiten. Die Pre-ES6-Methode zum Iterieren eines Map-objekts hat vergleichsweise lange Codezeilen, während ES6 neue und einfache Möglichkeiten bietet, die Arbeit zu erledigen. Im folgenden Abschnitt werden wir sie besprechen.

Allgemeine Methode zum Durchlaufen einer Map in JavaScript

Für dieses Beispiel nehmen wir ein Objekt, das einen Array-Wert für jeden Schlüssel hat. Wir werden die for in-Schleife verwenden, um das Objekt zu greifen und es zu iterieren. Als nächstes werden wir innerhalb des Bereichs for in eine normale for-Schleife ausführen, um die Array-Elemente der Objektschlüssel zu durchlaufen.

Lassen Sie uns den Code und die Ausgabe zum besseren Verständnis überprüfen.

var fruitMap = {
  fruits: ['Grape', 'Orange', 'Strawberry'],
  taste: ['sour', 'tangy', 'sweet']
};
for (var m in fruitMap) {
  console.log(fruitMap[m]);
  for (var i = 0; i < fruitMap[m].length; i++) {
    console.log(fruitMap[m][i]);
  }
}

Ausgabe:

Verwenden Sie die for of-Schleife, um eine Map in JavaScript zu durchlaufen

Im Fall der for of-Schleife erstellen wir ein Variablenduo mit der destruktiven Zuweisung, das nach jeder Iteration Schlüssel und Wert entpackt. Hier haben wir eine Instanz tasteMap eines Mapnkonstruktors.

Außerdem laden wir die Objektinstanz mit entsprechenden Paaren von Schlüsseln und Werten. Die tasteMap.entries() gibt explizit das Iterable von Schlüssel-Wert-Paaren zurück.

Springen wir auf den Codezaun, um das Ergebnis zu erraten.

var tasteMap = new Map();
tasteMap.set('Grape', 'sour');
tasteMap.set('Strawberry', 'sweet');
tasteMap.set('Tomato', 'tangy');

for (var [key, value] of tasteMap.entries()) {
  console.log(key + ' = ' + value);
}

Ausgabe:

Verwenden Sie die forEach-Methode, um eine Map zu durchlaufen

Hier haben wir eine der beliebtesten Möglichkeiten der ES6-Mapniteration. Diese Methode ist so einfach wie das Auslösen einer Funktion mit zwei Argumenten, nämlich Schlüssel und Wert. Und Sie sind bereit, die Paare mit ein paar Zeilen Code zu iterieren und zu durchlaufen.

Code-Auszug:

var tasteMap = new Map();
tasteMap.set('Grape', 'sour');
tasteMap.set('Strawberry', 'sweet');
tasteMap.set('Tomato', 'tangy');

tasteMap.forEach(function(key, val) {
  console.log(key + ' ' + val);
});

Ausgabe: