Imagen destacada del artículo ¿Cómo recorrer un array en javascript?

¿Cómo recorrer un array en javascript?

javascript svg
actualizado: 19 / 07 / 2022

Recorrer un arreglo es una de las cosas que tenemos que hacer frecuentemente en el mundo del desarrollo web, ya que los arrays son por mucho la estructura de datos más usada en la programación y en este tutorial aprenderás a recorrerlos con javascript.

Recorrer arreglo con el ciclo for

js
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
js
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//1
//2
//3
//4
//5
//...

**Muy fácil ¿no? escribimos un ciclo for que imprime la posición de cada uno de los valores dentro del arreglo.

Muy bien ahora vamos a hacer un ejemplo más avanzado, Vamos a crear una función que recorra el array y retorne solo los elementos del arreglo que sean mayor que 10.

js
function mayorQueDiez(arr) {
let nuevoArreglo = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
nuevoArreglo.push(arr[i]);
}
}
return nuevoArreglo;
}
mayorQueDiez([2, 12, 8, 14, 80, 0, 1]);
// retorna [12, 14, 80]

La condicional dentro del ciclo le indica que si encuentra un número que sea mayor que 10 lo agregue al nuevo arreglo. El ciclo for es el más versatil para trabajar con arreglos pero existen otras opciones que hacen el trabajo mucho más fácil e intuitivo.

Recorrer array usando forEach js

El método forEach nos permite recorrer una matriz de forma mucho mas sencilla que el ciclo for, forEach() ejecuta un callback por cada item dentro del arreglo y las recorre de forma ascendente.

js
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.forEach(element => {
console.log(element);
});
//1
//2
//3
//4
//...

Para este caso recorremos el arreglo de números con forEach() y por cada elemento hacemos un console.log() del elemento en cuestión, ten en cuenta que este es un ejercicio muy básico, pero puedes implementar este método en escenarios mucho más avanzados

Recorrer array de objetos con js

js
const arrObj = [
{
name: "John",
lastName: "Doe",
},
{
name: "Margarita",
lastName: "Gonzales",
},
{
name: "Manuel",
lastName: "Linares",
},
];

Esto es muy sencillo así que vamos a ello.

js
for (let i = 0; i < arrObj.length; i++) {
console.log(arrObj[i].lastName);
}
//Doe
//Gonzales
//Linares

Recorrer array bidimensional con js

Primero definamos la matriz sobre la que vamos a iterar.

js
const biArray = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];

Podemos recorrer un array dentro de otro con javascript de la siguiente forma:

js
for (let i = 0; i < biArray.length; i++) {
for (let j = 0; j < biArray.length; j++) {
console.log(biArray[i][j]);
}
}
//1
//2
//3
//....

Y aún mas fácil.

js
biArray.forEach(element => {
element.forEach(elem => {
console.log(elem);
});
});
//1
//2
//3
//....

Iterar usando .map()

El método .map() recorre cada item dentro de una matriz y devuelve una nueva matriz que contiene los elementos que se especifican en el callback. Y hace todo esto sin cambiar la matriz original. Vamos a ver un ejemplo en el que extraeremos elementos de un array de objetos.

js
const usuarios = [
{
name: "John",
lastName: "Doe",
},
{
name: "Margarita",
lastName: "Gonzales",
},
{
name: "Manuel",
lastName: "Linares",
},
];
const nombres = usuarios.map(usuario => usuario.name);
console.log(nombres);
// [ 'John', 'Margarita', 'Manuel' ]

Bien, ya tienes diferentes maneras de recorrer un arreglo en js, espero haberte ayudado y gracias por leerme.

Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo desinstalar paquetes npm

Imagen destacada del artículo Cómo desinstalar paquetes npm

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo crear un dropdown (menu desplegable) accesible con reactjs

Imagen destacada del artículo Cómo crear un dropdown (menu desplegable) accesible con reactjs

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css