Bucle sobre Array usando JavaScript forEach(), con ejemplos

Este artículo le mostrará cómo usar JavaScript forEach() método para recorrer una matriz.

Prácticamente cualquier aplicación de cualquier complejidad requerirá el bucle sobre matrices (listas) de datos.

El JavaScript forEach() método, que está integrado en JavaScript array variables, hace precisamente esto. Lo usará mucho, así que, afortunadamente, es bastante fácil de usar.

JavaScript para cada uno() Sintaxis

arr.forEach(callback(currentValue[, index[, array]]) {
    // execute something
}[, thisArg]);

Tenga en cuenta que:

  • arr es una matriz o una variable que contiene una matriz
  • devolución de llamada es la función a ejecutar para cada elemento de la matriz
  • valor actual es el elemento actual que se procesa en la matriz, disponible dentro de la función de devolución de llamada
  • índice se puede especificar opcionalmente para obtener el índice de currentValue mientras procesa la matriz y la pone a disposición dentro de la función de devolución de llamada
  • matriz también se puede especificar opcionalmente para que esté disponible la matriz que se está procesando dentro de la función de devolución de llamada
  • este argumento es el valor a usar como este al ejecutar la devolución de llamada
    • esto es una variable con un significado especial en JavaScript. Dondequiera que se use, se refiere al objeto al que pertenece.
    • Si esto no tiene sentido, no se preocupe, no se usa comúnmente con forEach(), tendrá sentido a medida que progrese en la comprensión de JavaScript y la programación orientada a objetos
  • No hay valor de retorno de este método

JavaScript para cada uno () Ejemplo

Aquí hay un ejemplo que imprime cada elemento en una matriz de automóviles junto con el índice en el que se almacena en la matriz:

var cars = ["ford", "holden", "lada", "fiat"];

cars.forEach(function(item, index){
    console.log(item + "exists at index" + index); // Will print the car name and the index it appears at
});

Si quisiera acceder a los coches matriz desde dentro de forEach función de devolución de llamada a medida que se ejecuta, puede pasarla como un tercer parámetro opcional:

cars.forEach(function(item, index, theArray){
    console.log(theArray); // theArray will contain the cars array as it as passed as the third parameter above
});

thisArg, poco utilizado y ligeramente confuso. se puede utilizar de la siguiente manera:

var driverObject = { name: 'tim', age: 54 }; // An object with details of a car driver

cars.forEach(function(item){ 
    console.log(item); // Will print the item from the cars list 
    console.log(this.name); // Will print 'tim', as driverObject was passed as the value to use when referring to the variable called 'this'
}, driverObject)

De nuevo, si thisArg no tiene sentido, está bien, rara vez se usa, y probablemente tendrá sentido cuando llegue el momento de usarlo.

En cuanto a esto en sí mismo, es un concepto fundamental de JavaScript; obtenga más información al respecto aquí.


No