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 mientras lo recorres. Si lo que buscas es transformar arrays, consulta el concepto Transformaciones de arrays.

El bucle for

La forma más básica y, por lo general, muy eficiente de iterar sobre 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 para nada, puedes usar un bucle for...of.

for...of funciona como el bucle for básico que viste arriba, pero en lugar de tener que lidiar con el índice como variable del bucle, recibes 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 tener en cuenta 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 de arriba, el callback solo usa el elemento actual como parámetro. Si lo necesitas, el callback puede usar 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 el contexto this que se usará en la iteración como segundo parámetro opcional. Puedes ver un ejemplo en la sección «Using thisArg» de MDN.

Hay un par de cosas que debes tener en cuenta al trabajar con forEach.

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