Korrekt JavaScript Redusere Med 5 Eksempler

reduce() metode på JavaScript matriser utfører en «redusering» – funksjonen på everyelement av tabellen i orden, passerer returverdien fra forrige reducercall til neste redusering samtale. reduce() funksjon er en vanlig causeof forvirring, men det kan også gjøre koden din mye mer leselig når den kombineres med annen funksjonell programmering abstraksjoner.,Her er 4 vanlige eksempler og 1 som ikke er så vanlig eksempel som viser hvordan du bruker reduce().

Summere en rekke Tall

de Fleste reduce() tutorials starte med dette eksempel: gitt en rekke tall , beregne summen. Her er hvordan du kan oppsummere en matrise med en vanlig gammel for repeterende.,

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

Her er et tilsvarende eksempel ved hjelp av reduce():

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

reduce() funksjon er 2 første parametrene er en funksjon reducer() andan vilkårlig initialValue. JavaScript kaller reducer() på eachelement av tabellen med akkumulator verdi som den første parameteren.Akkumulatoren starter som initialValue, og trykk deretter JavaScript bruker returnvalue av hver reduce() anrop som ny akkumulator.,

Talk er billige, og vis meg-koden. Så her er en rask eksempel på hvordan du mightimplement en forenklet reduce() funksjon ved hjelp av for loops.

Summere en rekke Numeriske Egenskaper

reduce() funksjon i seg selv er ofte mer forvirrende enn forenklende.Hvis alt du trenger å gjøre er å oppsummere en rekke tall, du kan være betteroff ved hjelp av en for repeterende., Men, når kombinert med andre utvalg betalingsmetoder, som for eksempelfilter() og map(),reduce() starter ser mer tiltalende.

For eksempel, tenk at du har en rekke artikler, og du vil calculatethe summen av hver linje elementet total eiendom.

Her er en måte å legge opp artiklene total med reduce():

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

Dette fungerer, men er mindre composable. Et bedre alternativ er å førstmap() for å få total.,

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

Hvorfor er dette andre tilnærmingen bedre? Fordi du kan abstrakt ut thereducer inn en funksjon sum() og bruke den når du trenger å sumup en matrise.

Dette er viktig fordi, mens du tror sumReducer() vil neverchange, det vil det. For eksempel koden ovenfor ikke konto for det faktum at0.1 + 0.2 !== 0.3 i JavaScript. Dette er en vanlig feil når calculatingprices i en interpretted språk. Binære flytende poeng er rare.,Så du faktisk trenger for å runde:

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

reduce() gjør det enkelt å gjenbruke logikk som sumReducer() hele appusing funksjon kjeding. Så du kan endre din logikk når snarere enn searchingthrough hver for loop i appen din.

Finn den Maksimale Verdien

For eksempel, tenk at du har en rekke JavaScript-datoer, og du wantto finne de mest nyere dato.

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

En tilnærming er å sortere tabellen og ta det siste elementet i sortedarray., Det fungerer, men er ikke så effektiv som den kunne bli, og sortere en array av datoer i JavaScript er ikke-trivielt.

i Stedet, kan du bruke reduce() og gjøre din redusering tilbake mostrecent dato som er funnet så langt.

Gruppering Verdier

Gitt en rekke objekter med et age eiendom:

const characters = ;

Hvordan du returnerer et kart som inneholder hvor mange tegn du har en gittage? For eksempel, riktig utgang på ovenstående matrise ville være{ 29: 2, 59: 1 }.,

Her er hvordan du kan gjøre det med reduce().

– Bonus: Lover du Lenker

Tenk deg at du har et utvalg av asynkron funksjoner som du ønsker å kjøre i serien.Det er en ikke-standard promise.series functionfor dette, men du kan også gjøre dette med reduce().

du går På

reduce() funksjon er et kraftig verktøy. Ved abstracting ut filtersand reduksjonsgir, kan du konsolidere vanlige oppgaver, som for eksempel «å summere en rekke tall»i en egen funksjon for enklere refactoring og TØRR-er-koden.