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 insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

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

Cómo cambiar color de texto html con css

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

Cómo filtrar elementos de un array con filter javascript

Imagen destacada del artículo Cómo filtrar elementos de un array con filter javascript

Cómo eliminar elementos repetidos de un arreglo en JavaScript

Imagen destacada del artículo Cómo eliminar elementos repetidos de un arreglo en JavaScript

Cómo insertar Javascript en HTML

Imagen destacada del artículo Cómo insertar Javascript en HTML

Eliminar el primer y ultimo carácter de una cadena en javascript

Imagen destacada del artículo Eliminar el primer y ultimo carácter de una cadena en javascript

Cómo eliminar elementos de un arreglo en JavaScript

Imagen destacada del artículo Cómo eliminar elementos de un arreglo en JavaScript