Какие знаешь способы прохода массива?

Способы итерации по массивам в JavaScript

Как senior frontend developer, я подхожу к выбору способа прохода по массиву не просто как к синтаксической задаче, а с учетом производительности, читаемости кода, необходимости трансформации данных и требований конкретного сценария. Вот полный арсенал методов с анализом их применения.

1. Классические циклы (Императивный подход)

Цикл for (с индексом)

Базовый и самый контролируемый способ, дает полный доступ к индексу.

const arr = [10,遊 20, 30];
for (let i = 0; i < arr.length; i++) {
    console.log(`Индекс ${i}: значение ${arr[i]}`);
}

• Плюсы: Максимальная производительность в критичных местах, возможность прерваться (break) или пропустить итерацию (continue), гибкость в направлении обхода (можно идти с конца).
• Минусы: Много шаблонного кода, подвержен ошибкам (опечатки в условиях), менее читаем.

Цикл for...of (ES6)

Итерация по значениям массива. Улучшенная читаемость для случаев, когда индекс не нужен.

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

• Плюсы: Чистый и понятный синтаксис, работает с любыми итерируемыми объектами (Map, Set, NodeList).
• Минусы: Нет доступа к индексу по умолчанию (можно получить через entries() или отдельный счетчик), нельзя прервать досрочно в старых средах без try...catch.

2. Функциональные методы массива (Декларативный подход)

Эти методы не мутируют исходный массив (кроме forEach) и часто возвращают новый.

Array.prototype.forEach()

Выполняет функцию для каждого элемента. Не создает новый массив.

const numbers = [1, 2, 3];
let sum = 0;
numbers.forEach(num => {
    sum += num;
});
console.log(sum); // 6

• Плюсы: Чище, чем for, показывает намерение "сделать что-то с каждым элементом".
• Минусы: Нельзя прервать выполнение (нет эквивалента break), всегда проходит весь массив. Возвращает undefined.

Array.prototype.map()

Трансформирует каждый элемент, возвращая новый массив той же длины.

const prices = [100, 200, 300];
const pricesWithTax = prices.map(price => price * 1.2);
console.log(pricesWithTax); // [120, 240, 360]

• Ключевое отличие от forEach: Создает новый массив. Используется, когда нужен результат преобразования.

Array.prototype.filter()

Фильтрует элементы по условию, возвращая новый массив только с подходящими элементами.

const users = [
    { name: 'Alice', active: true },
    { name: 'Bob', active: false }
];
const activeUsers = users.filter(user => user.active);

Array.prototype.reduce() и reduceRight()

Сворачивает массив в одно значение (число, строку, объект, массив). Мощнейший инструмент.

const cart = [10, 25, 5];
const total = cart.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // 40

• reduceRight() проходит массив справа налево.

3. Специализированные методы для поиска и проверки

Эти методы также проходят массив (часто частично), но с конкретной целью.

• some() – проверяет, удовлетворяет ли хотя бы один элемент условию. Прерывается при нахождении.
• every() – проверяет, удовлетворяют ли все элементы условию. Прерывается при нахождении ложного значения.
• find() / findIndex() – возвращают первый элемент/индекс, удовлетворяющий условию.

4. Редкие и устаревшие способы

• Цикл for...in: Не рекомендуется для массивов! Итерирует по перечисляемым ключам (индексам как строкам) и может захватить пользовательские свойства, добавленные в прототип. Используется для объектов.
• Цикл while / do...while: Менее удобны для массивов фиксированной длины, но полезны для структур типа связных списков.

Критерии выбора на практике

1. Нужен ли новый массив?

    *   Да, трансформированный → `map`.
    *   Да, отфильтрованный → `filter`.
    *   Нет, просто выполнить операцию → `forEach` или `for...of`.

1. Нужно ли одно итоговое значение? → reduce.

2. Важна ли максимальная производительность в цикле на 1M+ элементов? → классический for (оптимизация движком V8).

3. Нужно ли прервать выполнение досрочно?

    *   Для поиска → `find`, `some`, `every`.
    *   В общем цикле → `for`, `for...of` (с `break`).

1. Важна ли читаемость и неизменяемость данных? → функциональные методы (map, filter, reduce). Они делают код предсказуемым и удобным для тестирования.

Современный подход: в 95% случаев на фронтенде (работа с данными от API, рендеринг списков в UI) я использую функциональные методы. Они идеально сочетаются с React/Vue и принципами функционального программирования. Классический for остается для оптимизации в "горячих" участках кода или при работе с типизированными массивами (например, Uint8Array в WebGL).