Как выбрать между разными методами массива и циклами?

Как выбрать между разными методами массива и циклами?

В JavaScript есть множество способов итерировать массивы: for, forEach, map, filter, reduce и другие. Выбор правильного способа критически важен для производительности, читаемости и корректности кода.

Методы массива (Array Methods)

1. forEach() - Простая итерация

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

arr.forEach((item, index) => {
  console.log(`Index ${index}: ${item}`);
});

// Плюсы:
// + Читаемо, функциональный стиль
// + Доступны индекс и весь массив
// - Нельзя break/continue
// - Нельзя вернуть значение
// - Медленнее чем for

Используй когда: нужна простая итерация с побочными эффектами

2. map() - Преобразование массива

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

// Создает НОВЫЙ массив
const doubled = numbers.map(x => x * 2);
// [2, 4, 6, 8, 10]

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

const names = users.map(user => user.name);
// ['Alice', 'Bob']

// Плюсы:
// + Функциональный стиль
// + Возвращает новый массив (не мутирует)
// + Очень читаемо
// - Создает новый массив (больше памяти)
// - Медленнее чем for

Используй когда: нужно преобразовать каждый элемент в новый массив

3. filter() - Фильтрация

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

// Фильтр четные числа
const even = numbers.filter(x => x % 2 === 0);
// [2, 4, 6, 8, 10]

// Фильтр в React компоненте
const activeUsers = users.filter(user => user.active);

// Плюсы:
// + Очень выразительно
// + Не мутирует исходный массив
// - O(n) операция
// - Создает новый массив

Используй когда: нужно выбрать элементы по условию

4. find() - Поиск первого элемента

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

// Найти первого пользователя по ID
const user = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

// Плюсы:
// + Останавливается при нахождении первого совпадения
// + Более эффективнее filter()[0]
// - Возвращает элемент, не индекс

Используй когда: нужно найти первый элемент по условию

5. findIndex() - Найти индекс

const arr = [10, 20, 30, 40, 50];

// Найти индекс элемента > 25
const index = arr.findIndex(x => x > 25);  // 2

// Плюсы:
// + Возвращает индекс, не элемент
// + Останавливается при нахождении

Используй когда: нужен индекс элемента по условию

6. reduce() - Агрегирование

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

// Сумма всех элементов
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
// 15

// Группировка объектов
const users = [
  { name: 'Alice', department: 'IT' },
  { name: 'Bob', department: 'HR' },
  { name: 'Charlie', department: 'IT' }
];

const byDept = users.reduce((acc, user) => {
  if (!acc[user.department]) {
    acc[user.department] = [];
  }
  acc[user.department].push(user);
  return acc;
}, {});

// {
//   IT: [{name: 'Alice', ...}, {name: 'Charlie', ...}],
//   HR: [{name: 'Bob', ...}]
// }

// Плюсы:
// + Мощный для агрегирования
// + Можно создать любую структуру
// - Может быть сложным для понимания
// - Медленнее чем for

Используй когда: нужно агрегировать данные в одно значение

7. some()/every() - Проверка условия

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

// some() - есть ли хотя бы один элемент
const hasEven = numbers.some(x => x % 2 === 0);  // true

// every() - все ли элементы
const allPositive = numbers.every(x => x > 0);  // true

// Плюсы:
// + some() останавливается при первом совпадении
// + Очень выразительно
// - Медленнее чем for с break

Используй когда: нужно проверить условие для элементов

Циклы (for, while)

1. for цикл - Базовый способ

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

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// Плюсы:
// + Самый быстрый способ
// + Полный контроль (break, continue)
// + Можно менять индекс внутри
// - Многословнее
// - Легко ошибиться

Используй когда: нужна максимальная производительность или специальный контроль

2. for...of цикл - Современный способ

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

for (const item of arr) {
  console.log(item);
}

// Плюсы:
// + Читаемо
// + Работает с любыми итерируемыми
// + Поддерживает break/continue
// - Медленнее чем for

Используй когда: нужен современный, читаемый цикл

3. while цикл - Условный цикл

let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

// Используй когда:** условие не связано с массивом

Сравнение производительности

const arr = new Array(1000000).fill(0).map((_, i) => i);

// Тест 1: for цикл
console.time('for');
for (let i = 0; i < arr.length; i++) {
  const _ = arr[i];
}
console.timeEnd('for');  // ~5ms

// Тест 2: forEach
console.time('forEach');
arr.forEach(item => {
  const _ = item;
});
console.timeEnd('forEach');  // ~8ms

// Тест 3: map
console.time('map');
const mapped = arr.map(x => x);
console.timeEnd('map');  // ~10ms

// Тест 4: for...of
console.time('for...of');
for (const item of arr) {
  const _ = item;
}
console.timeEnd('for...of');  // ~15ms

// Результат: for > forEach > map > for...of

Матрица выбора

Best Practices

1. Предпочитай функциональный стиль когда возможно

// ПЛОХО - imperative
const evenDoubled = [];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
    evenDoubled.push(arr[i] * 2);
  }
}

// ХОРОШО - functional
const evenDoubled = arr
  .filter(x => x % 2 === 0)
  .map(x => x * 2);

2. Цепируй методы для разборчивости

const result = data
  .filter(user => user.active)
  .map(user => user.name)
  .sort();

3. В критичных местах - используй for

// Для больших массивов или горячего кода
for (let i = 0; i < largeArray.length; i++) {
  process(largeArray[i]);
}

4. Избегай вложенных map/filter

// ПЛОХО - невозможно читать
const result = arr.map(x => x.filter(y => y > 5).map(y => y * 2));

// ХОРОШО - разделить на шаги
const result = arr
  .flatMap(x => x.filter(y => y > 5))
  .map(y => y * 2);

5. Используй includes для поиска в массиве значений

const permissions = ['read', 'write', 'delete'];

if (permissions.includes('read')) {
  console.log('Can read');
}

Выводы

Выбирай метод по задаче, а не по привычке:

• forEach() для простой итерации
• map() для преобразования
• filter() для фильтрации
• reduce() для агрегирования
• for когда нужна максимальная скорость
• for...of для современного, читаемого кода

Правило:

1. Первый вариант - функциональный метод (читаемость)
2. Если производительность критична - переходить на for
3. Профилировать перед оптимизацией

В 99% случаев разница в производительности незаметна, поэтому выбирай метод по читаемости и выразительности кода.