¿Cómo recorrer un array en javascript?

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

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

Copiarjs
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.

Copiarjs
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.

Copiarjs
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

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

Esto es muy sencillo así que vamos a ello.

Copiarjs
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.

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

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

Copiarjs
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.

Copiarjs
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.

Copiarjs
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.