DEV Community

loading...
Cover image for 5 maneras de iterar un objeto en JavaScript

5 maneras de iterar un objeto en JavaScript

duxtech profile image dux Updated on ・2 min read

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

Discussion (0)

pic
Editor guide