20

Estava dando uma olhada nessa pergunta do SOEN e lá vi esse for..of.

Nunca tinha visto isso antes no Javascript.

Esse é um recurso novo e já podemos implementá-lo confiavelmente, ou ainda devemos utilizar o velho for..in?

Qual é a diferença dele em relaçao ao for..in?

3 Respostas 3

16

O for..of é uma construção nova no EcmaScript 6, e portanto só deve ser usada quando os browsers derem suporte apropriado a essa versão, e a habilitem por padrão. Do contrário, seu código pode ser rejeitado por uma parcela significativa de seus usuários.

O for..of é semelhante ao for..in, exceto que ele apenas itera sobre as propriedades enumeráveis do objeto/array. Um for..in iteraria sobre todas elas, inclusive propriedades customizadas acrescentadas pelo usuário:

function log(x) { document.body.innerHTML += "<pre>" + x + "<pre>"; }

var arr = [1,2,3];
arr.foo = "bar";

var obj = { 0:1, 1:2, 2:3, length:3, foo:"bar" };

var obj2 = Object.create(null, {
  0: { value:1, enumerable:true },
  1: { value:2, enumerable:true },
  2: { value:3, enumerable:true },
  length: { value:3 },
  foo:{ value:"bar" }
});

document.body.innerHTML += "<h1>for..in</h1>";

for ( var p in arr ) {
  log("arr[" + p + "] = " + arr[p]);
}
for ( var p in obj ) {
  log("obj[" + p + "] = " + obj[p]);
}
for ( var p in obj2 ) {
  log("obj2[" + p + "] = " + obj2[p]);
}
      
document.body.innerHTML += "<h1>for..of (simulação)</h1>";
      
arr.forEach(function(e, i) {
  log("arr[" + i + "] = " + e);
});
arr.forEach.call(obj, function(e, i) {
  log("obj[" + i + "] = " + e);
});
arr.forEach.call(obj2, function(e, i) {
  log("obj2[" + i + "] = " + e);
});

No exemplo acima, usei o Array.prototype.forEach para simular um for..of - já que do contrário o exemplo não compilaria em todos os browsers, e segundo a MDN o comportamento de ambos deve ser o mesmo. Cabe notar também que o for..of se aplica tanto a arrays quanto a "array-likes", de modo que pode ser usado inclusive em uma lista de nós DOM (retornados por document.querySelectorAll por exemplo).

P.S. Como apontado nas demais respostas, também há a diferença de que a variável usada no for..in recebe o nome da propriedade, enquanto no for..of ela recebe seu valor:

for ( var p in [1,2,3] ) // p será "0", "1", "2"

for ( var p of [1,2,3] ) // p será 1, 2, 3

A consequência disso é que, até onde eu saiba, se você quer fazer referência também ao índice continua sendo necessário usar forEach (mas como na prática normalmente só nos interessamos pelo valor, ainda é uma construção muito útil).

11

A diferença principal é que enquanto o for..in itera sobre o nome das propriedades do objeto, o for..of itera sobre os valores dessas propriedades. Por exemplo:

var arr = ["gato", "cachorro", "macaco"];
for (var i in arr) {
    console.log(i); // Imprime "0", "1", "2"
}

for (var i of arr) {
    console.log(i); // Imprime "gato", "cachorro", "macaco"
}

Observe que para arrays, o for..of é equivalente ao forEach que você pode usar do protótipo do Array:

arr.forEach(function(i) {
    console.log(i); // Imprime "gato", "cachorro", "macaco"
});

Note que essa feature ainda é experimental, e nem todos os navegadores a suportam - então não é aconselhável usá-la.

Mais detalhes: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

1
  • 3
    Quase o mesmo texto, com 10s de diferença hehehe. Boa resposta!
    – Caputo
    Commented 2/10/2015 às 16:28
6

Aparentemente o for .. of cria um loop para interagir com os valores de objetos iteráveis (Arrays, Sets, Maps) segundo a documentação da MDN, enquanto o for .. in interage sobre as propriedades de objetos

em relação ao for...in, na página da MDN descreve

for...of - a similar statement that iterates over the property values
for...of - uma sentença similar que interage com os valores das propriedades

Exemplo

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"
}

O for...in registrou os índices do array e a propriedade foo

O for...of registrou os valores de cada um dos índices do array que é um objeto interável

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .