map, filter, reduce, find — методы массивов

Четыре метода, которые спрашивают чаще всего, — и чем они отличаются.

Эти методы не меняют исходный массив (кроме случая мутации внутри): map и filter возвращают новый массив, reduce — одно значение, find — один элемент.

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

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

const nums = [1, 2, 3, 4];
const squares = nums.map((x) => x * x);
console.log(squares);
console.log(nums); // исходный не изменился

Вывод:

[ 1, 4, 9, 16 ]
[ 1, 2, 3, 4 ]

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

filter оставляет элементы, для которых функция вернула true. Длина результата может быть меньше.

const nums = [1, 2, 3, 4, 5, 6];
const even = nums.filter((x) => x % 2 === 0);
console.log(even);

Вывод:

[ 2, 4, 6 ]

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

reduce «накапливает» результат, проходя по массиву. Принимает функцию (аккумулятор, элемент) и начальное значение.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, x) => acc + x, 0);
console.log("сумма:", sum);

// частая задача: посчитать количество вхождений
const words = ["a", "b", "a", "c", "a", "b"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts);

Вывод:

сумма: 10
{ a: 3, b: 2, c: 1 }

find — найти первый подходящий

find возвращает первый элемент, удовлетворяющий условию, или undefined. findIndex вернёт индекс.

const users = [
  { id: 1, name: "Аня" },
  { id: 2, name: "Боря" },
];

const found = users.find((u) => u.id === 2);
console.log(found.name);
console.log(users.find((u) => u.id === 99)); // нет — undefined

Вывод:

Боря
undefined

Цепочки методов

Методы возвращают массивы (кроме find/reduce), поэтому их соединяют в цепочку — читается как описание.

const total = [1, 2, 3, 4, 5, 6]
  .filter((x) => x % 2 === 0) // [2, 4, 6]
  .map((x) => x * 10)         // [20, 40, 60]
  .reduce((a, b) => a + b, 0); // 120
console.log(total);

Вывод:

120

Памятка

Итог

• map — преобразовать каждый, filter — отобрать, reduce — свернуть, find — найти первый.
• Все они не мутируют исходный массив, а возвращают новый результат.
• Цепочки методов делают обработку данных декларативной и читаемой.