This content originally appeared on DEV Community and was authored by Juandieruiz
Bienvenidos devs!
En ese artículo vamos a ver 5 formas distintas que nos 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.
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.
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.
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.
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.
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, array, matriz… 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.
JavaScript Array💻¡Llegado hasta aquí si deseas mas contenido asi, te invito a seguirme en Instagram❤ y dame esas ganas de seguir trayendo contenido masivo como este!
@juandieruiz
Juan Diego Gomez
Full Stack Developer
This content originally appeared on DEV Community and was authored by Juandieruiz
Juandieruiz | Sciencx (2022-02-16T09:16:29+00:00) 5 formas de recorrer un array con JavaScript. Retrieved from https://www.scien.cx/2022/02/16/5-formas-de-recorrer-un-array-con-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.