Какие знаешь ограничения for of?

Ограничения оператора for...of в JavaScript

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

1. Работа только с итерируемыми объектами

Самое главное ограничение: for...of работает только с объектами, реализующими протокол итерации (Symbol.iterator). Это означает, что вы не можете использовать его для перебора обычных объектов (plain objects).

// Это сработает — массив итерируемый
const array = [1, 2, 3];
for (const item of array) {
  console.log(item); // 1, 2, 3
}

// Это НЕ сработает — обычный объект не итерируемый по умолчанию
const obj = { a: 1, b: 2 };
for (const item of obj) { // TypeError: obj is not iterable
  console.log(item);
}

Чтобы обойти это ограничение, можно использовать методы типа Object.keys(), Object.values() или Object.entries():

const obj = { a: 1, b: 2 };
for (const key of Object.keys(obj)) {
  console.log(key, obj[key]); // 'a' 1, 'b' 2
}

2. Отсутствие доступа к индексу при итерации

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

const colors = ['red', 'green', 'blue'];

// С forEach() индекс доступен
colors.forEach((color, index) => {
  console.log(index, color);
});

// С for...of индекс нужно получать отдельно
let index = 0;
for (const color of colors) {
  console.log(index, color);
  index++;
}

Для получения индекса можно использовать entries():

for (const [index, color] of colors.entries()) {
  console.log(index, color);
}

3. Ограниченный контроль над процессом итерации

for...of предоставляет меньше контроля, чем классический цикл for:

• Нет прямого управления шагом итерации (например, i += 2)
• Сложнее реализовать обратный перебор (с конца к началу)
• Невозможно легко пропустить определенное количество элементов

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Классический for даёт полный контроль
for (let i = 0; i < numbers.length; i += 2) {
  console.log(numbers[i]); // 1, 3, 5, 7, 9
}

// С for...of это сложнее
let counter = 0;
for (const num of numbers) {
  if (counter % 2 === 0) {
    console.log(num);
  }
  counter++;
}

4. Невозможность модификации коллекции во время итерации

Как и многие другие методы итерации, for...of не предназначен для модификации массива во время его перебора. Это может привести к непредсказуемому поведению.

const items = [1, 2, 3, 4, 5];

// Опасная операция
for (const item of items) {
  if (item === 2) {
    items.push(6); // Может привести к бесконечному циклу или ошибкам
  }
  console.log(item);
}

5. Отсутствие поддержки в старых браузерах

Хотя for...of поддерживается всеми современными браузерами, он не работает в IE (Internet Explorer). Для поддержки старых сред может потребоваться транспиляция через Babel.

6. Ограничения при работе с NodeList и HTMLCollection

При работе с DOM-коллекциями типа NodeList или HTMLCollection могут возникнуть проблемы, так как некоторые из этих коллекций не являются полноценными массивами и имеют ограниченную поддержку итераторов.

// NodeList, полученный через querySelectorAll, является итерируемым
const divs = document.querySelectorAll('div');
for (const div of divs) { // Работает в современных браузерах
  console.log(div);
}

// Но HTMLCollection из getElementsByClassName может не поддерживать for...of
const elements = document.getElementsByClassName('item');
// for (const el of elements) {} // Может не работать в некоторых случаях

7. Невозможность досрочного выхода из вложенных циклов

Как и любой другой цикл, for...of не поддерживает выход из нескольких вложенных циклов одновременно. Для этого по-прежнему нужно использовать флаги или другие конструкции.

outer: for (const arr of matrix) {
  for (const item of arr) {
    if (item === target) {
      console.log('Найдено');
      break outer; // Используем метку
    }
  }
}

8. Производительность в edge-кейсах

В редких случаях, при работе с очень большими наборами данных или специализированными структурами, классический цикл for может быть немного эффективнее из-за отсутствия накладных расходов на создание итератора.

Когда использовать for...of и когда избегать

Используйте for...of, когда:

• Работаете с массивами, строками, Map, Set и другими итерируемыми объектами
• Нужна чистая и читаемая запись перебора элементов
• Не требуется доступ к индексу элемента
• Работаете в современной среде выполнения

Избегайте for...of, когда:

• Нужно перебрать обычный объект (используйте for...in с проверкой hasOwnProperty)
• Требуется доступ к индексу без дополнительных ухищрений
• Нужен полный контроль над шагом итерации
• Требуется поддержка Internet Explorer без транспиляции

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