--- title: for...of slug: Web/JavaScript/Reference/Statements/for...of translation_of: Web/JavaScript/Reference/Statements/for...of original_slug: Web/JavaScript/Referencia/Sentencies/for...of ---
{{jsSidebar("Statements")}}

Resum

La instrucció for...of crea un bucle que itera sobre objectes iterables (incloent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("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 {{jsxref("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 {{domxref("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
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}} {{Spec2('ES6')}} Definició inicial.

Compatibilitat amb navegadors

{{CompatibilityTable()}}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic {{CompatChrome(29)}}[1]
{{CompatChrome(38)}}		 {{CompatGeckoDesktop("13")}}
{{CompatGeckoDesktop("17")}} (.iterator)
{{CompatGeckoDesktop("27")}} ("@@iterator")
{{CompatGeckoDesktop("36")}} (Symbol.iterator)		 {{CompatNo}} 25 7.1
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic {{CompatUnknown}} {{CompatChrome(29)}}[1]
{{CompatChrome(38)}}		 {{CompatGeckoMobile("13")}}
{{CompatGeckoMobile("17")}} (.iterator)
{{CompatGeckoMobile("27")}} ("@@iterator")
{{CompatGeckoMobile("36")}} (Symbol.iterator)		 {{CompatUnknown}} {{CompatUnknown}} 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é