¿For each en JavaScript?

Question

En Java puedes utilizar un bucle for each diciendo:

for (elemento e : array)

También en jQuery:

$.each(arr, function() {

En JavaScript sé que puedo hacer:

for (var i = 0; i > 10; i ++)

¿Pero hay alguna manera de hacer un for each en JavaScript puro?

Answer 1

PREGUNTA: ¿Hay alguna manera de realizar un bucle for-each en JavaScript puro?

RESPUESTA: Varias maneras hay de hacerlo, tanto para Arrays como Objetos.

---

Maneras de iterar sobre Arrays y Objetos en JavaScript

---

Método Array#forEach

Array.prototype.forEach( callback(valor, indice, array) ) Método Array.forEach [Sólo Arrays]

var miArray = [ 2, 4, 6, 8, 10 ];
miArray.forEach( function(valor, indice, array) {
    console.log("En el índice " + indice + " hay este valor: " + valor);
});

Método Object#keys combinado con Método Array#forEach

Object.keys(objeto) Para obtener en un array asociativo las propiedades de un Objeto. Aportación de eledgaar

var obj = {
  first: "John",
  last: "Doe"
}

// ES6
Object.keys(obj).forEach(key => console.log(key, obj[key]))

// ES5
Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key])
})

Bucle for-i

for ([expresion-inicial]; [condicion]; [expresion-final])sentencia Bucle for-i [Sólo Arrays]

var miArray = [ 2, 4, 6, 8, 10 ];
for (var i = 0; i < miArray.length; i+=1) {
  console.log("En el índice '" + i + "' hay este valor: " + miArray[i]);
}

Bucle for-in

for (variable in objeto) sentencia Arrays [No recomendado] y Objetos [Recomendado]

var miArray = [ 2, 4, 6, 8, 10 ];
for (var indice in miArray) {
  console.log("En el índice '" + indice + "' hay este valor: " + miArray[indice]);
}
    
var miObjeto = { "marca":"audi", "edad":2 };
for (var propiedad in miObjeto) {
  if (miObjeto.hasOwnProperty(propiedad)) {
    console.log("En la propiedad '" + propiedad + "' hay este valor: " + miObjeto[propiedad]);
  }
}

Bucle for-of

for (variable of objeto) sentencia Para cualquier tipo Iterable (Arrays)

var miArray = [ 2, 4, 6, "hola", "mundo" ];
for (var valor of miArray) {
  console.log("Valor: " + valor);
}

---

Conclusión:

Sí necesitas iterar sobre un Array utiliza el método forEach y si necesitas iterar sobre un objeto utiliza el método for-in.

Answer 2

Array.prototype.forEach ( callbackfn [ , thisArg ] )

 
var arr = ["uno", "dos", "tres"];

arr.forEach(function(elemento) {
    console.log(elemento);
});

forEach acepta una función como callback. Al pasar esta función, que actúa como un iterador, la misma es llamada para cada elemento del Array.

^{*Nota: Funciona a partir de ECMAScript 5.}

---

Callback

La función que es pasada como callback acepta 3 parámetros: el valor del elemento, el índice y una referencia al array que se está iterando. Los últimos 2 son opcionales (el primer ejemplo sólo pasaba el elemento). Si también quisieramos usar el índice:

var arr = [];
arr[0]  = "cero";
arr[10] = "diez";
arr[20] = "veinte";

arr.forEach(function(elemento, indice) {
    console.log("pos=", indice, "valor=", elemento);
});

Además, cabe aclarar que .forEach no muta en absoluto al array. Si se cambia el valor de elemento, el array no se verá modificado (aunque sí podría llegar referenciarse para cambiar el valor).

---

Otras funciones similares

• .every() Sale del bucle en cuanto la función devuelve false.
• .some() Sale del bucle en cuanto la función devuelve true.

Answer 3

Como apunte y corrigiendo el comentario de @dddenis sobre iterar un objeto, comentar que también se pueden recorrer objetos con este método.

El constructor Object dispone del método Object.keys() que devuelve un Array de las propiedades de un objeto dado.

Object.keys(obj)

De esta manera podríamos iterar dicho Array y acceder a los valores de dichas propiedades de la siguiente manera:

const obj = {
  first: "John", 
  last: "Doe"
}

console.log(Object.keys(obj))  // ["first", "last"]

// ES6
Object.keys(obj).forEach(key => console.log(key, obj[key]))

// ES5
Object.keys(obj).forEach(function (key) {
  console.log(key, obj[key])
})

Answer 4

The foreach using await and async, check the next code:

const waitFor = (ms) => new Promise(r => setTimeout(r, ms));
[1, 2, 3].forEach(async (num) => {
  await waitFor(50);
  console.log(num);
});
console.log('Done');