JavaScript forEach - Cómo recorrer una matriz en JS

El método JavaScript forEach es una de las varias formas de recorrer las matrices. Cada método tiene diferentes características y depende de usted, dependiendo de lo que esté haciendo, decidir cuál usar.

En esta publicación, vamos a echar un vistazo más de cerca al método JavaScript forEach.

Teniendo en cuenta que tenemos la siguiente matriz a continuación:

const numbers = [1, 2, 3, 4, 5];

Usar el tradicional "bucle for" para recorrer la matriz sería así:

for (i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 

¿Qué hace que el método forEach () sea diferente?

El método forEach también se usa para recorrer arreglos, pero usa una función diferente al clásico "bucle for".

El método forEach pasa una función de devolución de llamada para cada elemento de una matriz junto con los siguientes parámetros:

  • Valor actual (obligatorio): el valor del elemento de matriz actual
  • Índice (opcional): el número de índice del elemento actual
  • Array (opcional): el objeto de matriz al que pertenece el elemento actual

Déjame explicarte estos parámetros paso a paso.

En primer lugar, para recorrer una matriz utilizando el método forEach, necesita una función de devolución de llamada (o función anónima):

numbers.forEach(function() { // code });

La función se ejecutará para cada elemento de la matriz. Debe tomar al menos un parámetro que represente los elementos de una matriz:

numbers.forEach(function(number) { console.log(number); });

Eso es todo lo que necesitamos hacer para recorrer la matriz:

Alternativamente, puede usar la representación de la función de flecha ES6 para simplificar el código:

numbers.forEach(number => console.log(number));

Parámetros opcionales

Índice

Bien, ahora continuemos con los parámetros opcionales. El primero es el parámetro "índice", que representa el número de índice de cada elemento.

Básicamente, podemos ver el número de índice de un elemento si lo incluimos como segundo parámetro:

numbers.forEach((number, index) => { console.log('Index: ' + index + ' Value: ' + number); });

Formación

El parámetro de la matriz es la propia matriz. También es opcional y se puede utilizar si es necesario en diversas operaciones. De lo contrario, si lo llamamos, simplemente se imprimirá tantas veces como el número de elementos de la matriz:

numbers.forEach((number, index, array) => { console.log(array); });

Puede ver el uso de ejemplo del método forEach () en este video:

Soporte del navegador

El método Array.forEach es compatible con todos los navegadores, excepto la versión 8 de IE o anterior:

Si desea obtener más información sobre el desarrollo web, no dude en visitar mi canal de Youtube.

¡Gracias por leer!