Una guida al metodo Reduce In Javascript

di Josh Pitzalis

Il metodo di riduzione di JavaScript è uno dei capisaldi della programmazione funzionale. Esploriamo come funziona, quando si dovrebbe usare, e alcune delle cose interessanti che può fare.

Una riduzione di base

Usala quando: hai una serie di importi e vuoi aggiungerli tutti.,

const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11

Come usarlo:

• In questo esempio, Reduce accetta due parametri, il totale e l’importo corrente.
• Il metodo di riduzione scorre attraverso ogni numero nell’array proprio come farebbe in un ciclo for.
• Quando il ciclo inizia il valore totale è il numero all’estrema sinistra (29.76) e l’importo corrente è quello accanto ad esso (41.85).
• In questo particolare esempio, vogliamo aggiungere l’importo corrente al totale.,
• Il calcolo viene ripetuto per ogni importo nell’array, ma ogni volta che il valore corrente cambia al numero successivo nell’array, spostandosi a destra.
• Quando non ci sono più numeri rimasti nell’array, il metodo restituisce il valore totale.

La versione ES5 del metodo Reduce In JavaScript

Se non hai mai usato la sintassi ES6 prima, non lasciare che l’esempio sopra ti intimidisca., È esattamente come scrivere:

var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11

uso const invece di var e sostituiamo la parola function con un “grasso freccia” (=>), dopo i parametri, e si omette la parola “ritorno”.

Userò la sintassi ES6 per il resto degli esempi, poiché è più concisa e lascia meno spazio agli errori.

Trovare una media con il metodo Reduce In JavaScript

Invece di registrare la somma, è possibile dividere la somma per la lunghezza dell’array prima di restituire un valore finale.,

Il modo per farlo è sfruttando gli altri argomenti nel metodo reduce. Il primo di questi argomenti è l’indice. Molto simile a un ciclo for, l’indice si riferisce al numero di volte in cui il riduttore ha eseguito il loop sull’array. L’ultimo argomento è l’array stesso.

Mappa e filtra come Riduzioni

Se puoi usare la funzione riduci per sputare una media, puoi usarla come vuoi.,

Ad esempio, è possibile raddoppiare il totale o la metà di ciascun numero prima di aggiungerli insieme o utilizzare un’istruzione if all’interno del riduttore per aggiungere solo numeri maggiori di 10. Il mio punto è che il metodo Reduce In JavaScript ti dà un mini CodePen in cui puoi scrivere qualsiasi logica tu voglia. Ripeterà la logica per ogni importo nell’array e quindi restituirà un singolo valore.

Il fatto è che non devi sempre restituire un singolo valore. È possibile ridurre un array in un nuovo array.,

Ad esempio, consente di ridurre un array di importi in un altro array in cui ogni importo è raddoppiato. Per fare ciò dobbiamo impostare il valore iniziale per il nostro accumulatore su un array vuoto.

Il valore iniziale è il valore del parametro totale all’avvio della riduzione. Si imposta il valore iniziale aggiungendo una virgola seguita dal valore iniziale all’interno delle parentesi ma dopo le parentesi graffe (in grassetto nell’esempio seguente).

const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);

Negli esempi precedenti, il valore iniziale era zero, quindi l’ho omesso., Omettendo il valore iniziale, il totale sarà predefinito per la prima quantità nella matrice.

Impostando il valore iniziale su un array vuoto possiamo quindi spingere ogni importo nel totale. Se vogliamo ridurre un array di valori in un altro array in cui ogni valore è raddoppiato, dobbiamo spingere l’importo * 2. Quindi restituiamo il totale quando non ci sono più importi da spingere.

const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // 

Abbiamo creato un nuovo array in cui ogni importo è raddoppiato. Potremmo anche filtrare i numeri che non vogliamo raddoppiare aggiungendo un’istruzione if all’interno del nostro riduttore.,

Queste operazioni sono i metodi map e filter riscritti come metodo reduce.

Per questi esempi, avrebbe più senso usare map o filter perché sono più semplici da usare. Il vantaggio dell’utilizzo di reduce entra in gioco quando si desidera mappare e filtrare insieme e si hanno molti dati da esaminare.

Se concatenate la mappa e filtrate insieme, state facendo il lavoro due volte. Si filtra ogni singolo valore e quindi si mappano i valori rimanenti. Con reduce è possibile filtrare e quindi mappare in un unico passaggio.,

Usa map e filter ma quando inizi a concatenare molti metodi insieme ora sai che è più veloce ridurre i dati.

Creazione di un conteggio con il metodo Reduce In JavaScript

Usalo quando: hai una raccolta di articoli e vuoi sapere quanti di ogni articolo sono nella raccolta.

Per calcolare gli elementi in un array il nostro valore iniziale deve essere un oggetto vuoto, non un array vuoto come nell’ultimo esempio.

Poiché stiamo per restituire un oggetto, ora possiamo memorizzare coppie chiave-valore nel totale.,

fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})

Al nostro primo passaggio, vogliamo che il nome della prima chiave sia il nostro valore corrente e vogliamo dargli un valore di 1.

Questo ci dà un oggetto con tutti i frutti come chiavi, ognuno con un valore di 1. Vogliamo che la quantità di ogni frutto aumenti se si ripetono.

Per fare ciò, nel nostro secondo ciclo controlliamo se il nostro totale contiene una chiave con il frutto corrente del riduttore. Se non lo fa allora lo creiamo. Se lo fa, incrementiamo l’importo di uno.

fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});

Ho riscritto la stessa logica in modo più conciso in alto.,

Appiattimento di un array di array con il metodo Reduce In JavaScript

Possiamo usare reduce per appiattire quantità annidate in un singolo array.

Impostiamo il valore iniziale su un array vuoto e quindi concateniamo il valore corrente sul totale.

const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // 

Il più delle volte, le informazioni sono annidate in modi più complicati. Ad esempio, diciamo che vogliamo solo tutti i colori nella variabile di dati qui sotto.

const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];

Stiamo andando a passo attraverso ogni oggetto ed estrarre i colori. Lo facciamo indicando importo.c per ogni oggetto nella matrice., Quindi usiamo un ciclo forEach per spingere ogni valore nell’array nidificato in out total.

Se abbiamo solo bisogno di un numero univoco, possiamo verificare se il numero esiste già in totale prima di spingerlo.

Piping con Reduce

Un aspetto interessante del metodo reduce in JavaScript è che è possibile ridurre funzioni, numeri e stringhe.

Diciamo che abbiamo una raccolta di semplici funzioni matematiche. queste funzioni ci permettono di incrementare, decrementare, raddoppiare e dimezzare un importo.,

Per qualsiasi motivo, dobbiamo incrementare, quindi raddoppiare, quindi decrementare un importo.

È possibile scrivere una funzione che prende un input e restituisce (input + 1) * 2 -1. Il problema è che sappiamo che avremo bisogno di incrementare l’importo tre volte, quindi raddoppiarlo, quindi decrementarlo e quindi dimezzarlo ad un certo punto in futuro. Non vogliamo dover riscrivere la nostra funzione ogni volta, quindi useremo reduce per creare una pipeline.

Una pipeline è un termine utilizzato per un elenco di funzioni che trasformano un valore iniziale in un valore finale., La nostra pipeline consisterà delle nostre tre funzioni nell’ordine in cui vogliamo utilizzarle.

let pipeline = ;

Invece di ridurre una serie di valori riduciamo la nostra pipeline di funzioni. Questo funziona perché impostiamo il valore iniziale come l’importo che vogliamo trasformare.

const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3

Poiché la pipeline è un array, può essere facilmente modificata. Se vogliamo decrementare qualcosa tre volte, quindi raddoppiarlo, decrementarlo e dimezzarlo, allora modifichiamo semplicemente la pipeline.

var pipeline = ;

La funzione di riduzione rimane esattamente la stessa.,

Errori stupidi da evitare

Se non si passa un valore iniziale, reduce assumerà che il primo elemento nell’array sia il valore iniziale. Questo ha funzionato bene nei primi esempi perché stavamo sommando un elenco di numeri.

Se stai cercando di calcolare la frutta e ometti il valore iniziale, le cose diventano strane. Non inserire un valore iniziale è un errore facile da fare e una delle prime cose che dovresti controllare durante il debug.

Un altro errore comune è quello di dimenticare di restituire il totale. È necessario restituire qualcosa affinché la funzione riduci funzioni., Ricontrolla sempre e assicurati di restituire effettivamente il valore desiderato.

Strumenti, suggerimenti & Riferimenti

• Tutto in questo post è venuto da una fantastica serie di video su Introducinghead chiamato Introducing Reduce. Do a Mykola Bilokonsky pieno credito e gli sono grato per tutto ciò che ora so sull’utilizzo del metodo Reduce In JavaScript. Ho cercato di riscrivere molto di ciò che spiega con parole mie come un esercizio per comprendere meglio ogni concetto., Inoltre, è più facile per me fare riferimento a un articolo, al contrario di un video, quando ho bisogno di ricordare come fare qualcosa.
• L’MDN Riduce le etichette della documentazione quello che ho chiamato un totaleaccumulator. È importante sapere questo perché la maggior parte delle persone si riferirà ad esso come un accumulatore se si legge su di esso on-line. Alcune persone lo chiamano prev come nel valore precedente. Tutto si riferisce alla stessa cosa. Ho trovato più facile pensare a un totale quando stavo imparando a ridurre.,
• Se vuoi esercitarti con reduce ti consiglio di iscriverti a freeCodeCamp e completare il maggior numero di algoritmi intermedi possibile utilizzando reduce.
• Se le variabili ‘const’ nei frammenti di esempio sono nuove per te, ho scritto un altro articolo sulle variabili ES6 e perché potresti volerle usare.
• Ho anche scritto un articolo intitolato The Trouble With Loops che spiega come usare map() e filter () se sono nuovi per te.

Grazie per la lettura! Se vuoi essere avvisato quando scrivo un nuovo articolo inserisci la tua email qui.,

E se ti è piaciuto l’articolo, si prega di condividerlo sui social media in modo che altri possano trovarlo.