for...of

O loop for...of percorre objetos iterativos (incluindo Array, Map, Set, objetos-argumentos e assim por diante), chamando uma função personalizada com instruções a serem executadas para o valor de cada objeto distinto.

Sintaxe

for (variavel of objeto) {
  declaração
}

variável

A cada iteração, um valor de uma propriedade diferente é atribuido à variável.

objeto

Objeto cujos atributos serão iterados.

Exemplos

Diferença entre for...of e for...in

O exemplo a seguir mostra a diferença entre os laços de repetição for...of e for...in. Enquanto for...in percorre os nomes dos atributos, for...of percorre os valores destes atributos:

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

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

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

Usando Array.prototype.forEach()

Para obter os mesmos valores das propriedades que  o laço for...of loop retornaria, é possivel usar também o método Array.prototype.forEach():

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

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

// ou com Object.keys()

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

Percorrendo coleções DOM

Percorrendo coleções DOM como NodeList: o exemplo a seguir adiciona a classe read aos parágrafos que são descendentes diretos de uma tag article:

// Nota: Isso funcionará apenas em plataformas que 
// implementam NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

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

Iterando generators

Você também pode percorrer generators:

function* fibonacci() { // uma função generator
    let [prev, curr] = [0, 1];
    while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    console.log(n);
    // limita a sequencia à 1000
    if (n >= 1000) {
        break;
    }
}

Especificações

Compatibilidade dos navegadores

[1] Do Chrome 29 ao Chrome 37 essa funcionalidade estava disponível através de uma configuração. Em chrome://flags/#enable-javascript-harmony, habilite a função “Enable Experimental JavaScript”.

[2] Do Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) ao Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) a propriedade iterator era usada (bug 907077), e do Gecko 27 ao Gecko 35 o placeholder "@@iterator" era usado. No Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), o símbolo @@iterator foi implementada (bug 918828).

Consulte também

• for each...in - uma declaração similar, mas que itera entre os valores dos atributos de um objeto, ao invés dos seus nomes (obsoleto).
• Array.prototype.forEach()