This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

Resum

La instrucció for...of crea un bucle que itera sobre objectes iterables (incloent ArrayMap, 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

Especificació Estat Comentari
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'for...of statement' in that specification.
Standard Definició inicial.

Compatibilitat amb navegadors

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 29[1]
38
13 (13)
17 (17) (.iterator)
27 (27) ("@@iterator")
36 (36) (Symbol.iterator)
No support 25 7.1
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic ? 29[1]
38
13.0 (13)
17.0 (17) (.iterator)
27.0 (27) ("@@iterator")
36.0 (36) (Symbol.iterator)
? ? iOS 8

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

Vegeu també

Document Tags and Contributors

 Contributors to this page: fscholz, enTropy
 Last updated by: fscholz,