¿Cómo recorrer un array en javascript?

Actualizado : 2023-10-11

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

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

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.

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.

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

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

Esto es muy sencillo así que vamos a ello.

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. Podemos recorrer un array dentro de otro con javascript de la siguiente forma:

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

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.

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.

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.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi