Главное различие

Часть методов возвращает новый массив, часть меняет исходный. Путаница между ними — источник половины ошибок: вы ждёте копию, а получаете изменённые данные.

Не мутируют: map, filter, slice, concat, find, some, every, reduce. Мутируют: push, pop, shift, unshift, splice, sort, reverse.

map — преобразовать каждый элемент

const prices = [100, 200, 300];
const withVat = prices.map(p => p * 1.2);
// [120, 240, 360]

Длина результата всегда равна исходной. Если нужно отфильтровать — это filter.

filter — оставить подходящие

const published = posts.filter(p => p.isPublished);

Колбэк возвращает true или false. Возврат объекта вместо булева значения — частая ошибка: пустой объект считается истинным, и в выборку попадает всё.

reduce — свернуть в одно значение

const total = prices.reduce((sum, p) => sum + p, 0);

Второй параметр — начальное значение. Всегда передавайте его явно: без него на пустом массиве будет ошибка, а на массиве объектов результат окажется неожиданным.

Поиск и проверки

• find — первый подходящий элемент или undefined.
• findIndex — его индекс или -1.
• some — есть ли хотя бы один подходящий.
• every — все ли подходят.
• includes — есть ли конкретное значение.

Сортировка

sort по умолчанию сравнивает как строки: [10, 9, 100].sort() даст [10, 100, 9]. Нужна функция сравнения:

const sorted = [...items].sort((a, b) => a.price - b.price);

Копия через [...items] важна: sort мутирует исходный массив.

Цепочки

Методы возвращают массив, поэтому их можно соединять. Цепочка читается сверху вниз, если каждый шаг короткий:

const names = users
  .filter(u => u.active)
  .map(u => u.name)
  .slice(0, 10);

Частые ошибки

• Забытый return в map. Стрелочная с фигурными скобками без return даёт массив undefined.
• map вместо forEach. Если результат не используется, map только создаёт мусор.
• Мутация при переборе. push внутри forEach по тому же массиву ведёт к пропущенным элементам.
• reduce без начального значения. Падает на пустом массиве.

Нужен сайт, а не статья?

Напишу фронтенд без лишних зависимостей: интерактив, формы, запросы к API. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: JavaScript с нуля, функции, про React.