for...of

Resum

La instrucció for...of crea un bucle que itera sobre objectes iterables (incloent Array, Map, Set, l'objecte arguments, etcètera), tot invocant un bloc de codi amb les instruccions a executar per a cada valor de la propietat.

Sintaxi

for (variable of objecte)
  codi

variable

A cada iteració el valor d'una propietat diferent és asignat a variable.

objecte

L'objecte del qual s'iteren les propietats, que són iterables.

Exemples

Diferència entre for...of i for...in

El següent exemple mostra la diferència entre el bucle for...of i el bucle for...in. Mentre for...in itera sobre noms de propietats, for...of itera sobre els valors de les propietats:

let arr = [3, 5, 7];
arr.foo = "hola";

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

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

Ús de Array.prototype.forEach()

Per a aconseguir els mateixos valors que s'obtenen amb for...of també es pot utilitzar el mètode Array.prototype.forEach():

let arr = [3, 5, 7];
arr.foo = "hola";

arr.forEach(function (element, index) {
    console.log(element); // mostra "3", "5", "7"
    console.log(index);   // mostra "0", "1", "2"
});

// or with Object.keys()

Object.keys(arr).forEach(function (element, index) {
    console.log(arr[element]); // mostra "3", "5", "7", "hello"
    console.log(arr[index]);   // mostra "3", "5", "7"
});

Iteració de coleccions del DOM

Iterant sobre coleccions del DOM com NodeList: el següent exemple afegeix la classe read als paràgrafs que són descendens directes d'un article:

// Nota: Això només funcionarà en plataformes que
// implementen NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

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

Iteració de generadors:

Els generadors també són iterables:

function* fibonacci() { // una funció generadora
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // trunca la seqüència als 1000
    if (n > 1000)
        break;
    print(n);
}

Especificacions

Compatibilitat amb navegadors

[1] La característica està disponible sota una preferència. A chrome://flags/#enable-javascript-harmony, activar la entrada “Enable Experimental JavaScript”.

Vegeu també

• for each...in - una instrucció similar, però itera els valors de les propietats d'un objecte en comptes de les propietats mateixes de l'objecte (en desús).
• Array.prototype.forEach()