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

Основное различие между for...in и for...of

Цикл for...in предназначен для перебора перечисляемых свойств объекта, включая унаследованные через цепочку прототипов. Он возвращает ключи (имена свойств) в виде строк. Цикл for...of работает только с итерируемыми объектами (те, у которых есть метод Symbol.iterator), такими как массивы, строки, Map, Set, и возвращает значения элементов.

Примеры использования

Рассмотрим объект и массив:

const obj = { a: 1, b: 2, c: 3 };
const arr = [10, 20, 30];

// for...in для объекта
for (let key in obj) {
  console.log(key); // 'a', 'b', 'c'
}

// for...in для массива (не рекомендуется)
for (let index in arr) {
  console.log(index); // '0', '1', '2' (строки)
}

// for...of для массива
for (let value of arr) {
  console.log(value); // 10, 20, 30
}

// for...of для строки
for (let char of 'hello') {
  console.log(char); // 'h', 'e', 'l', 'l', 'o'
}

Когда что применять

• for...in — для перебора свойств объекта, когда нужны ключи. Избегайте для массивов, так как он может захватить унаследованные свойства (например, если расширить прототип Array).
• for...of — для перебора значений массивов, строк, Map, Set и других итерируемых структур. Это более безопасный и читаемый способ для работы с коллекциями.

Вывод: используйте for...in для объектов, когда важны ключи, и for...of для массивов и итерируемых объектов, когда нужны значения. Это повышает ясность кода и избегает неожиданных ошибок.