5 formas para recorrer un array con JavaScript

En este artículo vas a ver 5 formas distintas que permiten recorrer un array con JavaScript.

Un loop o bucle en cualquier lenguaje de programación usualmente es código que se repite una y otra vez hasta que cierta condición se cumple.

1- Recorrer un array con JavaScript usando for

for (let i = 0; i < 10; i++) {
    console.log(`Numero: ${i}`);
}

Inicializamos la variable i en 0, se ejecutará hasta que i tenga un valor menor que 10 y se incrementará de 1 en 1.

En cada iteración, imprimo el valor de la variable en la consola.

La ventaja que tiene el for es que recorre cierta cantidad de código hasta que la condición se cumpla y puede ser muy útil cuando estás leyendo registros de una base de datos y, fácilmente puedes limitar la cantidad de registros a procesar.

2- Recorrer un array con JavaScript usando while

El while también se puede utilizar para recorrer un arreglo o repetir código en x ocasiones.

let i = 0;
while (i < 10) {
    console.log(`Numero: ${i}`);
    i++;
}

Puedes crear una variable que hará de contador. Entre paréntesis puedes poner la condición que se comprobará en cada iteración y que determinará el final del bucle.

En el caso del ejemplo, se estará ejecutando hasta que el valor de i sea menor que 10.

Fíjate que el incremento de la variable i se ejecuta justo después del código que quieres repetir.

3- Recorrer un array usando do while

Con el do… while el código al menos se va a ejecutar una vez sin importar si la condición se cumple o no.

i = 0;
do {
    console.log(`Numero: ${i}`);
    i++;
} while (i < 10);

El código es secuencial. Primero se imprime el valor de i en la consola, se incrementa la variable y, finalmente, se comprueba la condición.

4- Recorrer un array usando forEach

Otra forma de recorrer un arreglo es utilizando lo que se conoce como un forEach.

const comidas = ['Desayunar', 'Almorzar', 'Comer', 'Merendar', 'Cenar'];
comidas.forEach(function(comida, index) {
    console.log(`${index} : ${comida}`);
});

He creado un array con las comidas del día y las estoy iterando con forEach para mostrar su índice y valor en consola.

Esta sintaxis se ve muy limpia y, por eso, es una de mis preferidas para usarla en mis proyectos.

5- Recorrer un array usando map

Otra forma de recorrer un arreglo es utilizando lo que se conoce como map que permite recorrer un arreglo de objetos.

const comidas = [
    {id: 1, momento: 'Desayuno'},
    {id: 2, momento: 'Almuerzo'},
    {id: 3, momento: 'Comida'},
    {id: 4, momento: 'Merienda'},
    {id: 5, momento: 'Cena'},
];
 
const momentoComida = comidas.map(function(comida) {
    return comida.momento;
});
 
console.log(momentoComida);

En el código anterior, he creado un arreglo con 5 objetos que estoy recorriendo con map.

Si te fijas en el código, podrás darte cuenta que esta forma de iteración, a diferencia del for, foreach o while, en este caso, se almacena la información para luego extraerla. No se extrae la información directamente.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(5 votos, promedio: 5 de 5)
Comparte en las redes sociales

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre