Введение

Если ты хоть раз работал с JavaScript, то точно сталкивался с массивами. А если не сталкивался — поздравляю, у тебя впереди куча боли и радости! Сегодня разберём четыре топовых метода работы с массивами, без которых современный JS-код просто не пишется: map, filter, reduce и forEach. Почему это важно? Потому что эти методы позволяют писать лаконичный, читаемый и (почти всегда) быстрый код, который поймет любой нормальный коллега. А если ты всё ещё юзаешь for или for...of для обработки массивов — пора апгрейдиться.

Возможности

• Обработка больших массивов без лишнего геморроя
• Чистый и читаемый код (особенно в команде)
• Возможность писать функционально (и даже немного модно)
• Быстрая фильтрация, преобразование и агрегация данных

Что требуется

• Любой современный браузер (Chrome, Firefox, Edge, Safari — всё ок)
• Node.js (если хочешь гонять код на сервере) — nodejs.org
• Любой редактор кода (VSCode, WebStorm, даже Notepad++)
• Железо — любое, даже Raspberry Pi потянет

Установка — пошаговая инструкция

1. Проверь, что у тебя есть JS-движок:
   node -v в терминале — если видишь версию, всё ок.
   Или просто открой консоль в браузере (F12 или Ctrl+Shift+I → Console).
2. Создай файл arrays.js:
   touch arrays.js или через графический редактор.
3. Пиши и тестируй код:
   В Node.js: node arrays.js
   В браузере: копируй куски кода в консоль.

Никаких дополнительных библиотек не нужно — всё встроено в стандарт JS (ES5+).

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

forEach

const arr = [1, 2, 3];
arr.forEach((item, idx) => {
  console.log(`Элемент #${idx}: ${item}`);
});

Просто перебирает элементы. Возвращает undefined. Используй, если нужен только сайд-эффект (например, логирование).

map

const arr = [1, 2, 3];
const squared = arr.map(x => x * x);
// [1, 4, 9]

Возвращает новый массив, где каждый элемент — результат функции. Исходный массив не меняется (иммутабельность — наше всё).

filter

const arr = [1, 2, 3, 4];
const even = arr.filter(x => x % 2 === 0);
// [2, 4]

Возвращает новый массив только с теми элементами, для которых функция вернула true.

reduce

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, curr) => acc + curr, 0);
// 10

Собирает всё в одно значение. Можно использовать для суммирования, подсчёта, группировки, и даже для построения новых структур.

Варианты и параметры:

• forEach((item, idx, arr) => ...)
• map((item, idx, arr) => ...)
• filter((item, idx, arr) => ...)
• reduce((acc, curr, idx, arr) => ..., initialValue)

Документация: MDN: Array

Ошибки, как делать не надо

• Не используй forEach для асинхронных операций с await!
  forEach не ждёт await внутри. Для этого лучше for...of или Promise.all().
• Не мутируй массивы внутри map и filter!
  Не пиши arr.push(...) внутри map — это ломает иммутабельность и может породить баги.
• Не забывай про initialValue в reduce!
  Если массив может быть пустой — обязательно указывай начальное значение.
• Не используй map для сайд-эффектов.
  Для этого есть forEach, map — только для преобразования.

Пример реального использования в окружении

// Фильтруем пользователей по возрасту и собираем их email'ы
const users = [
  {name: 'Vasya', age: 22, email: 'vasya@example.com'},
  {name: 'Petya', age: 17, email: 'petya@example.com'},
  {name: 'Masha', age: 30, email: 'masha@example.com'}
];

const emails = users
  .filter(user => user.age >= 18)
  .map(user => user.email);

console.log(emails); // ['vasya@example.com', 'masha@example.com']

В реальности такие штуки встречаются в обработке данных с API, генерации отчетов, фильтрации логов, и вообще везде, где есть массивы.

Заключение

map, filter, reduce, forEach — это не магия, а must-have инструменты любого JS-разработчика. Они делают код чище, проще и быстрее для понимания. Если ещё не используешь их — самое время начать!

Для более глубокого погружения и всяких edge-cases — читай MDN: Array.
Удачи и чистого тебе кода!