5 maneras de iterar un objeto en JavaScript

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
*/

• 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
*/

• 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
*/

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
*/

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
*/

---

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.

Comments

[Franco Moreira]

messi rve

[Andrea Elizabeth Castelo]

Exelnte y claro!!!

[Cristian Fernando]

Muchas gracias por tu comentario

[Gabriel Cisneros]

Gracias excelente post

[Cristian Fernando]

gracias a ti por leerlo y dejarme tu comentario

[sebapinery]

Muchas gracias!

[Cristian Fernando]

Gracias a ti por leer mi post y dejar un comentario @sebapinery
Saludos!

[patxiarana]

hola amigo muy buen post, realmente me fue de gran utilidad, podrias decirme en caso de que tenga que iterar un array de objetos, como podria hacer para hacerlo?,
saludos

[Cristian Fernando]

Claro que si. Imagina que tienes el siguiente array de objetos:

const perros = [
  {
    id:1,
    nombre:"Boby",
    edad:2,
  },
  {
    id:2,
    nombre:"Pepe",
    edad:4,
  },
  {
    id:3,
    nombre:"Pelusa",
    edad:1,
  },
];

Para recorrerlo lo más fácil que puedes hacer es usar un map():

const salida = perros.map(({nombre, edad}) => {
  return `El perror se llama ${nombre} y tiene ${edad} años`
})

Un saludo y gracias por tu pregunta.

[Davidrg37]

Esta tremendo esta opcion!
Sin embargo quiero tratar de llegar al valor de la clave.
Ej yo tengo ---> objeto pelicula1 {nombre : a;
categoria : b;
opcion : c;
formato: d;
horario1: 15,
horario2: 16,
horario3: 18}
de las cuales quiero llegar a las horas de cada horario (ya sea 1 o todas por separado) pero no tengo exito.
Por ej, recorro el objeto con =====>

let hora = Object.values(pelicula1);
for(let i = 0; i<=3;i+=1){
console.log(hora[i]);
}

pero me da como resultado nombre, categoria, opcion, formato (no me trajo ningun horario). Como podría llegar directamente al horario.

P.D. para colocarlo, termine haciendo i = 4; i<=6; i+=1; pero como tengo muchas peliculas, tuve que modificar i en cada pelicula (por ej hay peliculas que tienen 12 funciones). Algún consejo de como llevar solo lo que tiene horario?

[Julio Cesar Solis]

No soy experto pero creo q a horarios los hubieses puesto juntos en un sub-objeto. Y así podrías recorrer ese solo...

[Max Napuche]

Muy bien explicado!

[Cristian Fernando]

Muchas gracias

[rodrigo-calle]

Gracias

[Cristian Fernando]

Gracias por tu comentario

[fmsalinas111]

Gracias Cristian.
Un saludo a La Paz

[irwingb]

Gracias maestro.
El que creo es más fácil de recordar es el 3ro.

[José Hernández]

Muchisimas gracias, me hiciste el dia