O loop for...of percorre objetos iterativos (incluindo ArrayMap, Set, o objeto arguments 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 iteravel) {
  declaração
}
variável
A cada iteração, um valor de uma propriedade diferente é atribuido à variável.
iteravel
Objeto cujos atributos serão iterados.

Exemplos

Iterando sobre um Array

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

Ao invés de let, você pode usar const se você não for modificar a variável dentro do bloco.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

Iterando sobre uma String

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

Iterando sobre uma TypedArray

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

Iterando sobre um Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Iterando sobre um Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Iterando sobre um objeto arguments

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1,2,3);

// 1
// 2
// 3

Iterando sobre uma coleção do DOM

Iterar sobre uma coleção do DOM como NodeList: o seguinte exemplo adiciona uma classe read aos parágrafos que são descendentes diretos de uma tag article:

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

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

Iterando sobre generators

Você pode também iterar sobre generators:

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

for (let n of fibonacci()) {
  console.log(n);
  // Trunca a sequência em 1000
  if (n >= 1000) {
    break;
  }
}

Não reuse generators

Generators não devem ser re-usados, mesmo se o loop for...of for terminado precocemente, por exemplo através da palavra-chave break. Enquanto em um loop ativo, o generator é fechado e tentar iterar novamente sobre ele não produz (yield) nenhum resultado adicional. O Firefox ainda não implementou este comportamento (o generator pode ser reutilizado, violando o padrão do ES2015 (13.7.5.13, step 5m), mas isso irá mudar uma ve que o bug 1147371 for resolvido.

var gen = (function *(){
  yield 1;
  yield 2;
  yield 3;
})();
for (let o of gen) {
  console.log(o);
  break;  // Closes iterator
}

// O generator não deve ser reutilizado, o código a seguir não
// faz sentido!
for (let o of gen) {
  console.log(o); // Nunca será chamado.
}

Iterando sobre outros objetos iteráveis

Você pode também iterar sobre um objeto que implementa explicitamente um protocolo iterável protocol:

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (var value of iterable) {
  console.log(value);
}
// 0
// 1
// 2

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

O loop for...in irá iterar sobre todas as propriedades enumeráveis de um objeto.

A sintaxe do for...of é específica para coleções, ao invés de todos os objetos. Ela irá iterar desta maneira sobre os elementos de qualquer coleção que tiver uma propriedade [Symbol.iterator].

O exemplo a seguir mostra a diferença entre um loop for...of e um loop for...in.

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

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

for (let i in iterable) {
  console.log(i); // escreve 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // escreve 3, 5, 7
}

Especificações

Especificação Status Comentário
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'for...of statement' in that specification.
Padrão Definition Inicial.
ECMAScript Latest Draft (ECMA-262)
The definition of 'for...of statement' in that specification.
Rascunho  

Compatibilidade dos navegadores

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!

Funcionalidade Chrome Firefox (Gecko) Edge Opera Safari
Funções básicas 38 [1] 13 (13) [2] 12 25 7.1
Funcionalidade Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Funções básicas ? 38 [1] 13.0 (13) [2] ? ? 8

[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

Etiquetas do documento e colaboradores

 Última atualização por: malukenho,