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!
(19 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

2 respuestas a “5 formas para recorrer un array con JavaScript”

  1. Sergio dice:

    Hola , puedes usar document.write( aqui variables o literales)
    Ejemplo
    //declaro un array
    const cars=[«Saab», «Volvo»,»BMW» ];

    //llamo a la funcion que recorre y muestra el contenido en html
    itera(cars)

    //Funcion que escribe en HTML
    function escribe(nombreArray,mensaje){
    document.write(««+mensaje+»«+»:»+nombreArray+»»);
    }

    //Funcion que itera un arreglo
    function itera(nombreArray, mensaje){
    for(let i=0;i<nombreArray.length;i++){
    escribe(nombreArray[i],"Elemento N°"+i+" del array xxx es ")};
    }

  2. gabriel araya garcia dice:

    console.log es una muestra en la consola de los elementos de la lista,… pero,.. ¿Cómo desplegar dicha lista en mi pagina html?
    te agradeceria nos indicaras eso

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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

Ver más sobre