JavaScript for...in VS for...of boucle

Mehvish Ashiq 12 octobre 2023
  1. Utilisation de la boucle for..in en JavaScript
  2. Utilisation de la boucle for..of en JavaScript
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.

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

Article connexe - JavaScript Loop