Основы редуктора Javascript

Один из самых сложных методов итератора для понимания на начальном этапе. Метод редуктора будет выполнять вычисления для каждой итерации массива, используя значение текущей итерации и результат предыдущей итерации.

Вариант использования 1: сумма всех чисел

Простым вариантом использования будет получение суммы всех чисел в массиве:

Поскольку первая итерация не имеет предыдущего значения, процесс фактически начнется с индекса 1. Таким образом, процесс итерации будет выглядеть так:

[0]: пропускает первый индекс
[1]: 1 + 5 = 6
[2] 6 + 3 = 9
[3]: 9 + 9 = 18
[4] 18 + 6 = 24
[5]: 24 + 2 = 26
[6] 26 + 4 = 30

Вариант использования 2: объединение значений нескольких объектов в новый объект

Используя более сложный пример, мы возьмем массив объектов, где каждый объект имеет id и framework, и вернем аналогичный объект, где id — это сумма всех других идентификаторов, а framework — это объединенная строка всех имен фреймворков:

Взгляните на это визуальное представление, чтобы понять ход процесса итерации:

Варианты использования 3 и 4: подсчет результатов опроса

Хорошо! давайте сосредоточимся на чем-то более вероятном, что произойдет в реальном мире. Допустим, у нас есть опрос людей, которые проголосовали за свой любимый фреймворк Javascript. Примером объекта голосования может быть:

{ name: "John" vote: "react" }

У нас есть массив этих объектов, и нам нужны две вещи:

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

Учитывая, что у нас есть 10 голосов, мы хотим вывести один объект, где каждый ключ — это имя фреймворка, за который проголосовали, а значение — это количество раз, за которое проголосовали:

Функция обратного вызова проверяет, повторяется ли имя фреймворка впервые. Если это так, то он создаст новый ключ с этим именем фреймворка и установит счетчик равным 1.

В противном случае он возьмет текущее состояние результатов предыдущей итерации, получит имя фреймворка, за которое проголосовали в текущем голосовании, и увеличит это значение на 1.

Учитывая, что у нас те же 10 голосов, на этот раз мы хотим вывести один объект, где каждый ключ является именем фреймворка, за который проголосовали, но значением является массив имен, которые проголосовали за него:

Заключение

Метод reduce в Javascript — один из самых сложных методов, к которому нужно привыкнуть, но он может быть очень мощным при использовании в правильных ситуациях. Термин reducer чаще всего можно услышать в контексте управления состоянием (например, Redux), главным образом потому, что это основной метод, который Redux использует для обновления своего состояния. Эту концепцию очень полезно знать, и она может применяться во многих различных ситуациях.

Документация разработчика Mozilla описывает reduce очень подробно, я бы рекомендовал ознакомиться с их документацией для более глубокого понимания метода:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Основы редуктора Javascript