Отличие for...of от for...in в javascript

Оба оператора, и for...in и for...of производят обход объектов. Разница лишь в том, как они это делают.

for...of

Оператор for...of выполняет обход по элементам коллекций (иначе говоря, итерируемых объектов, например, Array, Map, Set, String, arguments, DOM коллекций и т.д.), вызывая на каждом шаге итерации значение, а не ключ.

Оператор for...of для массивов работает аналогично forEach, но имеет преимущества: возможность использовать continue и break для контроля итераций, что невозможно в forEach.

Обход массива

let arr = [10, 20, 30];

for (let value of arr) {
  value += 1;
  console.log(value);
}
// 11 21 31

Обход строки

let str = 'cold';

for (let value of str) {
  console.log(value);
}
// "c" "o" "l" "d"

Обход Map

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let entry of iterable) {
    console.log(entry);
}
// ['a', 1] ['b', 2] ['c', 3]

for (let [key, value] of iterable) {
    console.log(value);
}
// 1 2 3

for...in

Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу, вызывая на каждом шаге ключ. Цикл for...in проходит по свойствам в произвольном порядке, поэтому его не следует использовать для Array.

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log(obj[prop]);
}

// 1 2 3