Вебсправочник
Справочник JavaScript

for...of: перебор значений итерируемой коллекции

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

Назначение

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

Как это работает

Переменная цикла получает очередное значение, а не имя свойства. Break позволяет остановиться раньше конца. Для пары индекс–значение массива можно перебирать результат entries().

Пример

const durations = [5, 8, 3];
let total = 0;
for (const minutes of durations) total += minutes;
console.assert(total === 16);
const visited = [];
for (const [index, value] of durations.entries()) {
  visited.push(`${index}:${value}`);
  if (index === 1) break;
}
console.assert(visited.join("|") === "0:5|1:8");
console.log(total, visited);

Что должно получиться

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

Граница применения и частая ошибка

Не заменяйте for…of на for…in для массива: последний работает с именами свойств. Изменение коллекции во время обхода может влиять на последующие шаги. Асинхронная итерация использует отдельную конструкцию for await…of.

Самостоятельная проверка

Переберите Set с повторяющимися исходными значениями и объясните результат. Затем попробуйте обычный объект в учебной копии и обработайте ошибку. Для объекта явно выберите Object.keys, values или entries.

Пример JavaScript проверяйте в собственном учебном файле или консоли своего проекта. Встроенная песочница справочника JavaScript не выполняет. Успешное выполнение в одной среде не гарантирует поддержку метода во всех браузерах.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.