Главная/Статьи/JavaScript: Использование Map, Filter, и Reduce вместе
JavaScript

JavaScript: Использование Map, Filter, и Reduce вместе

Финальная часть мини-курса по обработке данных в JavaScript — создание цепочек вызовов методов для выполнения сложных операций с данными. Методы map(), filter() и reduce() можно комбинировать в одну цепочку для решения задач, которые иначе потребовали бы вложенных циклов.

Задача

Суммировать возраст всех собак, переведённый в «собачьи годы» (возраст × 7). Исходные данные — массив объектов с домашними животными:

const pets = [
  { name: 'Buddy',   age: 8, type: 'dog' },
  { name: 'Whiskers', age: 3, type: 'cat' },
  { name: 'Rex',     age: 4, type: 'dog' },
  { name: 'Luna',    age: 2, type: 'dog' },
];

Традиционный подход (цикл for)

let total = 0;
for (let i = 0; i < pets.length; i++) {
  if (pets[i].type === 'dog') {
    total += pets[i].age * 7;
  }
}
// total = 98

Функциональный подход: цепочка методов

Три этапа: filter отбирает собак, map переводит возраст в собачьи годы, reduce суммирует результаты:

const total = pets
  .filter(pet => pet.type === 'dog')
  .map(pet => pet.age * 7)
  .reduce((acc, val) => acc + val, 0);

// total = 98

Оптимизация с чистыми функциями

Выносите логику в отдельные функции — это улучшает читаемость и позволяет переиспользовать код:

const isDog = pet => pet.type === 'dog';
const dogYears = pet => pet.age * 7;
const sum = (acc, val) => acc + val;

const total = pets
  .filter(isDog)
  .map(dogYears)
  .reduce(sum, 0);

Такой стиль делает код самодокументируемым: функции isDog, dogYears и sum говорят сами за себя.