Comprendre la différence entre les propriétés itérables et énumérables en JavaScript

Lorsque vous travaillez avec JavaScript, vous aurez souvent besoin de parcourir des collections de données. Deux méthodes courantes pour ce faire sont les boucles for-in et for-of. Cependant, ces boucles sont utilisées dans différents contextes et pour différents types de collections. Comprendre la distinction entre les propriétés itérables et énumérables est crucial pour utiliser efficacement ces boucles.

1. La boucle for-in : parcourt toutes les propriétés énumérables

La boucle for-in est conçue pour parcourir les propriétés énumérables d'un objet. Les propriétés énumérables sont celles qui sont visibles lors d'une boucle sur un objet ou de l'appel de méthodes comme Object.keys().

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

for (const key in obj) {
    console.log(key); // Outputs: name, age, isMarried
}

Dans cet exemple, la boucle for-in parcourt toutes les propriétés énumérables de l'objet obj, y compris la propriété isMarried ajoutée dynamiquement.

2. La boucle for-of : boucle sur tous les itérables

La boucle for-of, quant à elle, est utilisée pour parcourir des objets itérables. Un itérable est un objet qui possède une méthode Symbol.iterator. Les exemples courants d'objets itérables incluent les tableaux, les chaînes, les cartes et les ensembles.

const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

Ici, la boucle for-of parcourt le tableau arr, en ignorant la propriété anotherFruit car elle ne fait pas partie de la séquence itérable.

3. Les tableaux sont itérables, les objets ne sont pas itérables

Par défaut, les tableaux en JavaScript sont itérables car ils ont une méthode Symbol.iterator intégrée. Cependant, les objets simples n'ont pas cette méthode et ne sont donc pas itérables.

const arr = ['apple', 'pear'];

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

const obj = {
    name: 'john',
    age: '24'
};

for (const key of obj) {
    console.log(key); // Throws TypeError: obj is not iterable
}

Dans le code ci-dessus, tenter d'utiliser une boucle for-of sur un objet entraîne une TypeError car les objets n'implémentent pas la méthode Symbol.iterator.

4. Explication de l'erreur : TypeError : obj n'est pas itérable

Lorsque vous essayez d'utiliser une boucle for-of sur un objet non itérable, JavaScript renvoie une TypeError. Cette erreur se produit car l'objet n'a pas la méthode Symbol.iterator, qui est requise pour les boucles for-of.

const obj = {
    name: 'john',
    age: '24'
};

try {
    for (const key of obj) {
        console.log(key);
    }
} catch (e) {
    console.error(e); // Outputs: TypeError: obj is not iterable
}

Exemple de code

Vous trouverez ci-dessous un exemple complet qui démontre les différences entre les boucles for-in et for-of :

const log = console.log;
const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

log('Using for-of loop:');
for (const fruit of arr) {
    log(fruit); // Outputs: apple, pear
}

log('Using for-in loop:');
for (const fruit in arr) {
    log(fruit); // Outputs: 0, 1, anotherFruit
}

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

log('Using for-in loop:');
for (const key in obj) {
    log(key); // Outputs: name, age, isMarried
}

log('Using for-of loop:');
try {
    for (const key of obj) {
        log(key);
    }
} catch (e) {
    log(e); // Outputs: TypeError: obj is not iterable
}

Conclusion

Comprendre la différence entre les propriétés itérables et énumérables est essentiel pour utiliser efficacement les boucles for-in et for-of de JavaScript. La boucle for-in est utilisée pour itérer sur des propriétés énumérables d'objets, tandis que la boucle for-of est conçue pour itérer sur des objets itérables tels que des tableaux. Une mauvaise utilisation de ces boucles peut entraîner des erreurs, telles que la TypeError rencontrée lors de la tentative d'utilisation d'une boucle for-of sur un objet non itérable. En comprenant ces distinctions, vous pouvez écrire du code JavaScript plus robuste et sans erreur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!