Cómo Iterar o hacer un bucle a través de un objeto JavaScript

1. Bucle for-in para recorrer el objeto JavaScript
2. Usar el bucle for-of para hacer un bucle a través del objeto JavaScript
3. Usar el método forEach para hacer un bucle en el objeto de JavaScript

Este artículo del tutorial introducirá cómo podemos iterar un objeto JavaScript.

Hay varias sentencias de bucle, y un método utilizado para iterar a través de un objeto JavaScript es el siguiente.

• bucle for-in
• bucle for-of
• bucle forEach

Bucle for-in para recorrer el objeto JavaScript

La declaración for es un bucle usado para iterar el objeto JavaScript con pares clave-valor. Este bucle itera sobre todos los elementos del objeto JavaScript.

El código de ejemplo de usar el bucle for-in para iterar a través del objeto JavaScript es el siguiente.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
} for (var city in Cities) {
  console.log(city, ':', Cities[city]);
}

Resultado:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Al usar el bucle for-in, no tenemos que usar ninguna función especial para iterar o hacer un bucle en un objeto.

Usar el bucle for-of para hacer un bucle a través del objeto JavaScript

La declaración for-of es también un bucle que itera un objeto iterable que no tiene pares clave-valor. También podemos usar este bucle para iterar el objeto JavaScript con pares clave-valor pero con algunas funciones especiales como las siguientes.

• Object.getOwnPropertyNames
• Object.entries
• Object.keys
• Reflect.ownKeys

Object.getOwnPropertyNames

Este método devuelve un array de todas las claves de los pares clave-valor almacenados en el objeto. Pero para iterar todos los pares clave-valor del objeto JavaScript, necesitamos usar este método con un bucle for-of.

El código de ejemplo de usar el for-of con Object.getOwnPropertyNames() para iterar el objeto es el siguiente.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Object.getOwnPropertyNames(Cities)) {
  const CityName = Cities[city];
  console.log(city, ':', CityName);
}

Resultado:

City1: Tokyo
City2: Paris
City3: Dubai
City4: Rome
City5: London

Object.entries

Este método devuelve el array del par llave-valor del objeto. Pero para iterar una clave y un valor, necesitamos usar el bucle for-of con este método para hacer un bucle a través del objeto JavaScript.

El código de ejemplo de usar el for-of con Object.entries() para iterar el objeto es el siguiente.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var [city, CityName] of Object.entries(Cities)) {
  console.log(city, ':', CityName);
}

Resultado:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Object.keys

Este método devuelve el conjunto de las claves del objeto. Pero para iterar los pares clave-valor de un objeto, necesitamos usar esta función con el bucle for-of.

El código de ejemplo de usar el for-of con Object.keys() para iterar el objeto es el siguiente.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Object.keys(Cities)) {
  console.log(city, ':', cities[city]);
}

Resultado:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Reflect.ownKeys

Este método también devuelve las claves del objeto. Pero para iterar los pares clave-valor del objeto, necesitamos usar esta función con el bucle for-of.

El código de ejemplo de usar el for-of con Reflect.ownKeys para iterar el objeto es el siguiente.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Reflect.ownKeys(Cities)) {
  console.log(city, ':', cities[city]);
}

Resultado:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Usar el método forEach para hacer un bucle en el objeto de JavaScript

El método forEach funciona como un iterador para llamar al otro método secuencialmente. Pero podemos usar este método para iterar el objeto usando varias otras funciones que son las siguientes.

• Object.keys
• Reflect.ownKeys

Object.keys

Usando este método con el método forEach, podemos iterar los pares clave-valor de un objeto.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
Object.keys.forEach(city => {console.log(city, ':', Cities[city])})

Resultado:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Reflect.ownKeys

Usando este método con el método forEach, podemos iterar los pares clave-valor de un objeto.

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
Reflect.ownKeys.forEach(city => {console.log(city, ':', Cities[city])})

Resultado:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London