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

Циклы for...in и for...of в JavaScript используются для перебора коллекций данных, но они предназначены для разных типов объектов и имеют разные особенности. Давайте разберем их подробно.

Цикл for...in

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

Пример использования for...in:

const obj = {
    name: 'Alice',
    age: 30,
    city: 'New York'
};

for (let key in obj) {
    console.log(`${key}: ${obj[key]}`);
}

Вывод:

name: Alice
age: 30
city: New York

Ключевые моменты:

• Перебирает перечисляемые свойства объекта.
• Включает унаследованные свойства из прототипов.
• Подходит для работы с объектами, но не рекомендуется для массивов.

Распространенные ошибки:

• Использование for...in на массивах может привести к неожиданным результатам, так как он может перебрать и свойства, добавленные в массив через прототип.

Цикл for...of

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

Пример использования for...of:

const array = [10, 20, 30];

for (let value of array) {
    console.log(value);
}

Вывод:

10
20
30

Ключевые моменты:

• Перебирает значения итерируемых объектов.
• Не включает унаследованные свойства, так как работает только с собственными значениями.
• Идеально подходит для массивов и других коллекций.

Распространенные ошибки:

• Попытка использовать for...of на неитерируемых объектах, таких как обычные объекты, вызовет ошибку.

Сравнение

1. Тип объекта:

   • for...in — используется для объектов.
   • for...of — используется для итерируемых объектов.

2. Перебор:

   • for...in — перебирает ключи (свойства) объекта.
   • for...of — перебирает значения.

3. Унаследованные свойства:

   • for...in — включает унаследованные свойства.
   • for...of — работает только с собственными значениями.

4. Использование:

   • for...in не рекомендуется использовать для массивов.
   • for...of идеально подходит для массивов и других коллекций.

Практические советы

• Используйте for...in только для объектов, когда вам нужно перебрать их свойства.
• Используйте for...of для массивов и других итерируемых объектов, чтобы избежать путаницы с ключами и значениями.
• Для безопасного перебора свойств объекта можно использовать метод hasOwnProperty для фильтрации унаследованных свойств в цикле for...in.

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