Iterar a través de un map en JavaScript

1. Método general para iterar a través de un map en JavaScript
2. Use el bucle for of para iterar a través de un map en JavaScript
3. Use el método forEach para iterar a través de un map

Un map tiene dos componentes, la clave y el valor. Las técnicas disponibles para atravesar un objeto de map inicialmente toman la clave y luego iteran a través del valor o valores. Este bucle termina hasta la última clave del map, y su valor se itera (solo si no termina antes de eso).

Aquí nos centraremos en los métodos más fáciles para trabajar en la iteración. El método anterior a ES6 para iterar un objeto de map tiene líneas de código comparativamente largas, mientras que ES6 ofrece formas nuevas y sencillas de realizar el trabajo. En la siguiente sección, los discutiremos.

Método general para iterar a través de un map en JavaScript

Para este ejemplo, tomaremos un objeto que tiene un valor de matriz para cada clave. Usaremos el bucle for in para tomar el objeto e iterarlo. A continuación, dentro del ámbito for in, ejecutaremos un bucle normal for para iterar los elementos del array de las claves de objeto.

Revisemos el código y la salida para una mejor comprensión.

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

Producción:

Use el bucle for of para iterar a través de un map en JavaScript

En el caso del bucle for of, crearemos un dúo de variables con la asignación de destrucción, que desempaquetará la clave y el valor después de cada iteración. Aquí, tendremos una instancia tasteMap de un constructor de maps.

Además, cargaremos la instancia del objeto con los pares apropiados de claves y valores. El tasteMap.entries() devuelve explícitamente la iteración de pares de clave y valor.

Saltemos a la valla de código para adivinar el resultado.

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

Producción:

Use el método forEach para iterar a través de un map

Aquí tenemos una de las formas populares de iteración de maps ES6. Este método es tan simple como activar una función con dos argumentos que son clave y valor. Y está listo para iterar y atravesar los pares con unas pocas líneas de código.

Fragmento de código:

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

Producción: