Bucles de arrays en

Acerca de Bucles de arrays

Cuando trabajas con arrays, a veces quieres ejecutar código para cada valor del array. A esto se le llama iterar o recorrer el array con un bucle.

Aquí veremos el caso en el que no quieres modificar el array durante el proceso. Para transformar arrays, consulta el concepto Transformaciones de arrays.

El bucle for

La forma más básica y, por lo general, muy eficiente de recorrer un array es usar un bucle for, consulta el concepto Bucles for.

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

El bucle for...of

Cuando quieres trabajar directamente con el valor en cada iteración y no necesitas el índice en absoluto, puedes usar un bucle for...of.

for...of funciona como el bucle for básico mostrado arriba, pero en lugar de tener que lidiar con el índice como una variable del bucle, se te proporciona el valor directamente.

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

Igual que en los bucles for normales, puedes usar continue para detener la iteración actual y break para detener por completo la ejecución del bucle.

JavaScript también tiene un bucle for...in para iterar sobre las claves de un objeto. Es importante señalar que for...of y for...in no son intercambiables; consulta la documentación de MDN para más detalles.

El método forEach

Todos los arrays incluyen un método forEach que también se puede usar para recorrer los elementos del array.

forEach acepta un callback como parámetro. La función callback se llama una vez por cada elemento del array.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

En el ejemplo anterior, el callback solo usa el elemento actual como parámetro. Si es necesario, el callback puede hacer uso de hasta tres parámetros.

• el valor de la iteración actual
• el índice de la iteración actual
• el array completo

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

Además del callback, forEach acepta como segundo parámetro opcional el contexto this que se usará durante la iteración. Puedes ver un ejemplo en la sección «Using thisArg» de MDN.

Hay un par de cosas que conviene tener en cuenta cuando trabajas con forEach.

• No hay forma de detener la iteración una vez que el bucle forEach ha empezado. Las instrucciones break y continue no existen en este contexto.
• forEach se comporta de forma extraña si modificas el array después de empezar el bucle. Los elementos que añadas al final se ignorarán, eliminar elementos puede provocar que otros se salten, etc. Para evitar este tipo de problemas, nunca modifiques el array subyacente en el callback.
• El valor devuelto del propio método forEach es undefined. Por eso no puedes encadenar al final ningún otro método de array.
• Si necesitas optimizar tu código para mejorar el rendimiento, deberías plantearte usar for o for...of, ya que ambos son unas tres veces más rápidos.