JavaScript "pour ... de" boucle


Exemple

6
const iterable = [0, 1, 2];
for (let i of iterable) {
    console.log(i);
}

Production attendue:

0
1
2

Les avantages du for ... of loop sont:

  • Ceci est la syntaxe directe la plus concise pour les éléments de tableau
  • Il évite tous les pièges de pour ... en
  • Contrairement à forEach() , il fonctionne avec break, continue et return

Support de pour ... de dans d'autres collections

Cordes

for ... of traitera une chaîne comme une séquence de caractères Unicode:

const string = "abc";
for (let chr of string) {
  console.log(chr);
}

Production attendue:

a b c

Ensembles

pour ... de travaux sur des objets Set .

Note :

const names = ['bob', 'alejandro', 'zandra', 'anna', 'bob'];

const uniqueNames = new Set(names);

for (let name of uniqueNames) {
  console.log(name);
}

Production attendue:

bob
alejandro
Zandra
anna

Plans

Vous pouvez aussi utiliser pour ... des boucles pour parcourir la carte s. Cela fonctionne de manière similaire aux tableaux et aux ensembles, sauf que la variable d'itération stocke à la fois une clé et une valeur.

const map = new Map()
  .set('abc', 1)
  .set('def', 2)

for (const iteration of map) {
  console.log(iteration) //will log ['abc', 1] and then ['def', 2]
}

Vous pouvez utiliser une affectation de déstructuration pour capturer la clé et la valeur séparément:

const map = new Map()
  .set('abc', 1)
  .set('def', 2)

for (const [key, value] of map) {
  console.log(key + ' is mapped to ' + value)
}
/*Logs:
  abc is mapped to 1
  def is mapped to 2
*/

Objets

car ... des boucles ne fonctionnent pas directement sur des objets simples; mais, il est possible d'itérer sur les propriétés d'un objet en basculant vers une boucle for ... in ou en utilisant Object.keys() :

const someObject = { name: 'Mike' };

for (let key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

Production attendue:

nom: Mike