С чем работает for..of

Вопрос

С чем работает for..of

Профессия

Frontend Developer

Что хочет услышать интервьюер

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

Ключевые тезисы

• for..of работает с итерируемыми объектами (Iterable), такими как массивы, строки, Map, Set и другие структуры данных, реализующие протокол Iterable.
• Он перебирает значения элементов, а не их индексы (в отличие от for..in, который перебирает ключи/индексы).
• Пример: for (const item of array) { console.log(item); } выведет каждый элемент массива.

Подробный ответ

Цикл for..of в JavaScript предназначен для работы с итерируемыми объектами (Iterable). Итерируемые объекты — это структуры данных, которые реализуют протокол Iterable, то есть имеют метод [Symbol.iterator], возвращающий итератор. К таким объектам относятся массивы, строки, Map, Set, NodeList и другие. Основное отличие for..of от for..in заключается в том, что for..of перебирает значения элементов, а for..in — ключи или индексы. Например, при работе с массивом for..of выведет каждый элемент, а for..in — индексы элементов. Важно отметить, что for..of не работает с обычными объектами ({}), так как они не являются итерируемыми по умолчанию. Однако можно добавить поддержку for..of для пользовательских объектов, реализовав для них метод [Symbol.iterator]. Например, можно создать объект, который будет итерироваться по своим свойствам, преобразовав его в итерируемый.

Практические примеры

Пример 1

Пример работы с массивом: const arr = [1, 2, 3]; for (const item of arr) { console.log(item); } // Выведет: 1, 2, 3

Пример 2

Пример работы со строкой: const str = 'hello'; for (const char of str) { console.log(char); } // Выведет: 'h', 'e', 'l', 'l', 'o'

Пример 3

Пример работы с Set: const set = new Set([1, 2, 3]); for (const item of set) { console.log(item); } // Выведет: 1, 2, 3

Пример 4

Пример добавления поддержки for..of для объекта: const obj = { a: 1, b: 2, [Symbol.iterator]() { return Object.values(this)[Symbol.iterator](); } }; for (const val of obj) { console.log(val); } // Выведет: 1, 2

Частые ошибки

• Попытка использовать for..of с обычным объектом ({}), что приведет к ошибке, так как объекты не являются итерируемыми по умолчанию.
• Путаница между for..of и for..in, например, ожидание, что for..of будет перебирать ключи объекта, а не значения.

Связанные темы

• Протокол Iterable и итераторы в JavaScript
• Метод [Symbol.iterator]
• Цикл for..in и его особенности
• Структуры данных Map и Set

Follow-up вопросы

В чем отличие for..of от for..in?

Уровень: basic

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

Можно ли использовать for..of с объектом? Почему?

Уровень: intermediate

Нет, for..of нельзя использовать с обычными объектами, так как они не реализуют протокол Iterable. Для этого объект должен иметь метод [Symbol.iterator], который возвращает итератор.

Как добавить поддержку for..of для пользовательского объекта?

Уровень: advanced

Для этого нужно реализовать метод [Symbol.iterator] в объекте, который должен возвращать итератор. Итератор — это объект с методом next(), возвращающим объект с полями value и done.

Какие еще структуры данных, кроме массивов и строк, поддерживают for..of?

Уровень: intermediate

for..of поддерживает структуры данных, реализующие Iterable, такие как Map, Set, NodeList, а также генераторы и пользовательские объекты с реализованным [Symbol.iterator].

Как for..of обрабатывает пустые элементы в массиве?

Уровень: basic

for..of перебирает все элементы массива, включая пустые (undefined), так как они являются частью массива и имеют свои индексы.