Înțeleg JavaScript Reduce Cu 5 Exemple

reduce() metoda de matrice JavaScript execută un „reductor” funcția pe everyelement de matrice în ordine, trece valoarea returnată de cel anterior reducercall la următoarea reductor de apel. Funcția reduce() este o cauză comună de confuzie, dar poate face și codul dvs. mult mai lizibil atunci când este combinat cu alte abstracții de programare funcțională.,Aici sunt 4 Exemple comune și 1 exemplu nu-așa-comune, care demonstrează modul de utilizare reduce().

Însumând o Serie de Numere

reduce() tutoriale începe cu acest exemplu: având în vedere o serie de numere , a calcula suma. Iată cum s-ar putea rezuma o matrice cu un simplu vechi for buclă.,

function sum(arr) { let sum = 0; for (const val of arr) { sum += val; } return sum;}sum(); // 16

Aici e un echivalent exemplu folosind reduce():

function sum(arr) { const reducer = (sum, val) => sum + val; const initialValue = 0; return arr.reduce(reducer, initialValue);}sum(); // 16

reduce() funcția primele 2 parametri sunt o funcție reducer() andan arbitrare initialValue. JavaScript apelează apoi reducer() pe fiecareelement al matricei cu valoarea acumulatorului ca prim parametru.Acumulator începe ca initialValue, și apoi JavaScript folosește returnvalue de fiecare reduce() suna ca noul acumulator.,

Talk este ieftin, arată-mi codul. Deci, aici e un exemplu de cum ai mightimplement simplificată reduce() funcția folosind for bucle.

însumarea unui tablou de proprietăți numerice

funcția reduce() în sine este adesea mai confuză decât utilă.Dacă tot ce trebuie să faceți este să însumați o serie de numere, s-ar putea să fiți mai buni folosind o buclă for., Dar, atunci când sunt combinate cu alte matrice metode, cum ar fifilter() și map(),reduce() începe să pară mai atrăgătoare.

de exemplu, să presupunem că aveți o serie de elemente de linie și doriți să calculațisuma fiecărui element de linie total proprietate.

Aici e un mod de a adăuga până la linia elemente total cu ajutorul reduce():

lineItems.reduce((sum, li) => sum + li.total, 0); // 17.5

Aceasta funcționează, dar este mai puțin composable. O alternativă mai bună este să mai întâimap()pentru a obține total.,

lineItems.map(li => li.total).reduce((sum, val) => sum + val, 0);

De ce este această a doua abordare mai bună? Pentru că puteți abstract afară thereducer într-o funcție sum(), și refolosirea-l ori de câte ori aveți nevoie pentru a sumup-o matrice.

Acest lucru este important deoarece, în timp ce crezi că sumReducer() va neverchange, se va. De exemplu, codul de mai sus nu ține cont de faptul că0.1 + 0.2 !== 0.3 în JavaScript. Aceasta este o greșeală obișnuită atunci când calculațiprețurile într-o limbă interpretată. Punctele plutitoare binare sunt ciudate.,Deci tu de fapt ai nevoie să-rotund:

const { round } = require('lodash');function sumReducer(sum, val) { // Round to 2 decimal places. return _.round(sum + val, 2);}

reduce() îl face ușor pentru reutilizarea de logica ca sumReducer() tot parcursul appusing funcție de înlănțuirea. Deci, puteți schimba logica O dată, mai degrabă decât searchingthrough fiecare for buclă în aplicația.

găsiți valoarea maximă

de exemplu, să presupunem că aveți o serie de date JavaScript și dorițipentru a găsi cea mai recentă dată.

const dates = .map(v => new Date(v));

O abordare este de a sorta matrice și ia ultimul element din sortedarray., Asta funcționează, dar nu este la fel de eficient ca ar putea fi, și sortarea o serie de date în JavaScript este non-trivial.

În schimb, puteți utiliza reduce() și puteți face reductorul să returneze data cea mai recentă găsită până acum.

Gruparea Valori

Având în vedere o serie de obiecte cu un age proprietăți:

const characters = ;

Cum ai întoarce o hartă care conține câte personaje au o datage? De exemplu, ieșirea corectă pe matricea de mai sus ar fi{ 29: 2, 59: 1 }.,

Iată cum puteți face acest lucru cu reduce().să presupunem că aveți o serie de funcții asincrone pe care doriți să le executați în serie.Există o funcție non-standard promise.series pentru aceasta, dar puteți face acest lucru și cu reduce().

Mutarea pe

reduce() funcția este un instrument puternic. Prin abstractizarea filtrelor și reductoarelor, puteți consolida sarcini comune precum”însumarea unei matrice de numere” într-o funcție separată pentru refactorizare mai ușoară și cod uscat.