JavaScript for...in VS for...of boucle
Cet article compare les boucles for..in et for..of en JavaScript. Il identifie la différence entre eux et montre où nous pouvons les utiliser.
for..in boucle sur les propriétés d’un objet. Il renvoie une clé à chaque itération qui peut être utilisée pour obtenir la valeur de cette clé particulière. Le for..of crée une boucle sur les valeurs d’un objet itérable comprenant les éléments intégrés Map, Array, Set, String et TypedArray.
Les deux ont une variable et un iterable. Pour les deux, la variable peut être const, let ou var. Dans for..of, le iterable est un objet dont les propriétés itérables sont itérées alors que le iterable de for..in est un objet lui-même.
Utilisation de la boucle for..in en JavaScript
const person = {
firstname: 'Delft',
lastname: 'Stack',
age: 30,
email: 'Delft.Stack@gmail.com'
};
for (const prop in person) console.log(`${prop}: ${person[prop]}`)
Production :
"firstname: Delft"
"lastname: Stack"
"age: 30"
"email: Delft.Stack@gmail.com"
Dans le code donné ci-dessus, for..in boucle sur les propriétés d’un objet nommé person. Entraînons-nous à utiliser le for..in en itérant sur ses propriétés.
Voir l’exemple de code ci-dessous.
const person = {
firstname: 'Delft',
lastname: 'Stack',
age: 30,
email: 'Delft.Stack@gmail.com'
};
function email() {
this.email = 'maofficial@gmail.com';
}
email.prototype = person;
var obj = new email();
for (const prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(`obj.${prop} = ${obj[prop]}`);
}
}
Production :
obj.email = maofficial@gmail.com
Le code ci-dessus utilise la boucle for..in pour vérifier si l’objet possède une propriété particulière ou non en utilisant .hasOwnProperty(). Le .hasOwnProperty() renvoie true si la propriété spécifiée est vraiment sa propre propriété.
Utilisation de la boucle for..of en JavaScript
Commençons à pratiquer la boucle for..of avec un tableau.
const array = ['apple', 'banana', 'orange'];
for (const value of array) {
console.log(value);
}
Production :
apple
banana
orange
Dans le code suivant, le iterable est une chaîne.
const name = 'Delft';
for (const value of name) {
console.log(value);
}
Production :
M
e
h
v
i
s
h
L’instance de code suivante présente l’utilisation du for..of avec Map.
const personMap =
new Map([['firstname', 'Delft'], ['lastname', 'Stack'], ['age', 30]]);
for (const entry of personMap) {
console.log(entry);
}
Production :
[ 'firstname', 'Delft' ]
[ 'lastname', 'Stack' ]
[ 'age', 30 ]
Pratiquons le for..of en utilisant un objet qui implémente explicitement le protocole iterable.
const userDefinedfunctions = {
[Symbol.iterator]() {
return {
num: 0,
next() {
if (this.num < 10) {
return {value: this.num++, done: false};
}
return {value: undefined, done: true};
}
};
}
};
for (const value of userDefinedfunctions) console.log(value);
Production :
0
1
2
3
4
5
6
7
8
9
Symbol.iterator est utilisé comme itérateur par défaut pour l’objet. Ce symbole est utilisé par la boucle for-of où nous avons le iterable dont les propriétés itérables sont itérées.
