La parola ridurre significa letteralmente “fare qualcosa di più piccolo”. È un concetto di programmazione funzionale che applica una funzione contro un accumulatore e ogni elemento in un array per ridurlo in un singolo valore. È un concetto molto potente e viene utilizzato nello sviluppo di librerie e framework complicati come Redux o Ramda .

In JavaScript reduce è disponibile come metodo di matrice. Uso il metodo reduce nel mio lavoro da molto tempo. Tuttavia, ho notato che molti dei miei amici e colleghi fanno fatica a comprendere e utilizzare questo metodo in modo efficace. Quindi, ho deciso di scrivere questo articolo per spiegare il metodo reduce in termini più semplici. Questo potente concetto può aiutare a ottimizzare il codice e implementare sistemi e logica complessi. Spero che questo aiuti più persone a capirlo correttamente.

Dimentichiamoci del reducemetodo Array per ora. Creeremo la nostra reducefunzione da zero per ottenere una migliore comprensione di ciò che effettivamente fa.

Rompere le cose

Per iniziare, analizziamo diversi componenti nella funzione di riduzione .

• Accumulatore : è una variabile che memorizza il risultato dopo ogni fase di riduzione. Diventerà anche l'input per il passaggio successivo.
• Riduttore : è una funzione che prende l'accumulatore e ogni elemento dell'array. Dovrebbe restituire il valore dell'accumulatore per il passaggio successivo. Definisce ogni passo in una riduzione.
• Valore iniziale — È il valore dell'Accumulatore per il primo passo di riduzione. Puoi considerarlo come una sorta di valore iniziale. Il risultato finale della riduzione dipende solo dal valore iniziale e dal riduttore .
• L'array di input : non c'è bisogno di ulteriori spiegazioni con questo .

Userò TypeScript per costruire la funzione in questo articolo. Questo mi consentirà di utilizzare i tipi statici per definire meglio la funzione e aiutare i lettori a comprendere meglio.

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

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

Considera un semplice esempio di riduzione: "Somma di elementi in un array" . Dovrebbe essere abbastanza facile implementare la logica per questo. Facciamolo:

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

Ora possiamo facilmente riscrivere lo stesso codice come combinazione di diversi componenti di 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);
}

Ora possiamo utilizzare le informazioni di cui sopra per completare la nostra reducefunzione.

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

Il parametro reducer nel metodo reduce accetta anche l'indice e l' array di input come argomenti, ma in sostanza è implementato allo stesso modo della funzione reduce che abbiamo appena creato.

Cosa succederà?

Ora, ci sono cose che puoi fare di più per essere davvero bravo a usare la riduzione è esercitarti e provare a implementare complesse logiche di riduzione. Alcuni degli elementi che puoi provare sono:

1. Scrivi una funzione che prenda un array di numeri e restituisca il prodotto di tutti i numeri.
2. Scrivete una funzione che prenda un array di stringhe e restituisca il numero totale di caratteri in tutte le stringhe combinate.
3. Scrivete una funzione che prenda un array di numeri e restituisca la media (media) dei numeri.
4. Scrivete una funzione che prenda un array di oggetti con una valueproprietà numerica e restituisca la somma di tutte le valueproprietà.
5. Scrivete una funzione che prenda un array di stringhe e restituisca la stringa più lunga dell'array.
6. Scrivete una funzione che prenda un array di numeri e restituisca il numero massimo nell'array.
7. Scrivete una funzione che prenda un array di numeri e restituisca il numero minimo nell'array.
8. Scrivete una funzione che prenda un array di oggetti con una valueproprietà numerica e restituisca la media di tutte le valueproprietà.
9. Scrivete una funzione che prenda un array di oggetti con una nameproprietà e restituisca una singola stringa che concatena tutte le nameproprietà, separate da virgole.
10. Scrivete una funzione che prenda un array di numeri e restituisca un nuovo array con solo i numeri pari dell'array originale.