Nesse artigo vou te mostrar qual a diferença e como usar os loops do javascript (for ... in, for ... of e forEach).
For ... In
For...in é usado para iterar todas as propriedades enumeráveis de um objeto, incluindo propriedades enumeráveis herdadas. Essa instrução de iteração pode ser usada com strings de arrays ou objetos simples, mas não com objetos Map ou Set.
Exemplo
for (let item in ['a', 'b', 'c']){
console.log(item);
// 0, 1, 2 (indices do array )
};
for (let string in 'string'){
console.log(string);
// 0, 1, 2, 3, 4, 5 (indices da palavra "string")
};
for (let obj in {a: 1, b: 2, c: 3}){
console.log(obj);
// a, b, c (nome dos objetos de cada propriedade)
};
for (let array in new Set(['a', 'b', 'a', 'd'])){
console.log(array);
// undefined (sem propriedades enumeraveis)
};
For ... of
for...of é usado para iterar sobre arrays, iterando sobre seus valores em vez de suas propriedades. Essa instrução de iteração pode ser usada com matrizes, strings Map ou Set, mas não com objetos simples.
Exemplo
for (let value of ['a', 'b', 'c', 'd']){
console.log(value);
// a, b, c, d (valores do array)
};
for (let value of 'string'){
console.log(value);
// s, t, r, i, n, g (Caracteres da palavra "string")
};
for (let value of { a: 1, b: 2, c: 3 }){
console.log(value);
// TypeError (Não é iteravel)
}
for (let value of new Set(['a', 'b', 'a', 'd'])){
console.log(value);
// a, b, d (Valores definidos, não retornando valores repetidos)
};
ForEach
forEach() é um método do Array protótipo, que permite iterar sobre os elementos de um array. EmboraforEach() apenas itere em arrays, ele pode acessar o valor e o índice de cada elemento durante a iteração.
Exemplo
const array = ['a', 'b', 'c'];
array.forEach(
(value, index) => console.log(value)
// a, b, c (Valores do array)
);
array.forEach(
(value, index) => console.log(index)
// 0, 1, 2 (Indices do array)
);
