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

Научись преобразовывать, фильтровать и агрегировать данные с помощью четырёх методов массива, которые чаще всего встречаются в реальных проектах.

10 мин · 3 вопросов

В реальном проекте ты постоянно преобразуешь данные: список товаров для показа, результаты из API для сортировки, корзина для подсчёта итога. Методы map, filter, reduce и find заменяют большинство твоих циклов for более коротким и выразительным кодом. Они никогда не изменяют исходный массив: они возвращают новый результат, а это избавляет от целого класса багов.

const products = [
  { name: "keyboard", price: 49, inStock: true },
  { name: "mouse", price: 25, inStock: false },
  { name: "screen", price: 199, inStock: true }
];

const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]

filter оставляет только те элементы, которые проходят проверку, и возвращает новый массив - возможно, пустой. find останавливается на первом подходящем элементе и возвращает сам элемент или undefined, если ничего не найдено. Задача на подумать: чтобы получить все товары в наличии, что ты выберешь? А чтобы получить тот самый товар с именем "mouse"?

const available = products.filter((p) => p.inStock);
console.log(available.length); // 2

const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25

reduce - самый мощный: он сводит массив к одному значению (числу, объекту, строке). Он принимает функцию с аккумулятором и текущим элементом, а также начальное значение. Классический случай: подсчёт итога корзины.

const cart = [
  { label: "T-shirt", quantity: 2, unitPrice: 15 },
  { label: "Cap", quantity: 1, unitPrice: 12 }
];

const total = cart.reduce(
  (sum, item) => sum + item.quantity * item.unitPrice,
  0
);
console.log(total); // 42

Чтобы выбрать нужный метод, задай себе один вопрос: какой формы должен быть результат? Столько же элементов, сколько в исходном, но преобразованных - map. Подмножество - filter. Один элемент - find. Одно вычисленное значение - reduce. Этот рефлекс сэкономит тебе драгоценное время и на собеседованиях, и в проектах.

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Какой метод всегда возвращает массив той же длины, что и исходный массив?
   • filter
   • map
   • reduce
   • find
2. Что возвращает find, если ни один элемент не удовлетворяет условию?
   • null
   • undefined
   • Пустой массив
   • Выбрасывается ошибка
3. В cart.reduce((sum, item) => sum + item.unitPrice, 0) для чего нужен последний 0?
   • Это начальное значение аккумулятора sum
   • Это стартовый индекс обхода
   • Это значение, которое вернётся, если массив некорректен