JS-шпаргалка: методы массивов map, filter, reduce на реальных примерах

О чем эта статья

Когда я только начинал учить JavaScript, я долго не мог понять, зачем нужны эти map, filter, reduce. Ну есть же обычный цикл for — зачем усложнять? Потом я понял: это не усложнение, а огромное упрощение. Эти методы позволяют писать код короче, понятнее и реже ошибаться. В этой шпаргалке я разобрал все три метода на реальных задачах, с которыми сталкивался сам. Поехали.

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

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

Синтаксис:

const новыйМассив = исходныйМассив.map((элемент, индекс, массив) => {
  // возвращаем преобразованный элемент
});

Пример 1. Удвоить числа

const числа = [2, 4, 6, 8];

// Без map (через for)
const удвоенныеЧерезFor = [];
for (let i = 0; i < числа.length; i++) {
  удвоенныеЧерезFor.push(числа[i] * 2);
}

// С map (красиво)
const удвоенные = числа.map(num => num * 2);

console.log(удвоенные); // [4, 8, 12, 16]

Пример 2. Из массива объектов — массив строк

Реальная задача: у вас есть список пользователей, нужно собрать только их имена.

const пользователи = [
  { id: 1, имя: 'Алексей', возраст: 25 },
  { id: 2, имя: 'Мария', возраст: 30 },
  { id: 3, имя: 'Дмитрий', возраст: 22 }
];

const имена = пользователи.map(user => user.имя);
console.log(имена); // ['Алексей', 'Мария', 'Дмитрий']

Пример 3. Форматирование данных

Бэкенд отдал дату в формате ISO, а нам нужно красивое отображение.

const заказы = [
  { id: 1, сумма: 1500, дата: '2024-03-15T10:30:00Z' },
  { id: 2, сумма: 2300, дата: '2024-03-16T14:45:00Z' }
];

const отформатированные = заказы.map(order => ({
  ...order,
  дата: new Date(order.дата).toLocaleDateString('ru-RU'),
  сумма: `${order.сумма} ₽`
}));

console.log(отформатированные);
// [
//   { id: 1, сумма: '1500 ₽', дата: '15.03.2024' },
//   { id: 2, сумма: '2300 ₽', дата: '16.03.2024' }
// ]

// ❌ ОШИБКА
const ошибка = числа.map(num => { num * 2 }); // нет return
console.log(ошибка); // [undefined, undefined, undefined, undefined]

// ✅ ПРАВИЛЬНО
const правильно = числа.map(num => num * 2); // неявный return
// или
const правильно2 = числа.map(num => { return num * 2; }); // явный return

2. filter() — отфильтровать нужное

Что делает: проходит по массиву и оставляет только те элементы, для которых функция вернула true. Возвращает новый массив (может быть короче исходного).

Синтаксис:

const отфильтрованные = исходныйМассив.filter((элемент, индекс, массив) => {
  // возвращаем true — элемент остаётся, false — уходит
});

Пример 1. Оставить только чётные числа

const числа = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const четные = числа.filter(num => num % 2 === 0);
console.log(четные); // [2, 4, 6, 8, 10]

Пример 2. Отфильтровать пользователей старше 18 лет

const пользователи = [
  { имя: 'Олег', возраст: 17 },
  { имя: 'Анна', возраст: 25 },
  { имя: 'Игорь', возраст: 16 },
  { имя: 'Светлана', возраст: 31 }
];

const взрослые = пользователи.filter(user => user.возраст >= 18);
console.log(взрослые);
// [
//   { имя: 'Анна', возраст: 25 },
//   { имя: 'Светлана', возраст: 31 }
// ]

Пример 3. Убрать пустые значения

Частая задача — очистить массив от null, undefined и пустых строк.

const сМусором = [1, null, 'текст', undefined, '', 42, false, 'привет'];

const чистый = сМусором.filter(item => {
  return item !== null && item !== undefined && item !== '';
});

console.log(чистый); // [1, 'текст', 42, false, 'привет']

Пример 4. Поиск по тексту

Реализуем простой поиск по названиям товаров.

const товары = ['Ноутбук Asus', 'Телефон iPhone', 'Ноутбук Acer', 'Планшет Samsung'];

const поиск = 'ноутбук';
const найденные = товары.filter(товар => 
  товар.toLowerCase().includes(поиск.toLowerCase())
);

console.log(найденные); // ['Ноутбук Asus', 'Ноутбук Acer']

3. reduce() — собрать всё в одно значение

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

Синтаксис:

const результат = исходныйМассив.reduce((аккумулятор, элемент, индекс, массив) => {
  // возвращаем обновлённый аккумулятор
}, начальноеЗначение);

Пример 1. Сумма всех чисел

Классика.

const числа = [10, 20, 30, 40];

// Через for
let суммаFor = 0;
for (let i = 0; i < числа.length; i++) {
  суммаFor += числа[i];
}

// Через reduce
const суммаReduce = числа.reduce((акк, num) => акк + num, 0);

console.log(суммаReduce); // 100

Разберём по шагам: акк = 0 (начальное значение)
Шаг 1: 0 + 10 = 10
Шаг 2: 10 + 20 = 30
Шаг 3: 30 + 30 = 60
Шаг 4: 60 + 40 = 100

Пример 2. Найти максимальное число

const числа = [5, 12, 3, 8, 21, 7];

const максимум = числа.reduce((акк, num) => {
  return num > акк ? num : акк;
}, числа[0]);

console.log(максимум); // 21

Пример 3. Сгруппировать объекты по свойству

Очень полезно на практике. Группируем пользователей по возрасту.

const пользователи = [
  { имя: 'Анна', возраст: 25 },
  { имя: 'Борис', возраст: 30 },
  { имя: 'Виктор', возраст: 25 },
  { имя: 'Галина', возраст: 30 },
  { имя: 'Дмитрий', возраст: 35 }
];

const сгруппированные = пользователи.reduce((акк, user) => {
  if (!акк[user.возраст]) {
    акк[user.возраст] = [];
  }
  акк[user.возраст].push(user.имя);
  return акк;
}, {});

console.log(сгруппированные);
// {
//   '25': ['Анна', 'Виктор'],
//   '30': ['Борис', 'Галина'],
//   '35': ['Дмитрий']
// }

Пример 4. Подсчёт количества вхождений

Считаем, сколько раз встречается каждое слово.

const слова = ['яблоко', 'груша', 'яблоко', 'апельсин', 'груша', 'яблоко'];

const счетчик = слова.reduce((акк, слово) => {
  акк[слово] = (акк[слово] || 0) + 1;
  return акк;
}, {});

console.log(счетчик);
// { яблоко: 3, груша: 2, апельсин: 1 }

Пример 5. Цепочка операций (filter + map + reduce)

Самая частая реальная задача: взять массив, отфильтровать, преобразовать и посчитать итог.
Задача: Есть список товаров. Нужно посчитать общую стоимость только тех, у которых цена выше 500, с учётом количества.

const корзина = [
  { название: 'Клавиатура', цена: 1500, количество: 2 },
  { название: 'Мышь', цена: 800, количество: 3 },
  { название: 'Коврик', цена: 300, количество: 5 },
  { название: 'Монитор', цена: 15000, количество: 1 }
];

const итог = корзина
  .filter(товар => товар.цена > 500)
  .map(товар => товар.цена * товар.количество)
  .reduce((сумма, стоимость) => сумма + стоимость, 0);

console.log(итог); 
// Клавиатура: 1500*2=3000, Мышь: 800*3=2400, Монитор: 15000*1=15000
// Итого: 20400

4. Сравнение методов (шпаргалка-памятка)

5. Мой совет начинающим

Когда я только знакомился с этими методами, я пытался запомнить их все сразу и путался. Потом я придумал себе простую ассоциацию:

• map → M = Модифицируй каждый (Modify)
• filter → F = Фильтруй (Filter)
• reduce → R = Результат (Result)

И ещё важное правило: старайтесь избегать мутации исходных массивов. Все эти методы создают новый массив, не трогая старый. Это помогает писать код без побочных эффектов и легче отлаживать.

6. Задание для практики

Чтобы метод точно закрепился, попробуйте решить такую задачу самостоятельно:

У вас есть массив заказов. Каждый заказ — это объект с полями id, сумма и статус (строка: 'оплачен', 'отменен', 'доставлен').

Нужно:

1. Оставить только оплаченные заказы.
2. Увеличить сумму каждого оплаченного заказа на 10% (как комиссию).
3. Посчитать общую сумму всех оплаченных заказов после увеличения.

const заказы = [
  { id: 1, сумма: 1000, статус: 'оплачен' },
  { id: 2, сумма: 500, статус: 'отменен' },
  { id: 3, сумма: 2000, статус: 'оплачен' },
  { id: 4, сумма: 300, статус: 'доставлен' }
];

const общаяСумма = заказы
  .filter(order => order.статус === 'оплачен')
  .map(order => order.сумма * 1.1)
  .reduce((acc, sum) => acc + sum, 0);

console.log(общаяСумма); // (1000*1.1) + (2000*1.1) = 1100 + 2200 = 3300

Если эта шпаргалка была полезна — сохраните себе. В следующей части разберём методы работы с объектами: Object.keys(), Object.values(), Object.entries().