for..in
O for..in
itera sobre as propriedades enumeráveis de um objeto, desde que as chaves sejam strings (pois as chaves também pode ser Symbol
's).
Repare que isso vale para qualquer objeto, não somente arrays. Ex:
function forIn(obj) {
for (let i in obj) {
console.log(`${i} = ${obj[i]}`);
}
}
// testando com array
let x = [0, 1, 2];
x[Symbol('simbolo')] = 'symbol'; // chave não é string, não é mostrada no for..in
Object.defineProperty(x, 'no', { value: 10, enumerable: false }); // não-enumerável, não é mostrada no for..in
Object.defineProperty(x, 'yes', { value: 10, enumerable: true }); // enumerável, é mostrada no for..in
// definindo propriedades nos protótipos, todos os arrays a terão
Array.prototype.bla = 'bla';
Object.prototype.all = 'all';
console.log('iterando no array');
forIn(x); // mostra 0, 1, 2, "yes", "bla" e "all"
console.log(Object.entries(x)); // mostra 0, 1, 2 e "yes" (não mostra o "bla" nem o "all")
// testando com um objeto qualquer
let obj = {
a: 1,
[Symbol('c')]: 3 // símbolo, não é mostrada no for..in
};
Object.defineProperty(obj, 'b', { value: 2, enumerable: false }); // não-enumerável, não é mostrada no for..in
console.log('iterando no objeto');
forIn(obj); // mostra "a" e "all"
console.log(Object.entries(obj)); // mostra somente "a"
// testando com string
let s = 'a😀';
console.log('iterando na string');
forIn(s); // mostra o "all" (setado no prototype de Object) e 3 "caracteres"
console.log(Object.entries(s)); // não mostra o "all"
A outra resposta disse que fazer for (let i in x)
seria equivalente a percorrer os elementos de Object.entries(x)
, mas existe uma diferença: Object.entries
não traz as propriedades setadas no protótipo do objeto (como as propriedades "bla" e "all" do exemplo acima, que foram definidas respectivamente em Array.prototype
e Object.prototype
). Já o for..in
traz essas propriedades, então se você quisesse ignorá-las, teria que fazer algo do tipo:
for (let i in obj) {
if (obj.hasOwnProperty(i)) console.log(`${i} = ${obj[i]}`);
}
Aí sim o "bla" e "all" seriam ignorados.
No caso da string, é mais curioso ainda. Apesar dela só ter 2 "caracteres" (a letra "a" e o emoji), são retornados 4 propriedades: o "all" (herdado de Object.prototype
) e os 3 índices que correspondem aos seus "caracteres". Na verdade o emoji foi quebrado em 2 partes, conforme explicado aqui.
Outro detalhe importante, no caso de arrays, é que a documentação diz que não é garantido que os elementos sejam retornados na ordem dos seus índices numéricos (There is no guarantee that for...in
will return the indexes in any particular order). Testando no Chrome, vi que ele itera na ordem, mas isso pode não ocorrer em todas as implementações.
Outro caso em que dá diferença para um for
tradicional é quando criamos um "array esburacado":
let x = [];
x[5] = 5;
// imprime só o 5
for(let i in x) console.log(`${i} = ${x[i]}`);
// imprime 5 vezes "undefined" antes do 5
for(let i = 0; i < x.length; i++) console.log(`${i} = ${x[i]}`);
De qualquer forma, um ponto importante é que o for..in
funciona com qualquer objeto, iterando pelas propriedades enumeráveis do mesmo.
for..of
O for..of
, ao contrário do for..in
, não funciona com qualquer objeto, mas somente com aqueles que são iteráveis. Isso inclui strings, arrays, e objetos array-like (como por exemplo o NodeList
retornado por querySelectorAll
). A documentação também explica como criar seu próprio tipo iterável.
Ex:
function forOf(obj) {
for (let i of obj) {
console.log(i);
}
}
// testando com array
let x = [0, 1, 2];
x[Symbol('simbolo')] = 'symbol';
Object.defineProperty(x, 'no', { value: 10, enumerable: false });
Object.defineProperty(x, 'yes', { value: 10, enumerable: true });
// definindo propriedades nos protótipos, todos os arrays a terão
Array.prototype.bla = 'bla';
Object.prototype.all = 'all';
forOf(x); // mostra 0, 1, 2
// com uma string
let s = 'a😀';
forOf(s); // mostra o "a" e o emoji
// testando com um objeto qualquer
let obj = {
a: 1,
[Symbol('c')]: 3
};
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
forOf(obj); // TypeError: obj is not iterable
Repare que agora as propriedades "extras", sejam ela enumeráveis ou não, definidas no próprio objeto ou no protótipo, são todas ignoradas.
No caso do array, somente os elementos são mostrados, pois o iterador de um array foi definido para funcionar assim: começa do índice zero e vai incrementando, até chegar ao length
do array - por isso o caso abaixo dá diferença para um for..in
:
let x = [];
x[3] = 3;
x.bla = 'bla';
x.length = 5;
// imprime só o 3 e "bla"
console.log('for..in só pega as propriedades que existem');
for(let i in x) console.log(x[i]);
// imprime 3 vezes "undefined" antes do 3, depois outro "undefined"
console.log('for..of itera por todos os índices, até o length');
for(let i of x) console.log(i);
Repare no caso acima: for..in
só iterou pelas propriedades existentes (no caso, o "3" e "bla"). Já for..of
iterou pelos índices numéricos, começando do zero e indo até length - 1
(ou seja, tentou acessar os índices 0, 1 e 2, que como não existem, resultam em undefined
, depois acessou o índice 3, e depois tentou acessar o índice 4 - já que o length
é 5, então o loop vai até o índice 4 - que como não existe, também resulta em undefined
).
No caso da string, o emoji não é mais "quebrado" e é exibido corretamente, pois o iterador de String
garante este comportamento (ele itera sobre os code points da mesma - leia a pergunta já indicada acima para entender melhor).
E no caso do objeto, dá erro porque ele não é iterável (TypeError: obj is not iterable). Para que funcionasse com o mesmo, eu teria que definir um iterador para ele. Algo assim:
let obj = {
a: 10, b: 20
};
// iterador: retorna os valores das propriedades deste objeto
obj[Symbol.iterator] = function* () {
for (let p in this) yield this[p];
};
for (let i of obj) console.log(i); // imprime 10 e 20
No caso, eu usei for..in
internamente para iterar pelas propriedades, e fiz o iterador retornar o respectivo valor da propriedade (mas eu poderia ter usado qualquer outra lógica interna para retornar os valores que eu quisesse, retornando inclusive valores que não necessariamente estão relacionados com as propriedades do objeto). Desta forma é possível iterar neste objeto com for..of
.
No caso dos objetos nativos que podem ser iterados com for..of
(como arrays e strings), eles internamente já implementam seu próprio iterador. Para os demais, basta seguir a documentação, que dá instruções para deixar seus objetos de acordo com os protocolos de iteração.
forEach
Ao contrário de for..in
e for..of
, que são construções da linguagem, forEach
é um método do Array
(embora não seja exclusivo deste, pois vários outros tipos também possuem um método similar, como Set
, NodeList
, etc).
Uma coisa que todos têm em comum é que você deve passar uma função de callback que é chamada para cada um dos elementos sendo percorridos. Por exemplo, no caso de arrays, ele itera pelos índices numéricos do mesmo, e no callback você passa o elemento e o respectivo índice:
let x = ['a', 'b', 'c'];
x.forEach(function (elemento, indice) { // imprime os índices e os respectivos elementos
console.log(`x[${indice}] = ${elemento}`);
});
A forma como ele funciona varia conforme o tipo. No caso de arrays, ele percorre os índices numéricos, até atingir o length
do mesmo, mas ao contrário de for..of
, o forEach
verifica se o índice existe (veja o algoritmo na especificação). Daí que podemos ter situações como essa:
let x = [];
x[2] = 2;
x.forEach(function (elemento, indice) { // imprime somente o 2 (os índices 0 e 1 não existem)
console.log(`x[${indice}] = ${elemento}`);
});
x[5] = 5;
x.forEach(function (elemento, indice) { // imprime somente o 2 e o 5 (os outros índices não existem)
console.log(`x[${indice}] = ${elemento}`);
});
Já outros tipos podem implementar o forEach
de maneira diferente. Por exemplo, um Set
não define chaves, então os seus valores acabam sendo as próprias "chaves". Em um Map
o forEach
também itera pelas chaves não numéricas, etc. Cada tipo implementa o seu forEach
de acordo com o que faz sentido para o seu propósito.