for...of

L'instruction for...of permet de créer une boucle qui parcourt un objet itérable (ce qui inclue les objets Array, Map, Set, l'objet arguments, etc.) et qui permet d'exécuter une instruction pour la valeur de chaque propriété.

Syntaxe

for (variable of objet)
  instruction

variable

À chaque itération, la valeur d'une propriété différente est affectée à variable.

objet

L'objet dont on parcourt les propriétés énumérables.

instruction

Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un bloc d'instructions.

Exemples

Les différences entre for...of et for...in

L'exemple qui suit illustre la différence entre une boucle for...of et une boucle for...in. for...in itère sur les noms des propriétés alors que for...of itère sur les valeurs des propriétés :

let arr = [3, 5, 7];
arr.toto = "coucou";

for (let i in arr) {
   console.log(i); // affiche "0", "1", "2", "toto"
}

for (let i of arr) {
   console.log(i); // affiche "3", "5", "7"
}

Utiliser Array.prototype.forEach()

Pour obtenir les mêmes valeurs qu'avec une boucle for...of, on peut utiliser la méthode Array.prototype.forEach() :

let arr = [3, 5, 7];
arr.toto = "coucou";

arr.forEach(function (élément, index) {
    console.log(élément); // affiche "3", "5", "7"
    console.log(index);   // affiche "0", "1", "2"
});

// ou avec Object.keys()

Object.keys(arr).forEach(function (élément, index) {
    console.log(arr[élément]); // affiche "3", "5", "7", "coucou"
    console.log(arr[index]);   // affiche "3", "5", "7", undefined
});

Parcourir des collections DOM

Il est possible de parcourir des collections DOM telles que NodeList. Dans cet exemple, on ajoute une classe read aux paragraphes qui sont des descendants directs d'un article :

// Note : Cela ne fonctionnera que pour les plates-formes
// qui implémentent NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

Itérer sur les générateurs

Grâce à cette instruction, on peut également itérer sur les générateurs :

function* fibonacci() { // une fonction génératrice
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // on arrête la séquence à 1000
    if (n > 1000)
        break;
    console.log(n);
}

Spécifications

Compatibilité des navigateurs

[1] Cette fonctionnalité est disponible grâce à une préférence utilisateur. Sous chrome://flags/#enable-javascript-harmony, activer le paramètre « Activer la fonctionnalité expérimentale JavaScript ».

[2] À partir de Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) et jusqu'à Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) la propriété iterator était utilisée (cf. bug 907077), de Gecko 27 à Gecko 35 la propriété "@@iterator" était utilisée. Avec Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), le symbole @@iterator a été implémenté (cf. bug 918828).

Voir aussi

• Array.prototype.forEach()