Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Последняя функция из нашей тройки - метод reduce() (говорят "свертка"), который используется дляагрегацииданных. Под агрегацией понимается операция, вычисляющая значение, зависящее от всего набора данных. К таким операциям, например, относятся нахождение среднего значения, суммы элементов, большего или меньшего. Этот подход разбирался в<a>курсе по массивам</a>.

2 reduce() устроен немного сложнее, чем map() и filter(), но, в целом, сохраняет общий подход с передачей функции. Реализуем код, находящий общее количество денег у группы людей. Здесь сразу прослеживается агрегация, нам нужно свести количество денег всех пользователей к одному значению:

3 Основное отличие агрегации от отображения и фильтрации в том, что результатом агрегации может быть любой тип данных - как примитивный, так и составной, например, массив. Кроме того, агрегация нередко подразумевает инициализацию начальным значением, которое принято называть аккумулятором. В примере выше она выполняется на строчке let sum = 0. Здесь переменная sum "аккумулирует" результат внутри себя.

4 Посмотрим еще один пример агрегации - группировку имён пользователей по возрасту:

5 В этом примере результатом агрегации становится объект, в свойствах которого записаны массивы. Этот результат в самом начале инициируется пустым объектом, а затем постепенно, на каждой итерации, "наполняется" нужными данными. Значение, которое накапливает результат агрегации, принято называть словом "аккумулятор". В примерах выше это sum и usersByAge.

6 Реализуем первый пример, используя reduce():

7 Метод reduce() принимает на вход два параметра - функцию-обработчик и начальное значение аккумулятора. Этот же аккумулятор возвращается наружу в качестве результата всей операции.

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

9 Второй пример с использованием reduce() выглядит так:

10 Код практически не изменился, за исключением того, что ушёл цикл и появился возврат аккумулятора из анонимной функции.

11 Разберем пошагово работу функции reduce(). В функцию передается колбек, который принимает два параметра acc и user. Чтобы лучше понять работу, нужно проследить чему равны значения этих параметров на каждой итерации:

12 <ol><li>На первой итерации acc равен пустому объекту, это начальное значение аккумулятора задается вторым параметром, users.reduce(cb, {}) - здесь вторым параметром передается пустой объект. Параметр user равен первому элементу массива, то есть { name: 'Petr', age: 4 }. В пустом объекте создается массив под ключом user.age и в этот массив добавляется текущее имя пользователя. В итоге acc становится равен объекту { 4: ['Petr'] }. Из функции возвращается acc - это значение будет аккумулятором на следующей итерации</li>

13 <li>На второй итерации acc равен значению, которое вернулось из предыдущей итерации, это объект { 4: ['Petr'] }. Параметр user равен второму элементу массива { name: 'Igor', age: 19 }. В аккумуляторе acc нет ключа с возрастом текущего пользователя, поэтому добавляется новый ключ и массив. После заполнения acc равен { 4: ['Petr'], 19: ['Igor'] }, этот объект возвращается из функции</li>

14 <li>На этой итерации acc равен объекту, вернувшемуся из прошлой итерации { 4: ['Petr'], 19: ['Igor'] }. Параметр user равен { name: 'Ivan', age: 4 }. Значение свойства user.age равно 4 - этот ключ уже имеется в аккумуляторе, поэтому новый ключ не создается, а текущий пользователь добавляется в существующий массив. В итоге аккумулятор равен объекту { 4: ['Petr', 'Ivan'], 19: ['Igor'] } и он возвращается из функции</li>

15 <li>Последняя итерация. Параметр acc равен { 4: ['Petr', 'Ivan'], 19: ['Igor'] }, а user равен { name: 'Matvey', age: 16 }. Ключа 16 в аккумуляторе нет, поэтому добавляется новый массив в ключ 16, в этот массив добавляется текущий пользователь. В итоге acc будет равен { 4: ['Petr', 'Ivan'], 16: ['Matvey'], 19: ['Igor'] }, этот объект возвращается и в итоге будет результатом работы всего редьюса, так как это последняя итерация</li>

16 </ol>reduce() - очень мощный метод. Формально, можно работать, используя только его, так как он может заменить и отображение, и фильтрацию. Но делать так не стоит. Агрегация управляет состоянием (аккумулятором) явно. Такой код всегда сложнее и требует больше действий. Поэтому, если задачу возможно решить отображением или фильтрацией, то так и нужно делать.

17 <h2>Как думать о редьюсе</h2>

18 Распишем алгоритм, который поможет правильно подступаться к задачам, в которых требуется редьюс. Представьте, что перед вами список курсов с уроками внутри них и вам нужно посчитать количество всех уроков. Например, такое может быть нужно для вычисления длительности программы обучения. На Хекслете подобные задачи встречаются регулярно.

19 Здесь мы видим два курса, в которых суммарно 5 уроков. Попробуем теперь высчитать это число программно. Первый вопрос, на который надо ответить, является ли данная операция агрегацией? Ответ - Да, так как мы сводим исходные данные, к какому-то вычисляемому результату. Дальше смотрим, чем является результат операции. В нашем случае это число, которое вычисляется как сумма уроков в каждом курсе. Значит начальным значением аккумулятора будет 0 (<a>тут можно освежить</a>). Теперь примерный алгоритм:

20 <ol><li>Инициализируем накапливаемый результат нулем</li>

21 <li>Обходим коллекцию курсов по одному<ul><li>Прибавляем к аккумулятору количество уроков в текущем курсе</li>

22 </ul></li>

23 </ol>Этот алгоритм будет идентичным в любом варианте решения, как через цикл, так и через редьюс:

24 <h2>Реализация</h2>

25 Напишем свою собственную функцию myReduce(), работающую аналогично методу массива reduce():