Förstår JavaScript Minska Med 5 Exempel

reduce() metod på JavaScript-array utför en ”reducer” – funktionen på everyelement i matrisen i ordning, passerar det returnerade värdet från föregående reducercall till nästa reducering samtal. Funktionenreduce() är en vanlig orsakav förvirring, men det kan också göra din kod mycket läsbar när den kombineras med andra funktionella programmeringsabstraktioner.,Här är 4 vanliga exempel och 1 inte så vanligt exempel som visar hur man använder reduce().

summera en rad siffror

de flestareduce() tutorials börjar med detta exempel: givet en rad siffror, beräkna summan. Så här sammanfattar du en array med en vanlig gammal for loop.,

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

Här är ett likvärdigt exempel med reduce():

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

reduce() – funktionens första 2 parametrar är en funktion reducer() ochan godtycklig reduce() – funktionens första 2 parametrar är en funktion reducer() ochan godtycklig initialValue. JavaScript anropar sedanreducer() på varjeelement i matrisen med ackumulatorvärdet som den första parametern.Ackumulatorn startar sominitialValue, och sedan använder JavaScript returnvalue för varjereduce() anrop som den nya ackumulatorn.,

Talk är billigt, visa mig koden. Så här är ett snabbt exempel på hur du mightimplement en förenklad reduce() funktion med for loopar.

summera en rad numeriska egenskaper

funktionenreduce() I sig är ofta mer förvirrande än hjälpsam.Om allt du behöver göra är att summera en rad siffror kan du vara betteroff med enfor – slinga., Men i kombination med andra matrismetoder somfilter() och map()börjarreduce() se mer tilltalande ut.

anta till exempel att du har en rad linjeobjekt, och du vill beräknasumman av varje linjeobjekttotal egendom.

här är ett sätt att lägga till linjeobjekten total medreduce():

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

det här fungerar, men är mindre sammansatt. Ett bättre alternativ är att förstmap() för att fåtotal.,

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

Varför är detta andra tillvägagångssätt bättre? Eftersom du kan abstrahera thereducer till en funktion sum(), och återanvända den var du än behöver sammanfatta en array.

det här är viktigt eftersom det, medan du tror att sumReducer() aldrig kommer att ändras, kommer det att göra det. Till exempel står inte ovanstående kod för det faktum att0.1 + 0.2 !== 0.3 I JavaScript. Detta är ett vanligt misstag vid beräkningpriser på ett tolkat språk. Binära flytande punkter är konstiga.,Så du behöver faktiskt runda:

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

reduce() gör det enkelt att återanvända logik somsumReducer() under hela din appusing funktion kedja. Så du kan ändra din logik en gång i stället för att söka igenom varjefor loop i din app.

hitta det maximala värdet

anta till exempel att du har en rad JavaScript-datum, och du vill hitta det senaste datumet.

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

ett tillvägagångssätt är att sortera matrisen och ta det sista elementet i sortedarray., Det fungerar, men är inte så effektivt som det kan vara, och sortering av en rad datum i JavaScript är inte trivialt.

istället kan du använda reduce() och göra din reducer tillbaka mestrecent datum hittades hittills.

gruppera värden

gav en rad objekt med enage egenskap:

const characters = ;

hur returnerar du en karta som innehåller hur många tecken som har en givenage? Till exempel skulle den korrekta utgången på ovanstående matris vara{ 29: 2, 59: 1 }.,

Så här kan du göra det med reduce().

Bonus: Promise Chaining

Antag att du har en rad async-funktioner som du vill utföra i serie.Det finns en icke-standard promise.series funktionFör detta, men du kan också göra det med reduce().

gå vidare

funktionenreduce() är ett kraftfullt verktyg. Genom att abstrahera filtersoch reduktorer kan du konsolidera vanliga uppgifter som”summera en rad siffror” till en separat funktion för enklare refactoring och torr kod.