JavaScript para cada índice

1. Índice forEach() de JavaScript
2. Argumentos y parámetros de la función de devolución de llamada forEach()
3. Imprimir valores pares e impares en una matriz dada con forEach()
4. Romper/Continuar o Terminar el Ciclo Usando forEach()
5. Conclusión

De los métodos en JavaScript utilizados para las iteraciones en una matriz, forEach() es el más utilizado.

Índice forEach() de JavaScript

Una matriz es una lista ordenada de valores almacenados en un objeto especificado por un índice. forEach() recorre los valores indexados en la matriz, desde index[0] hasta index[1], index[2], etc.

El forEach() llama a la función para cada elemento en una matriz y devuelve undefined en lugar de devolver una nueva matriz ya que no se puede encadenar. Pero esto no se ejecuta para elementos e índices vacíos que se han eliminado o no inicializado.

A pesar de no ser un método mutador con una función de devolución de llamada, forEach() muta la matriz original. Cuando el método forEach() atraviesa una matriz elemento por elemento en orden de índice ascendente, se conoce como función de devolución de llamada.

Cómo funciona forEach() y la función de devolución de llamada

Al principio, antes de llamar a la función de devolución de llamada, forEach() procesa el rango de los elementos de la matriz. Luego, la función de devolución de llamada visita otros índices además de los índices ya solicitados o aquellos que están fuera de rango.

Si se cambia o elimina un elemento existente en el bucle, el valor pasado antes a la función forEach() será el valor predeterminado. Pero la función de devolución de llamada omitirá los elementos eliminados o modificados durante la iteración.

Argumentos y parámetros de la función de devolución de llamada forEach()

El método estandarizado de la función de devolución de llamada de forEach() consta de dos argumentos:

array.forEach(function(currentValue, index, array), thisArg)

La función aquí es la función que usamos para invocar valores. A medida que ejecutamos cada elemento, usamos la función de devolución de llamada como la función.

La función de devolución de llamada incluye tres parámetros definidos a continuación:

1. currentValue: el elemento actual en la matriz (en tiempo de bucle).
2. índice: el índice lleva el índice del valor actual.
3. matriz: la matriz a la que pertenece el elemento de procesamiento actual.

El thisArg es simplemente el valor pasado a this. Además, se refiere a este valor utilizado en devolución de llamada.

El índice, matriz y thisArg se pueden utilizar en este método estandarizado si se desea. Solo se requieren function y currentValue.

Aclaremos esto a través de un ejemplo. Aquí, hemos utilizado una serie de letras nombradas asignando algunas letras al azar en el alfabeto.

var letters = ['b', 'e', 'f', 'j', 'u'];

Utilice el parámetro currentValue

Código:

letters.forEach(function callback(letters) {
  console.log(letters);
});

Producción:

Si queremos representar todas las letras de la matriz individualmente, podemos usar forEach() junto con currentValue. Aquí, hemos utilizado la matriz de letras como currentValue.

El uso de al menos un parámetro es obligatorio al ejecutar la función, ya que realiza cada elemento dentro de la matriz. Para simplificar el código anterior, podemos usar la representación de la función de flecha como se muestra a continuación.

Código:

letters.forEach(letters => console.log(letters))

Producción:

Utilice el parámetro índice

Para obtener el índice de cada elemento en la matriz, podemos expandir el código agregando el parámetro índice que se muestra a continuación.

Código:

letters.forEach((letters, index) => {
  console.log('Index of ' + letters + ' is ' + index);
});

Producción:

Aquí el código muestra el valor del elemento junto con su índice uno por uno.

Utilice el parámetro matriz

Otro parámetro opcional que usamos con la función de devolución de llamada es la matriz. Usando este parámetro matriz, podemos imprimir las matrices por separado como se muestra a continuación.

Código:

letters.forEach((letters, index, array) => {console.log(array)})

Producción:

Este fragmento de código imprime la matriz original de tipos similares a las iteraciones e índices que incluye. Al adaptarnos a los procesos anteriores, podemos implementar la función forEach() junto con los parámetros index y array según el caso de uso.

Hasta ahora, hemos explicado los argumentos y parámetros de la función de devolución de llamada por separado. A continuación se muestra otro ejemplo que utiliza la función de devolución de llamada forEach().

Imprimir valores pares e impares en una matriz dada con forEach()

Código:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach(function(currentValue, index, array) {
  if (currentValue % 2) {
    console.log(' ' + currentValue + ' is an odd number.');
  } else {
    console.log(' ' + currentValue + ' is an even number.');
  }
});

Producción:

Aquí, la matriz de números consta de algunos números aleatorios que usamos en la vida diaria. Hemos utilizado la función forEach() junto con los parámetros: currentValue, index, array y una declaración condicional if para imprimir el número, ya sea impar o no.

Después de cada iteración, esto imprimirá el valor como salida de acuerdo con la declaración condicional if.

Romper/Continuar o Terminar el Ciclo Usando forEach()

Durante el bucle, usar romper o continuar es un método para terminar la matriz una vez que se cumplen las condiciones. Como en otros bucles, apliquemos romper y continuar a forEach().

Usando romper:

Código:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach((numbers) => {
  if (numbers == 9) break;

Producción:

Usando continuar:

Código:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach((numbers) => {
  if (numbers == 9) continue;
  console.log(numbers);
});

Producción:

Como en la salida de ambos fragmentos de código, parece que usar el método forEach() hace que el bucle no pueda terminar o usar romper o continuar para el bucle usando forEach() sin lanzar una excepción dentro del función de devolución de llamada. Por lo tanto, forEach() no es compatible con las palabras clave break o continue.

Conclusión

La función forEach() se convierte en una alternativa al bucle for al considerar la reutilización y legibilidad del código.

Código:

var letters = ['b', 'e', 'f', 'j', 'u'];

//using for() loop
Console.log("From For Loop")
for(var i=0; i< letters.length; i++){
    console.log(letters [i]);
}

//using forEach() function
console.log("From ForEach() function")
letters.forEach(function(currentValue){
    console.log(currentValue);
});

Producción:

En general, entre las otras funciones de ES5, forEach() es una de las mejores características de compatibilidad al máximo.