В чем разница между циклами for...in и for...of?

Цикл for...in итерирует по ключам (свойствам) перечисляемых свойств объекта, включая свойства его прототипа по цепочке.

Цикл for...of итерирует по значениям итерируемых объектов (Array, Map, Set, String, arguments и т.д.). Он не итерирует по свойствам прототипа.

Пример for...in:

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // Выведет: "a 1", "b 2"
}

Пример for...of:

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // Выведет: 1, 2, 3
}

В общем случае, для перебора массивов и подобных структур предпочтительнее использовать for...of, а для перебора свойств объектов - for...in (часто в сочетании с hasOwnProperty для исключения свойств прототипа).