Слово «уменьшить» буквально означает «сделать что-то меньше». Это концепция функционального программирования, которая применяет функцию к аккумулятору и каждому элементу массива, чтобы свести его к одному значению. Это очень мощная концепция, которая используется при разработке сложных библиотек и фреймворков, таких как Redux или Ramda .

В JavaScript сокращение доступно как метод массива. Я уже давно использую метод редукции в своей работе. Однако я заметил, что многие из моих друзей и коллег изо всех сил пытаются понять и эффективно использовать этот метод. Поэтому я решил написать эту статью, чтобы объяснить метод сокращения в более простых терминах. Эта мощная концепция может помочь оптимизировать код и реализовать сложные системы и логику. Надеюсь, это поможет большему количеству людей понять это правильно.

reduceДавайте пока забудем о методе Array . Мы создадим собственную reduceфункцию с нуля, чтобы лучше понять, что она на самом деле делает.

Разрушение вещей

Для начала давайте разберем различные компоненты функции сокращения .

• Аккумулятор — это переменная, которая хранит результат после каждого шага сокращения. Это также станет входом для следующего шага.
• Редуктор — это функция, которая принимает аккумулятор и каждый элемент массива. Он должен вернуть значение аккумулятора для следующего шага. Он определяет каждый шаг в сокращении.
• Начальное значение — это значение аккумулятора для первого шага сокращения. Вы можете рассматривать это как своего рода начальное значение. Конечный результат редукции зависит только от начального значения и редуктора .
• Входной массив — в этом нет необходимости в дополнительных пояснениях .

Я буду использовать TypeScript для создания функции в этой статье. Это позволит мне использовать статические типы для лучшего определения функции и поможет читателям лучше понять ее.

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
// TODO: Implement
}

Рассмотрим простой пример редукции — «Сумма элементов в массиве» . Для этого должно быть довольно легко реализовать логику. Давай сделаем это:

const arr = [1,2,3,4,5,6,7,8,9,10];

let sum = 0;

for (let num of arr) {
    sum = sum + num;
}

console.log(sum);

Теперь мы можем легко переписать один и тот же код в виде комбинации различных компонентов сокращения.

const arr = [1,2,3,4,5,6,7,8,9,10];
const initialValue = 0;
const reducer = (acc: number, ele: number) => acc + ele;

let acc = 0;

for (let ele of arr) {
    acc = reducer(acc, ele);
}

Теперь мы можем использовать приведенную выше информацию для завершения нашей reduceфункции.

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
    let acc = initialValue;
    for (let ele of arr) {
        acc = reducer(acc, ele);
    }
    return acc;
}

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

Что дальше?

Теперь есть кое-что, что вы можете сделать больше, чтобы действительно хорошо использовать сокращение, чтобы попрактиковаться и попытаться реализовать сложную логику сокращения. Некоторые из предметов, которые вы можете попробовать:

1. Напишите функцию, которая принимает массив чисел и возвращает произведение всех чисел.
2. Напишите функцию, которая принимает массив строк и возвращает общее количество символов во всех вместе взятых строках.
3. Напишите функцию, которая принимает массив чисел и возвращает среднее значение чисел.
4. Напишите функцию, которая принимает массив объектов с числовым valueсвойством и возвращает сумму всех valueсвойств.
5. Напишите функцию, которая принимает массив строк и возвращает самую длинную строку в массиве.
6. Напишите функцию, которая принимает массив чисел и возвращает максимальное число в массиве.
7. Напишите функцию, которая принимает массив чисел и возвращает минимальное число в массиве.
8. Напишите функцию, которая принимает массив объектов с числовым valueсвойством и возвращает среднее значение всех valueсвойств.
9. Напишите функцию, которая принимает массив объектов со nameсвойством и возвращает одну строку, объединяющую все nameсвойства, разделенные запятыми.
10. Напишите функцию, которая принимает массив чисел и возвращает новый массив, содержащий только четные числа из исходного массива.