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
###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
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