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

Работа цикла for..of в JavaScript

Цикл for..of — это современная итерационная конструкция, представленная в стандарте ES6 (ECMAScript 2015), предназначенная для перебора итерируемых объектов. В отличие от классического for или for..in, он работает непосредственно со значениями элементов, а не с индексами или ключами.

Основные типы данных, с которыми работает for..of

1. Массивы (Array)

Наиболее распространённый случай использования. Цикл перебирает каждый элемент массива по порядку.

const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
  console.log(fruit); // 'apple', 'banana', 'orange'
}

2. Строки (String)

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

const message = 'Hello';
for (const char of message) {
  console.log(char); // 'H', 'e', 'l', 'l', 'o'
}

3. Map и Set

Эти структуры данных из ES6 имеют встроенный итератор.

// Map
const userMap = new Map([['name', 'Alice'], ['age', 30]]);
for (const [key, value] of userMap) {
  console.log(`${key}: ${value}`); // 'name: Alice', 'age: 30'
}

// Set
const uniqueNumbers = new Set([1, 2, 2, 3]);
for (const num of uniqueNumbers) {
  console.log(num); // 1, 2, 3
}

4. NodeList и HTMLCollection

При работе с DOM можно использовать for..of для перебора коллекций элементов.

const buttons = document.querySelectorAll('button');
for (const button of buttons) {
  button.addEventListener('click', handleClick);
}

5. Аргументы функции (arguments)

Хотя в современном коде предпочтительнее использовать rest-параметры, arguments также является итерируемым.

function sum() {
  let total = 0;
  for (const num of arguments) {
    total += num;
  }
  return total;
}

6. Типизированные массивы (TypedArray)

Например, Uint8Array, Int32Array и другие.

const buffer = new Uint8Array([10, 20, 30]);
for (const byte of buffer) {
  console.log(byte); // 10, 20, 30
}

7. Генераторы (Generators)

Функции-генераторы возвращают итерируемый объект.

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

for (const num of numberGenerator()) {
  console.log(num); // 1, 2, 3
}

8. Пользовательские итерируемые объекты

Любой объект можно сделать итерируемым, реализовав метод [Symbol.iterator]().

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    return {
      next: () => ({
        value: current,
        done: current++ > this.to
      })
    };
  }
};

for (const num of range) {
  console.log(num); // 1, 2, 3
}

Что НЕ работает с for..of

• Обычные объекты (plain objects) — они не являются итерируемыми по умолчанию. Для перебора свойств объекта используйте for..in или Object.keys(), Object.values(), Object.entries().
• null или undefined — вызовет ошибку TypeError.

Преимущества for..of

• Лаконичный синтаксис — не нужно управлять индексами или проверять длину.
• Работа с любыми итерируемыми объектами — универсальность.
• Корректная обработка суррогатных пар в строках.
• Возможность использования break, continue и return внутри цикла.
• Поддержка деструктуризации при переборе Map или массивов массивов.

Пример с деструктуризацией

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

for (const { id, name } of users) {
  console.log(`User ${id}: ${name}`);
}

Итог: for..of — это мощный и выразительный инструмент для итерации по коллекциям данных в современном JavaScript. Его ключевое преимущество — абстрагирование от механизма перебора и работа непосредственно со значениями, что делает код чище и менее подверженным ошибкам. Однако важно помнить, что для перебора свойств обычных объектов он не подходит — для этой задачи существуют другие методы.