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).