ProgramingWeb

¿Cómo recorrer un array en javascript?

Esta tarea es una de las mas frecuentes que nos encontramos en el mundo del desarrollo web, los arreglos son la estructura de datos mas usada y en este tutorial aprenderás a como recorrerlos de diversas formas.

Bien empecemos iterando sobre un arreglo sencillo.

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 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 lo hacen un poco más fácil.

Recorrer usando forEach

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

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

Primero definamos la matriz sobre la que vamos a iterar.

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

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

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.