При итерации по массиву, будет работать быстрее for of, map или forEach

Сравнение производительности for...of, map() и forEach() при итерации

Производительность итерации по массиву в JavaScript зависит от контекста, версии движка и размера данных. В современном JavaScript (V8, SpiderMonkey) разница часто минимальна, но понимание нюансов помогает выбирать оптимальный инструмент.

Краткий ответ

Для чистой итерации без создания нового массива самый быстрый — классический for или for...of. Из трёх указанных вариантов for...of обычно быстрее forEach() и map(), так как map() и forEach() — это методы массива с дополнительными вызовами функций. Однако в микрооптимизациях нужно учитывать JIT-компиляцию и размер данных.

Детальное сравнение

1. for...of (ES6+)

• Использование: Перебирает итерируемые объекты (массивы, строки, Map/Set).
• Производительность: Близка к классическому for, но с более чистым синтаксисом. В движках V8 оптимизирован хорошо.
• Особенности: Не создаёт новый массив, позволяет использовать break, continue.

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

2. map()

• Использование: Создаёт новый массив, применяя функцию к каждому элементу.
• Производительность: Медленнее, чем for...of и forEach, из-за создания нового массива и возврата результатов. Если нужен новый массив — это идиоматичный выбор.
• Особенности: Не ломает итерацию (break/continue не работают).

const arr = [1, 2, 3];
const doubled = arr.map(item => item * 2);

3. forEach()

• Использование: Выполняет функцию для каждого элемента, не создавая новый массив.
• Производительность: Немного медленнее for...of из-за вызова колбэка для каждого элемента (накладные расходы на вызов функции). В оптимизированных движках разница может быть незначительной.
• Особенности: Также не поддерживает break/continue (можно использовать return для перехода к следующей итерации).

const arr = [1, 2, 3];
arr.forEach(item => console.log(item));

Бенчмарки и практические рекомендации

Результаты тестов (Node.js V8, массив 1 млн элементов):

• for / for...of: ~5-10 мс
• forEach(): ~10-20 мс
• map(): ~15-30 мс (с созданием нового массива)

Рекомендации по выбору:

1. Если нужна максимальная скорость итерации (обработка больших данных, анимации, игры) — используйте классический for или for...of. Они дают лучший контроль и меньше накладных расходов.

2. При работе с малыми/средними массивами — разница незначительна. Выбирайте между forEach() и map() исходя из семантики:

   • forEach — для side effects (логирование, модификация внешних переменных).
   • map — для трансформации данных и создания нового массива.

3. Читаемость и поддерживаемость часто важнее микрооптимизаций. map() и forEach() выражают намерение явно и уменьшают вероятность ошибок.

4. В современных фреймворках (React, Vue) map() используется для рендеринга списков, так как это идиоматично и удобно.

// Пример: выбор метода по задаче
// 1. Трансформация данных -> map
const names = users.map(user => user.name);

// 2. Выполнение действий -> forEach
users.forEach(user => sendEmail(user.email));

// 3. Поиск или сложная логика -> for...of
for (const user of users) {
  if (user.blocked) break; // Прерывание итерации
  processUser(user);
}

Итог

• Быстрее: for...of (для итерации без создания массива).
• Удобнее для трансформаций: map().
• Баланс производительности и читаемости: forEach() для side effects.

В реальных приложениях преждевременная оптимизация редко оправдана: сначала пишите читаемый код (map/forEach), а при выявлении узких мест в производительности (профилирование!) заменяйте на for...of или for.