Forstå JavaScript Reducere Med 5 Eksempler

reduce() metode på JavaScript arrays udfører en “reducer” – funktionen på everyelement array i orden, passerer det returnerer værdien fra den tidligere reducercall til det næste reducer opkald. Funktionen reduce() er en almindelig årsag til forvirring, men den kan også gøre din kode meget mere læsbar, når den kombineres med andre funktionelle programmeringsabstraktioner.,Her er 4 almindelige eksempler og 1 ikke-så-almindeligt eksempel, der viser, hvordan man bruger reduce().

opsummering af en række tal

de flestereduce()tutorials starter med dette eksempel: givet en række tal, Beregn summen. Sådan kan du opsummere et array med en almindelig gammel for loop.,

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

Her er et tilsvarende eksempel ved hjælp af reduce():

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

reduce() funktion er første 2 parametre er en funktion reducer() ogen vilkårlig initialValue. JavaScript kalder derefter reducer() på hvert element i arrayet med akkumulatorværdien som den første parameter.Akkumulatoren starter som initialValue, og derefter JavaScript bruger den returnvalue af hver reduce() opkald som ny akkumulator.,

Talk er billigt, Vis mig koden. Så her er et hurtigt eksempel på, hvordan du mæglergennemfør en forenklet reduce() funktion ved hjælp af for sløjfer.

opsummering af en række numeriske egenskaber

funktionenreduce() i sig selv er ofte mere forvirrende end nyttig.Hvis alt du skal gøre er at opsummere en række tal, kan du være bedre ved at bruge en for loop., Men, når det kombineres med andre array metoder somfilter() og map()reduce() begynder at se mere tiltalende.Antag for eksempel, at du har en række linjeelementer, og du vil beregnesummen af hvert linjeemne er total ejendom.

Her er en måde at tilføje op linjeposter total hjælp reduce():

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

Det virker, men er mindre composable. Et bedre alternativ er førstmap() for at få total.,

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

hvorfor er denne anden tilgang bedre? Fordi du kan abstrahere out thereducer i en funktion sum(), og genbruge det, hvor du har brug for at sumup et array.

Dette er vigtigt, fordi, mens du tror sumReducer() vil neverchange, det vil. For eksempel tager ovenstående kode ikke højde for det faktum, at0.1 + 0.2 !== 0.3 i JavaScript. Dette er en almindelig fejl ved beregningpriser på et fortolket sprog. Binære flydende punkter er underlige.,Så du er faktisk nødt til at runde:

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

reduce() gør det nemt at genbruge logik som sumReducer() hele din appusing funktion kæde. Så du kan ændre din logik en gang i stedet for at søge gennem hver for loop i din app.

Find den maksimale værdi

Antag for eksempel, at du har en række JavaScript-datoer, og du vilat finde den seneste dato.

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

en fremgangsmåde er at sortere arrayet og tage det sidste element i sortedarray., Det fungerer, men er ikke så effektivt, som det kunne være, og sortering af en række datoer i JavaScript er ikke-trivielt.

i stedet kan du bruge reduce() og få din reducer til at returnere mestnyeste dato fundet hidtil.

Gruppering Værdier

i Betragtning af et array af objekter med en age ejendommen:

const characters = ;

Hvordan kan du vende tilbage et kort, der indeholder, hvor mange tegn der har en givenage? For eksempel ville den korrekte output på ovenstående array være{ 29: 2, 59: 1 }.,

sådan kan du gøre det med reduce().

Bonus: Promise Chaining

Antag, at du har en række async-funktioner, som du vil udføre i serie.Der er en ikke-standard promise.series functionfor dette, men du kan også gøre dette med reduce().

Flytning på

reduce() funktion er et kraftfuldt værktøj. Ved at abstrahere filtreog reduktionsmidler kan du konsolidere almindelige opgaver som “opsummering af en række tal”i en separat funktion for lettere refactoring og DRY-er-kode.