Passear através de um objecto JavaScript

1. Loop for-in para fazer um loop através do objeto JavaScript
2. Utilizar o laço for-of para fazer um laço através do objecto JavaScript
3. Utilizar o método forEach para fazer loop através do objecto JavaScript

Este artigo tutorial irá introduzir como podemos iterar um objecto JavaScript.

Existem várias declarações em loop, e um método utilizado para iterar através de um objecto JavaScript é o seguinte.

• loop for-in
• loop for-of
• método forEach

Loop for-in para fazer um loop através do objeto JavaScript

A declaração for-in é um laço utilizado para iterar o objecto JavaScript com pares de valores chave. Este laço itera sobre todos os elementos do objecto JavaScript.

O código de exemplo da utilização do laço for-in para fazer um laço através do objecto JavaScript é o seguinte.

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

Ao utilizar o laço for-in, não temos de utilizar nenhuma função especial para iterar ou fazer um laço a um objecto.

Utilizar o laço for-of para fazer um laço através do objecto JavaScript

A declaração for-of é também um laço que itera um objecto iterável que não tem pares de valores chave. Também podemos utilizar este laço para iterar o objecto JavaScript com pares de valores-chave, mas com algumas funções especiais, como se segue.

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

Object.getOwnPropertyNames

Este método retorna um array de todas as chaves dos pares chave-valor armazenadas no objecto. Mas para iterar todos os pares de chaves de valor do objecto JavaScript, precisamos de utilizar este método com um laço for-of.

O código de exemplo de utilização do for-of com Object.getOwnPropertyNames() para iterar o objecto é o seguinte.

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 devolve a matriz do par do valor chave do objecto. Mas para iterar uma chave e um valor, precisamos de utilizar o for-of loop com este método para fazer loop através do objecto JavaScript.

O código de exemplo de utilização do for-of com Object.entries() para iterar o objecto é o seguinte.

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 devolve a matriz das chaves do objecto. Mas para iterar os pares chave-valor de um objecto, precisamos de utilizar esta função com o for-of loop.

O código de exemplo de utilização do for-of com Object.keys() para iterar o objecto é o seguinte.

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 também devolve as chaves do objecto. Mas para iterar os pares chave-valor do objecto, precisamos de utilizar esta função com o for-of loop.

O código de exemplo de utilização do for-of com Reflect.ownKeys para iterar o objecto é o seguinte.

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

Utilizar o método forEach para fazer loop através do objecto JavaScript

O método forEach funciona como um iterador para chamar o outro método sequencialmente. Mas podemos utilizar este método para iterar o objecto, utilizando várias outras funções que são as seguintes.

• Object.keys
• Reflect.ownKeys

Object.keys

Utilizando este método com o método forEach, podemos iterar os pares de valores chave de um objecto.

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

Utilizando este método com o método forEach, podemos iterar os pares de valores chave de um objecto.

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