Słowo „redukuj” dosłownie oznacza „zrobić coś mniejszego”. Jest to funkcjonalna koncepcja programowania, która stosuje funkcję przeciwko akumulatorowi i każdemu elementowi w tablicy, aby zredukować ją do pojedynczej wartości. Jest to bardzo potężna koncepcja i jest używana w tworzeniu skomplikowanych bibliotek i frameworków, takich jak Redux czy Ramda .

W JavaScript reduce jest dostępna jako metoda tablicowa. Metodę reduce stosuję w swojej pracy od dłuższego czasu. Zauważyłem jednak, że wielu moich przyjaciół i współpracowników ma trudności ze zrozumieniem i skutecznym stosowaniem tej metody. Dlatego zdecydowałem się napisać ten artykuł, aby wyjaśnić metodę redukcji w prostszy sposób. Ta potężna koncepcja może pomóc zoptymalizować kod i wdrożyć złożone systemy i logikę. Mamy nadzieję, że pomoże to większej liczbie osób właściwie to zrozumieć.

Zapomnijmy reducena razie o metodzie Array. Stworzymy własną reducefunkcję od podstaw, aby lepiej zrozumieć, co ona właściwie robi.

Rozbijanie rzeczy

Aby rozpocząć, podzielmy różne komponenty w funkcji redukującej .

• Akumulator — Jest to zmienna przechowująca wynik po każdym kroku redukcji. Stanie się również wejściem do następnego kroku.
• Reducer — Jest to funkcja, która pobiera akumulator i każdy element tablicy. Powinien zwrócić wartość akumulatora dla następnego kroku. Definiuje każdy krok w redukcji.
• Wartość początkowa — Jest to wartość akumulatora dla pierwszego kroku redukcji. Możesz to uznać za pewnego rodzaju wartość początkową. Ostateczny wynik redukcji zależy tylko od wartości początkowej i reduktora .
• Tablica wejściowa — nie ma potrzeby dalszych wyjaśnień z tym .

Będę używać TypeScript do budowania funkcji w tym artykule. Pozwoli mi to na użycie typów statycznych do lepszego zdefiniowania funkcji i ułatwi czytelnikom lepsze zrozumienie.

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

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

Rozważ prosty przykład redukcji — „Suma elementów w tablicy” . Zaimplementowanie tej logiki powinno być dość łatwe. Zróbmy to:

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);

Możemy teraz łatwo przepisać ten sam kod jako kombinację różnych komponentów reduce.

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);
}

Teraz możemy wykorzystać powyższe informacje do wykonania naszej reducefunkcji.

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;
}

Parametr reducer w metodzie reduce również przyjmuje indeks i tablicę wejściową jako argumenty, ale w istocie jest zaimplementowany w taki sam sposób, jak funkcja reduce , którą właśnie zbudowaliśmy.

Co następne?

Teraz jest coś, co możesz zrobić więcej, aby być naprawdę dobrym w używaniu redukcji, to ćwiczyć i próbować wdrażać złożone logiki redukcji. Niektóre z pozycji, które możesz wypróbować, to:

1. Napisz funkcję, która pobiera tablicę liczb i zwraca iloczyn wszystkich liczb.
2. Napisz funkcję, która pobiera tablicę łańcuchów i zwraca łączną liczbę znaków we wszystkich połączonych ciągach.
3. Napisz funkcję, która pobiera tablicę liczb i zwraca średnią (średnią) liczb.
4. Napisz funkcję, która pobiera tablicę obiektów z valuewłaściwością liczbową i zwraca sumę wszystkich valuewłaściwości.
5. Napisz funkcję, która pobiera tablicę łańcuchów znaków i zwraca najdłuższy ciąg znaków w tablicy.
6. Napisz funkcję, która pobiera tablicę liczb i zwraca największą liczbę z tablicy.
7. Napisz funkcję, która pobiera tablicę liczb i zwraca najmniejszą liczbę z tablicy.
8. Napisz funkcję, która pobiera tablicę obiektów z valuewłaściwością liczbową i zwraca średnią ze wszystkich valuewłaściwości.
9. Napisz funkcję, która pobiera tablicę obiektów z namewłaściwością i zwraca pojedynczy ciąg, który łączy wszystkie namewłaściwości oddzielone przecinkami.
10. Napisz funkcję, która pobiera tablicę liczb i zwraca nową tablicę zawierającą tylko liczby parzyste z oryginalnej tablicy.