Comment itérer ou boucler un objet JavaScript

1. Boucle à boucle à travers l’objet JavaScript
2. Utiliser la boucle for-of pour boucler l’objet JavaScript
3. Utilisez la méthode forEach pour boucler l’objet JavaScript

Cet article du tutoriel présente la façon dont nous pouvons itérer un objet JavaScript.

Il existe plusieurs instructions de bouclage, et voici une méthode utilisée pour itérer à travers un objet JavaScript.

• Boucle for-in
• Boucle for-of
• Méthode forEach

Boucle à boucle à travers l’objet JavaScript

L’instruction for-in est une boucle utilisée pour itérer l’objet JavaScript avec des paires clé-valeur. Cette boucle itére sur tous les éléments de l’objet JavaScript.

L’exemple de code d’utilisation de la boucle for-in pour boucler l’objet JavaScript est le suivant.

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

Production :

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

En utilisant la boucle for-in, nous n’avons pas besoin d’utiliser de fonction spéciale pour itérer ou boucler un objet.

Utiliser la boucle for-of pour boucler l’objet JavaScript

L’instruction for-of est également une boucle qui itére un objet itérable qui n’a pas de paires clé-valeur. Nous pouvons également utiliser cette boucle pour itérer l’objet JavaScript avec des paires clé-valeur mais avec certaines fonctions spéciales comme suit.

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

Object.getOwnPropertyNames

Cette méthode retourne un tableau de toutes les clés des paires clé-valeur stockées dans l’objet. Mais pour itérer toutes les paires clé-valeur de l’objet JavaScript, nous devons utiliser cette méthode avec une boucle for-of.

L’exemple de code d’utilisation de la boucle for-of avec Object.getOwnPropertyNames() pour itérer l’objet est le suivant.

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);
}

Production :

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

Object.entries

Cette méthode retourne le tableau de la paire clé-valeur de l’objet. Mais pour itérer une clé et une valeur, nous devons utiliser la boucle for-of avec cette méthode pour boucler l’objet JavaScript.

L’exemple de code d’utilisation de la boucle for-of avec Object.entries() pour itérer l’objet est le suivant.

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

Production :

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

Object.keys

Cette méthode retourne le tableau des clés de l’objet. Mais pour itérer les paires clé-valeur d’un objet, nous devons utiliser cette fonction avec la boucle for-of.

L’exemple de code d’utilisation de la boucle for-of avec Object.keys() pour itérer l’objet est le suivant.

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

Production :

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

Reflect.ownKeys

Cette méthode permet également de restituer les clés de l’objet. Mais pour itérer les paires clé-valeur de l’objet, nous devons utiliser cette fonction avec la boucle for-of.

L’exemple de code d’utilisation de la boucle for-of avec Reflect.ownKeys pour itérer l’objet est le suivant.

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

Production :

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

Utilisez la méthode forEach pour boucler l’objet JavaScript

La méthode forEach fonctionne comme un itérateur permettant d’appeler l’autre méthode de manière séquentielle. Mais nous pouvons utiliser cette méthode pour itérer l’objet en utilisant plusieurs autres fonctions qui sont les suivantes.

• Object.keys
• Reflect.ownKeys

Object.keys

En utilisant cette méthode avec la méthode forEach, nous pouvons itérer les paires clé-valeur d’un objet.

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

Production :

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

Reflect.ownKeys

En utilisant cette méthode avec la méthode forEach, nous pouvons itérer les paires clé-valeur d’un objet.

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

Production :

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