Cómo hacer bucles y enumerar propiedades de objetos de JavaScript

En este tutorial, aprenda cómo hacer un bucle y enumerar (indexar) propiedades/campos (claves y valores) de objetos de JavaScript, ¡con ejemplos prácticos de código!

Introducción

Al escribir código JavaScript, es posible que deba recorrer los objetos JavaScript y enumerar sus campos/valores. Desafortunadamente, los objetos de JavaScript no son iterables como matrices o cadenas, por lo que no podemos simplemente hacer un bucle en un objeto usando map(), forEach() o un bucle for...of .

Supongamos que tenemos un objeto que contiene los detalles de un usuario:

1
let user = { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" };

Si intentamos realizar un bucle, tal como lo hacemos con otras matrices iterables, nos esperan coloridos mensajes de errores:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
user.map(detail => {
    console.log(detail);
}) // TypeError: user.map is not a function 
  
// Or
user.forEach(detail => {
    console.log(detail);
}) // TypeError: user.forEach is not a function
  
// Or
for (let detail of user) {
    console.log(detail);
} // TypeError: user is not iterable 

En esta guía, veremos cómo hacer un bucle y enumerar objetos en JavaScript, desde los enfoques más simples, como usar un bucle for...in hasta los nuevos métodos estáticos de objetos que se introdujeron en ES6 y ES8. .

Repetir y enumerar objeto con for...in Loop

Antes de la introducción de ES6, la única forma de recorrer objetos en JavaScript era obtener un valor clave mediante el uso de un bucle for...in. Este método es compatible con todos los navegadores antiguos y modernos, y funciona razonablemente bien.

Supongamos que tenemos un objeto usuario:

1
2
3
4
5
6
7
const user = {
    firstName: "John",
    lastName: "Doe",
    email: "[correo electrónico protegido]",
    age: 37,
    hobby: "Singing"
};

Para iterar y enumerar los valores, podemos recorrer cada clave en el usuario, siguiendo un índice:

1
2
3
4
5
6
7
var index = 0;
for (const key in user) {
  if (user.hasOwnProperty(key)) {
        console.log(`Index: ${index}, ${key}: ${user[key]}`);
        index++;
    }
}

Esto resulta en:

1
2
3
4
5
Index: 0, firstName: John
Index: 1, lastName: Doe
Index: 2, email: [correo electrónico protegido]
Index: 3, age: 37
Index: 4, hobby: Singing

El bucle for...in funciona muy bien, pero tiene el defecto de que itera a través de las propiedades en la Cadena de prototipos, que tiene muchas otras propiedades además de las del usuario. Al recorrer objetos con el bucle for...in, debe verificar si la propiedad pertenece al objeto usando hasOwnProperty(), como se muestra en el ejemplo anterior. Esto es ineficiente, ya que se realizan más bucles de los necesarios y hace que el código sea menos legible.

En segundo lugar, a veces es posible que necesite un poco más de flexibilidad, que proporcionan las matrices. Consideremos ahora una mejor manera con una sintaxis mucho mejor que funciona con menos tecnicismos.

Métodos estáticos de objetos para hacer bucles y enumerar objetos de JavaScript

En esta sección, cubriremos tres métodos estáticos de objetos para convertir propiedades de objetos en arreglos. Una vez convertida a una matriz, ¡tenemos mucha más flexibilidad, así como eficiencia para recorrer las matrices y enumerarlas!

  • Objeto.teclas()
  • Objeto.valores()
  • Objeto.entradas()

{.icon aria-hidden=“true”}

Nota: Un objeto tiene propiedades, que son pares clave-valor. Cada propiedad en un objeto tiene un nombre (también conocido como clave) y un valor correspondiente (también conocido como valor). Puede extraer claves() y valores() individualmente, o entradas(), que son pares clave-valor, según las propiedades que desee enumerar.

Recorrer y enumerar claves de objetos con Object.keys()

El método Object.keys() se agregó en ES6 para facilitar el bucle sobre los objetos. Genera una matriz cuyos elementos son cadenas que contienen los nombres (claves) de las propiedades de un objeto. El objeto se pasa como argumento a Object.keys(). Después de eso, puede iterar a través de la matriz y recuperar el valor de cada propiedad utilizando cualquiera de los métodos de bucle de la matriz, como forEach(), map(), etc.

1
Object.keys(objectName);

Por ejemplo, supongamos que tenemos un objeto de puntuaciones de usuarios en varias materias:

1
2
3
4
5
6
const userScores = {
    chemistry: 60,
    mathematics: 70,
    physics: 80,
    english: 98
};

Podemos recorrer el objeto y obtener las claves, que para este ejemplo serían los sujetos:

1
2
const names = Object.keys(userScores);
console.log(names); // ["chemistry","mathematics","physics","english"]

Notará que esto devolvió una matriz, que ahora podemos usar con cualquier método de matriz para recuperar los datos:

1
2
3
names.forEach((key, index) => {
    console.log(`${index}: ${key}`);
});

Esto resulta en:

1
2
3
4
0: chemistry
1: mathematics
2: physics
3: english

Vale la pena señalar que también puede obtener el valor usando esta notación, al proporcionar la clave al objeto:

1
2
3
names.forEach((key, index) => {
    console.log(`${index} - Key: ${key}, Value: ${userScores[key]}`);
});
1
2
3
4
0 - Key: chemistry, Value: 60
1 - Key: mathematics, Value: 70
2 - Key: physics, Value: 80
3 - Key: english, Value: 98

Recorrer y enumerar valores de objeto con Object.values()

El método Object.values() es similar a Object.keys() en que extrae los valores de las propiedades del objeto y se introdujo en ES8. La matriz devuelta se puede recorrer en bucle utilizando cualquiera de los métodos de bucle de matriz, naturalmente.

1
Object.values(objectName);

Usando el mismo objeto:

1
2
3
4
5
6
const userScores = {
    chemistry: 60,
    mathematics: 70,
    physics: 80,
    english: 98
};

Los valores se obtienen fácilmente a través de:

1
2
const values = Object.values(userScores);
console.log(values); // [60,70,80,98]

Nuevamente, podríamos recorrer fácilmente esta matriz, asignando un índice a cada valor:

1
2
3
values.forEach((value, index) => {
    console.log(`Index: ${index}, Value: ${value}`);
});

Esto resulta en:

1
2
3
4
Index: 0, Value: 60
Index: 1, Value: 70
Index: 2, Value: 80
Index: 3, Value: 98

Recorrer y enumerar propiedades de objeto con Object.entries()

El método Object.entries() es un híbrido de los métodos Object.key() y Object.values(), que produce una matriz de matrices con dos elementos en cada matriz interna: la primera elemento siendo la propiedad, y siendo el segundo elemento el valor. Es otro método ES8:

1
Object.entries(objectName);

Ahora, reutilicemos el mismo objeto que antes:

1
2
3
4
5
6
const userScores = {
    chemistry: 60,
    mathematics: 70,
    physics: 80,
    english: 98
};

Podemos recorrer el objeto y obtener tanto las claves como los valores.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const data = Object.entries(userScores);
console.log(data); 
  
// Output:
// [
// [ "chemistry", 60 ]
// [ "mathematics", 70 ]
// [ "physics", 80 ]
// [ "english", 98 ]
// ]

El tipo de devolución se puede empaquetar en un resultado [clave, valor] cada uno, y aún podemos realizar un seguimiento de la indexación fácilmente:

1
2
3
data.forEach(([key, value], index) => {
    console.log(`Index: ${index} | I scored ${value} in my ${key} subject!`)
})

Esto resulta en:

1
2
3
4
Index: 0 | I scored 60 in my chemistry subject!
Index: 1 | I scored 70 in my mathematics subject!
Index: 2 | I scored 80 in my physics subject!
Index: 3 | I scored 98 in my english subject!

Este enfoque puede acomodar más manipulaciones y cálculos, ya que tenemos acceso tanto a las claves como a los valores.

Conclusión

En esta guía, hemos echado un vistazo a cómo recorrer objetos y enumerar sus propiedades. Comenzamos con el ciclo simple for...in, teniendo en cuenta sus limitaciones. Luego, saltamos al bucle y la enumeración de valores, claves y los pares de valores y claves usando métodos estáticos de Objeto, agregados en ES6 y ES8.