Formas de iterar sobre una array en JavaScript

Ultima actualización en domingo 13º mar. 2022

Las arrays en Javascripts, son variables individuales utilizadas para almacenar diferentes tipos de elementos.

	array = [ 'Code', 'Jagd', 'CJ' ];

// Acceso a los elementos de la array uno por uno
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
	
	Code
Jagd
CJ
	

Hay varias formas en que se puede iterar sobre una array en Javascript.

usando for loop

Esto es similar a for loops en otros idiomas como C / C ++, Java, etc.

	array = [ 1, 2, 3, 4, 5, 6 ];
for (index = 0; index < array.length; index++) {
    console.log(array[index]);
}
	
	1
2
3
4
5
6
	

Pros

Funciona en todos los entornos

Puede utilizar instrucciones de control de flujo break and continue

Contras

Demasiado detallado.

Imperativo

usando while loop

	index = 0;
array = [ 1, 2, 3, 4, 5, 6 ];

while (index < array.length) {
    console.log(array[index]);
    index++;
}
	
	1
2
3
4
5
6
	

usando forEach método

El método forEach llama a la función proporcionada una vez por cada elemento de matriz en el order

	array = [ 1, 2, 3, 4, 5, 6 ];

array.forEach(myFunction);
function myFunction(item) {
    console.log(item);
}
	

Pros

Muy corto.

Declarativo

Contras

No se puede usar break / continuar

usando every método

	array = [ 1, 2, 3, 4, 5, 6 ];

const menosdeCinco = x => x < 5;

if (array.every(menosdeCinco)) {
    console.log('Todos son menos de 5');
} else {
    console.log('Al menos un elemento no es inferior a 5');
}
	
	// Al menos un elemento no es inferior a 5
	

usando map función

Un mapa aplica una función sobre cada elemento y, a continuación, devuelve la nueva array.

	array = [ 1, 2, 3, 4, 5, 6 ];

cuadrado = x => Math.pow(x, 2);
cuadrados = array.map(cuadrado);
console.log(array);
console.log(cuadrados);
	
	1 2 3 4 5 6
1 4 9 16 25 36
	

Usondo for-of

	let colores = ['red', 'green', 'blue'];
for (const color of colores){
    console.log(color);
}
	

Pros

Puede iterar sobre una gran variedad de objetos.

Puede utilizar instrucciones de control de flujo normales (romper / continuar).

Útil para iterar valores asincrónicos en serie.

Contras

Si se dirige a navegadores más antiguos, la salida transpilada podría sorprenderlo.