Itérer sur une map en JavaScript

1. Méthode générale pour parcourir une map en JavaScript
2. Utiliser la boucle for of pour parcourir une map en JavaScript
3. Utiliser la méthode forEach pour parcourir une map

Une map a deux composants, la clé et la valeur. Les techniques disponibles pour parcourir un objet cartographique saisissent initialement la clé, puis parcourent la ou les valeurs. Cette boucle se termine jusqu’à la dernière clé de map et sa valeur est itérée (uniquement si vous ne vous terminez pas avant).

Ici, nous allons nous concentrer sur les méthodes les plus simples pour travailler sur l’itération. La méthode pré ES6 pour itérer un objet cartographique a de longues lignes de code comparatives, tandis que l’ES6 apporte de nouvelles façons simples de faire le travail. Dans la section suivante, nous les aborderons.

Méthode générale pour parcourir une map en JavaScript

Pour cette instance, nous prendrons un objet qui a une valeur de tableau pour chaque clé. Nous allons utiliser la boucle for in pour saisir l’objet et l’itérer. Ensuite, dans la portée for in, nous exécuterons une boucle for normale pour itérer les éléments du tableau des clés d’objet.

Vérifions le code et la sortie pour une meilleure compréhension.

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]);
  }
}

Production :

Utiliser la boucle for of pour parcourir une map en JavaScript

Dans le cas de la boucle for of, on va créer un duo de variables avec l’assignation destructrice, qui va déballer la clé et la valeur après chaque itération. Ici, nous aurons une instance tasteMap d’un constructeur de map.

De plus, nous chargerons l’instance d’objet avec les paires appropriées de clés et de valeurs. Le tasteMap.entries() renvoie explicitement l’itérable des paires clé et valeur.

Sautons sur la barrière de code pour deviner le résultat.

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);
}

Production :

Utiliser la méthode forEach pour parcourir une map

Ici, nous avons l’un des moyens populaires d’itération de map ES6. Cette méthode est aussi simple que de déclencher une fonction avec deux arguments qui sont la clé et la valeur. Et vous êtes prêt à itérer et parcourir les paires avec quelques lignes de code.

Extrait de code:

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);
});

Production :