Методы массивов в JavaScript: map, filter, reduce, find с реальными задачами
Полное практическое руководство по современным методам работы с массивами в JavaScript: иммутабельность, трансформация данных, цепочки вызовов и разбор reduce.
Модуль 05: JavaScript: структуры данных и функции
Закрепите алгоритмические навыки работы с массивами и объектами в нашей интерактивной песочнице с автотестами.
Функциональный подход к обработке массивов — стандарт современной веб-разработки. Главное достоинство методов высшего порядка — декларативность, читаемость и иммутабельность (сохранение исходных данных в неизменном виде).
1. Сводная таблица методов массивов
| Метод | Мутирует массив? | Что возвращает | Сценарий применения |
|---|---|---|---|
map() | ❌ Нет | Новый массив той же длины | Преобразование каждого элемента |
filter() | ❌ Нет | Новый отфильтрованный массив | Выборка элементов по условию |
reduce() | ❌ Нет | Единое агрегированное значение | Подсчет сумм, группировка, сборка словарей |
find() | ❌ Нет | Первый найденный элемент или undefined | Быстрый поиск одного объекта |
some() | ❌ Нет | Булево значение (true / false) | Проверка «хотя бы один подходит» |
every() | ❌ Нет | Булево значение (true / false) | Проверка «все элементы подходят» |
Золотое правило иммутабельности:
Методыmap,filter,slice,reduceсоздают новые копии данных, не изменяя исходный массив. Методыpush,pop,splice,sortмутируют массив на месте! В React всегда используйте иммутабельные методы, чтобы не сломать механизм обнаружения изменений.
2. map(): Трансформация каждого элемента
const products = [
{ id: 1, name: 'Клавиатура', price: 5000 },
{ id: 2, name: 'Мышь', price: 2500 },
{ id: 3, name: 'Монитор', price: 25000 }
];
// Получаем список названий:
const titles = products.map(p => p.name);
// ['Клавиатура', 'Мышь', 'Монитор']
// Применяем скидку 10%:
const withDiscount = products.map(p => ({
...p,
salePrice: p.price * 0.9
}));
3. filter(): Точечная выборка данных
// Выбираем только бюджетные товары (до 10 000 руб.):
const affordable = products.filter(p => p.price <= 10000);
// [{ id: 1, ... }, { id: 2, ... }]
4. reduce(): Универсальный швейцарский нож
// 1. Подсчет суммарной стоимости корзины:
const totalSum = products.reduce((acc, p) => acc + p.price, 0);
// 32500
// 2. Превращение массива в словарь по ID (O(1) поиск):
const productsById = products.reduce((acc, p) => {
acc[p.id] = p;
return acc;
}, {});
Совет эксперта:
Всегда явно передавайте второй аргументinitialValueв методreduce(например0или{}). Без начального значенияreduceупадет с фатальной ошибкой при вызове на пустом массиве.
5. find() против filter(): Внимание на производительность
// ⚡ БЫСТРО: прекращает поиск сразу после первого совпадения
const monitor = products.find(p => p.id === 3);
// 🐢 МЕДЛЕННО: обходит весь массив целиком
const monitorBad = products.filter(p => p.id === 3)[0];
Совет эксперта по производительности:
Если вам нужен ровно один уникальный элемент, всегда выбирайте.find(). Он прекращает итерацию в тот момент, когда условие выполнено, экономя время CPU на больших объемах данных.
6. Конвейеры обработки данных (Method Chaining)
Методы можно объединять в выразительные декларативные цепочки:
const totalElectronicsSale = products
.filter(p => p.price < 20000) // 1. Оставляем товары до 20 000
.map(p => p.price * 0.85) // 2. Применяем скидку 15%
.reduce((sum, price) => sum + price, 0); // 3. Считаем сумму со скидкой
Понравилась шпаргалка?
В платформе CopyPastWorld собрано более 400 интерактивных уроков с практическими заданиями, автотестами и поддержкой сообщества.