Comprendre l'itération d'objet en JavaScript : `for...of` vs `for...in`-js tutoriel-php.cn

Understanding Object Iteration in JavaScript: `for...of` vs `for...in`

Itérer sur des objets est une tâche courante en JavaScript, mais connaître la technique correcte pour chaque situation peut rendre votre code plus propre et plus efficace. Cet article explique pourquoi vous ne pouvez pas utiliser for...of directement avec des objets, propose des approches alternatives et fournit les meilleures pratiques pour itérer sur les objets.

Table des matières

Introduction à l'itération en JavaScript
Pourquoi for...of ne fonctionne pas avec les objets
Techniques pour itérer sur des objets
- Utiliser pour...dans
- Utilisation d'Object.keys()
- Utilisation d'Object.values()
- Utilisation d'Object.entries()
Comparaison des techniques d'itération d'objets
Comparaison entre pour...dans et pour...de
Exemple avancé : itération sur des objets imbriqués
Meilleures pratiques pour l'itération d'objets en JavaScript

1. Introduction à l'itération en JavaScript

En JavaScript, l'itération sur les structures de données est une partie essentielle de la gestion d'ensembles de données complexes. Alors que les tableaux et les chaînes sont des objets itérables, les objets simples (paires clé-valeur) nécessitent des méthodes différentes pour l'itération. Lorsque les développeurs tentent d'utiliser for...of sur des objets, ils rencontrent souvent des problèmes.

2. Pourquoi for...of ne fonctionne pas avec les objets

La boucle for...of est utilisée pour parcourir des objets itérables comme des tableaux, des chaînes, des cartes et des ensembles. Cependant, les objets JavaScript simples ne sont pas itérables par défaut.

Exemple : Essayer de... de avec un objet

const user = { name: 'John', age: 30 };

for (const value of user) {
  console.log(value);
}
// TypeError: user is not iterable

Copier après la connexion

Tenter d'utiliser for...of sur un objet simple génère une TypeError. Cela se produit parce que les objets en JavaScript n'ont pas de méthode [Symbol.iterator], qui est requise pour la boucle for...of.

3. Techniques d'itération sur des objets

Pour parcourir des objets en JavaScript, plusieurs techniques sont disponibles :

3.1 Utiliser pour...dans

La boucle for...in parcourt les propriétés énumérables d'un objet. Il parcourt les clés de l'objet.

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30

Copier après la connexion

Avantages : Simple et direct.
Inconvénients : itère sur les propriétés héritées si elles sont énumérables, ce qui peut provoquer un comportement inattendu.

3.2 Utilisation d'Object.keys()

Object.keys() renvoie un tableau des propres clés de propriété de l'objet, vous permettant d'utiliser for...of pour les parcourir.

const user = { name: 'John', age: 30 };

for (const key of Object.keys(user)) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30

Copier après la connexion

Avantages : itère uniquement sur les propres propriétés de l'objet.
Inconvénients : Récupère uniquement les clés, pas les valeurs.

3.3 Utilisation d'Object.values()

Object.values() renvoie un tableau des valeurs de propriété de l'objet, qui peut ensuite être itéré avec for...of.

const user = { name: 'John', age: 30 };

for (const value of Object.values(user)) {
  console.log(value);
}
// Output: 
// John
// 30

Copier après la connexion

Avantages : Accès direct aux valeurs sans gérer les clés.
Inconvénients : Impossible d'accéder directement aux clés.

3.4 Utilisation d'Object.entries()

Object.entries() renvoie un tableau des paires clé-valeur de l'objet, ce qui le rend parfait pour itérer sur les clés et les valeurs.

const user = { name: 'John', age: 30 };

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// Output: 
// name John
// age 30

Copier après la connexion

Avantages : Accès facile aux clés et aux valeurs en une seule itération.
Inconvénients : Syntaxe légèrement plus complexe.

4. Comparaison des techniques d'itération d'objets

Technique	Access to Keys	Access to Values	Inherited Properties	Simplicity
for...in	Yes	Yes	Yes (if enumerable)	Simple
Object.keys() for...of	Yes	No	No	Moderate
Object.values() for...of	No	Yes	No	Moderate
Object.entries() for...of	Yes	Yes	No	Slightly complex

Technique Accès aux clés Accès aux valeurs Propriétés héritées Simplicité ête> pour...dans Oui Oui Oui (si dénombrable) Simple Object.keys() pour...de Oui Non Non Modéré Object.values() pour...de Non Oui Non Modéré Object.entries() pour...de Oui Oui Non Légèrement complexe

5. Comparison Between for...in and for...of

5.1 for...in Loop

The for...in loop is used to iterate over the enumerable properties (keys) of an object, including properties that may be inherited through the prototype chain.

Example: for...in with an Object

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output:
// name John
// age 30

Copier après la connexion

Explanation: The for...in loop iterates over the keys (name and age) and allows you to access the corresponding values (John and 30).

Example: for...in with an Array (Not Recommended)

const colors = ['red', 'green', 'blue'];

for (const index in colors) {
  console.log(index, colors[index]);
}
// Output:
// 0 red
// 1 green
// 2 blue

Copier après la connexion

Explanation: The for...in loop iterates over the indices (0, 1, 2) of the array, not the values themselves. This behavior is usually less desirable when working with arrays.

5.2 for...of Loop

The for...of loop is used to iterate over iterable objects like arrays, strings, maps, sets, and other iterables. It loops over the values of the iterable.

Example: for...of with an Array

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// Output:
// red
// green
// blue

Copier après la connexion

Explanation: The for...of loop directly iterates over the values of the array (red, green, blue), which is ideal for array iteration.

Example: for...of with a String

const name = 'John';

for (const char of name) {
  console.log(char);
}
// Output:
// J
// o
// h
// n

Copier après la connexion

Explanation: The for...of loop iterates over each character of the string (J, o, h, n), making it useful for string manipulation.

Summary: Key Differences Between for...in and for...of

Feature	for...in	for...of
Purpose	Iterates over object keys (including inherited properties)	Iterates over iterable values (arrays, strings, etc.)
Works with Objects	Yes	No (objects are not iterable)
Works with Arrays	Yes, but not ideal (returns indices)	Yes, ideal (returns values)
Use Case	Best for iterating over object properties	Best for arrays, strings, maps, sets, etc.

6. Advanced Example: Iterating Over Nested Objects

Sometimes, objects are nested, and you need to iterate through all levels of the object. Here's an example that uses recursion to handle nested objects.

const user = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: 10001
  }
};

// Recursively iterate through the object
function iterate(obj) {
  for (const [key, value] of Object.entries(obj)) {
    if (typeof value === 'object' && !Array.isArray(value)) {
      console.log(`Entering nested object: ${key}`);
      iterate(value); // Recursively call for nested objects
    } else {
      console.log(key, value); // Output key-value pair
    }
  }
}

iterate(user);
// Output: 
// name John
// age 30
// Entering nested object: address
// city New York
// zip 10001

Copier après la connexion