for...of

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 (en-US): 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! (en-US)

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 鈥淓nable Experimental JavaScript鈥.

Vegeu tamb茅