Cómo usar el bucle forEach() en JavaScript

El forEach() loop se introdujo en ES6 (ECMAScript 2015) y ejecuta la función dada una vez para cada elemento en una matriz en orden ascendente. No ejecuta la función de devolución de llamada para elementos de matriz vacíos.

Puede usar este método para iterar a través de matrices y NodeLists en JavaScript.

Recorriendo Arrays

Esta es la sintaxis de Array.forEach() método:

array.forEach(callback(currentVal [, index [, array]])[, thisVal])

La función de devolución de llamada acepta entre uno y tres argumentos:

• currentVal — El valor del elemento actual en el bucle
• index — El índice de la matriz del elemento actual
• array — El objeto matriz el forEach() se invocó el bucle

Solo se requiere el primer argumento. Los otros dos argumentos son opcionales. Puedes nombrar estas variables como quieras. Si el thisVal se proporciona el argumento, se utilizará como devolución de llamada this valor.

El siguiente ejemplo demuestra cómo puede usar el forEach() bucle para iterar a través de una matriz en JavaScript:

const birds = ['🐦', '🦅', '🦆', '🦉'];

birds.forEach((item, index) => {
  console.log(`${index} : ${item}`);
});

Aquí está la salida:

0 : 🐦
1 : 🦅
2 : 🦆
3 : 🦉

Veamos otra matriz de ejemplo que contiene valores vacíos:

const partialArray = [2, 4, , 3];

partialArray.forEach(num => console.log(num));

// output
// 2
// 4
// 3

Como puede ver arriba, la función de devolución de llamada se omite para el valor vacío.

El Array.forEach() método solo funciona para matrices, y no para NodeLists. Significa que no puede usarlo para recorrer los elementos que obtiene usando document.querySelectorAll() y métodos de selección similares.

Recorriendo las listas de nodos

Afortunadamente, NodeList también proporciona un forEach() método que es similar a Array.forEach() , pero solo funciona para NodeLists como se muestra en el siguiente ejemplo:

const elems = document.querySelectorAll('div');

elems.forEach((elem, index) => {
  console.log(elem); // the elment
  console.log(index); // the index in the NodeList
});

Omitir elementos

En un for bucle, puede omitir fácilmente el elemento actual utilizando el continue palabra clave o use break para detener el bucle por completo.

Pero ese no es el caso con el forEach() método. Dado que ejecuta una función de devolución de llamada para cada elemento, no hay forma de detenerlo o interrumpirlo más que lanzar una excepción.

Sin embargo, puede verificar condicionalmente el valor del artículo y usar el return instrucción para omitir el elemento actual. Por ejemplo, si desea registrar el nombre de todos los pájaros en la consola excepto Búho, debe hacer lo siguiente:

const birds = ['Eagle', 'Parrot', 'Owl', 'Sparrow'];

birds.forEach((item, index) => {

  // if `Owl`, skip it
  if (item === 'Owl') {
    return;
  }

  // otherwise log the bird name
  console.log(item);
});

Compatibilidad del navegador

El Array.forEach() La función funciona bien en todos los navegadores modernos, incluido Internet Explorer 9 y superior. Sin embargo, puede usar un polyfill para hacerlo compatible hasta IE6.

El NodeList.forEach() El método también es compatible con todos los navegadores más recientes, excepto Internet Explorer. Necesitas un polyfill para seguir usándolo en IE.