5 maneras de iterar un objeto en JavaScript

Cristian Fernando - Aug 10 '20 - - Dev Community

Los objetos son estructuras de datos bastante importantes en JavaScript, internamente el lenguaje administra todo mediante objetos. Recorrerlos o iterarlos es bastante sencillo.

1. Usando la propiedad Object.keys()

let perro = {
  nombre: "Scott",
  color: "Negro",
  macho: true,
  edad: 5
};

let claves = Object.keys(perro); // claves = ["nombre", "color", "macho", "edad"]
for(let i=0; i< claves.length; i++){
  let clave = claves[i];
  console.log(perro[clave]);
}
/*
"Scott"
"Negro"
true
5
*/
Enter fullscreen mode Exit fullscreen mode
  • Object.keys() obtiene en un arreglo todas las claves del objeto en cuestión.*

2. Usando la propiedad Object.values()

let perro = {
  nombre: "Scott",
  color: "Negro",
  macho: true,
  edad: 5
};

let valores = Object.values(perro); // valores = ["Scott", "Negro", true, 5];
for(let i=0; i< valores.length; i++){
  console.log(valores[i]);
}
/*
"Scott"
"Negro"
true
5
*/
Enter fullscreen mode Exit fullscreen mode
  • Object.values() obtiene los valores del objecto en cuestión.*

3. Usando un bucle for...in

let perro = {
  nombre: "Scott",
  color: "Negro",
  macho: true,
  edad: 5
};

for (let clave in perro){
  console.log(perro[clave]);
}
/*
"Scott"
"Negro"
true
5
*/
Enter fullscreen mode Exit fullscreen mode

4. Usando la propiedad Object.entries() con un forEach()

let perro = {
  nombre: "Scott",
  color: "Negro",
  macho: true,
  edad: 5
};

Object.entries(perro).forEach(([key, value]) => {
  console.log(value)
});

/*salida:
"Scott"
"Negro"
true
5
*/
Enter fullscreen mode Exit fullscreen mode

5. Usando la propiedad Object.entries() y un bucle for...of

let perro = {
  nombre: "Scott",
  color: "Negro",
  macho: true,
  edad: 5
};

for(const [key, value] of Object.entries(perro)){
  console.log(value)
}

/*salida:
"Scott"
"Negro"
true
5
*/
Enter fullscreen mode Exit fullscreen mode

Conclusiones

  • Recorrer objetos es una tarea bastante básica y sencilla de realizar.
  • Recomiendo usar los métodos provistos de la API del lenguaje (entries(), forEach(), keys(), values(), etc) para recorrer objetos. No reinventes la rueda.
  • No te limites a usar las meneras de recorrer un objeto descritas en este post, dependiendo a la situación, puede que te sea más útil usar otros métodos. En desarrollo existen varias maneras de llegar a los mismos resultados.

img

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .