av Josh Pitzalis
JavaScript er å redusere metoden er en av hjørnesteinene i funksjonell programmering. La oss se hvordan det fungerer, og når du bør bruke den, og noen av de kule tingene den kan gjøre.
En Grunnleggende Reduksjon
Bruke den når: Du har en rekke beløp, og du vil legge dem opp alle sammen.,
const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11Hvordan man bruker:
- I dette eksempelet, Redusere aksepterer to parametre, den totale og de gjeldende beløp.
- for å redusere metoden går gjennom hvert tall i array mye som det ville gjort i en for-løkke.
- Når løkken starter den totale verdien er antall helt til venstre (29.76) og hvor mye er den neste til det (41.85).
- I dette eksempelet ønsker vi å legge til den aktuelle beløpet til total.,
- beregningen gjentas for hvert beløp i tabellen, men hver gang den aktuelle verdien endringer til neste nummer i rekken, flytte til høyre.
- Når det er ingen tall i matrisen metoden returnerer den totale verdien.
Den ES5 versjon av Redusere Metode I JavaScript
Hvis du aldri har brukt ES6 syntaks før, ikke la eksemplet ovenfor skremme deg., Det er akkurat det samme som å skrive:
var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11Vi bruke const i stedet for var og vi erstatte ordet function med en «fett pil» (=>) etter parametre, og vi utelater ordet «gå tilbake».
jeg vil bruke ES6 syntaks for resten av eksempler, siden det er mer konsis og etterlater mindre rom for feil.
å Finne et Gjennomsnitt med det Redusere Metode I JavaScript
i Stedet for å logge summen, du kunne dele summen av lengden av tabellen før du returnerer en endelig verdi.,
Den måten å gjøre dette på er ved å benytte deg av de andre argumentene i å redusere metode. Den første av disse argumentene er indeksen. Mye som en for-løkke, som indeksen refererer til antall ganger reducer har en løkke over tabellen. Det siste argumentet er matrisen i seg selv.
Kart og Filter som Reduksjoner
Hvis du kan bruke den til å redusere funksjonen for å spytte ut en gjennomsnittlig deretter kan du bruke det noen måte du ønsker.,
For eksempel, du kan doble summen, eller halvparten av hvert nummer før du legger dem sammen, eller bruke en if-setning inne i redusering å bare legge til tall som er større enn 10. Poenget mitt er at å Redusere Metode I JavaScript gir deg en mini CodePen hvor du kan skrive hva logikk du vil. Det vil gjenta logikk for hvert beløp i tabellen og deretter gå tilbake til en enkelt verdi.
saken er, du trenger ikke alltid å gå tilbake til en enkelt verdi. Du kan redusere en tabell inn i et nytt utvalg.,
For eksempel, kan redusere en rekke beløp i en annen matrise hvor hver mengden er doblet. For å gjøre dette trenger vi for å angi den første verdi for våre akkumulator til en tom tabell.
Den første verdien er den verdien av den totale parameter når reduksjonen starter. Du stiller inn den innledende verdi ved å legge til et komma etterfulgt av den første verdien i parentes men etter krøllparentes (uthevet i eksemplet nedenfor).
const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);I tidligere eksempler, den første verdien er null, så jeg utelatt det., Ved å utelate den første verdien, vil summen standard til den første summen i tabellen.
Ved å sette den første verdien til en tom matrise vi kan og trykk deretter hvert beløp i sum. Hvis vi ønsker å redusere en rekke verdier i en annen matrise hvor hver verdi er doblet, vi trenger å presse beløp * 2. Da har vi tilbake den totale når det ikke er flere beløp for å presse.
const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // Vi har opprettet en ny matrise der hver mengden er doblet. Vi kan også filtrere ut tall vi ikke ønsker å doble ved å legge til en if-setning inne i våre redusering.,
Disse operasjonene er kartet og filter metoder omskrevet som et redusere metode.
For disse eksemplene, ville det være mer fornuftig å bruke kartet eller filtrere fordi de er enklere å bruke. Fordelen med å bruke redusere kommer inn i bildet når du ønsker å map og filter sammen, og du har mye data å gå over.
Hvis du kjeden map og filter sammen du er i å gjøre jobben to ganger. Du filtrere hver enkelt verdi og deretter kan du kartlegge gjenværende verdier. Med redusere du kan filtrere og deretter kart i en enkel passering.,
Bruke map og filter, men når du starter kjeding massevis av metoder sammen du vet nå at det er raskere å redusere data i stedet.
Opprette en Oversikt med Redusere Metode I JavaScript
Bruke den når: Du har en samling av elementer og du ønsker å vite hvor mange av hvert element er den i samlingen.
Å samle elementer i en matrise vår første verdien må være et tomt objekt, ikke en tom matrise som det var i forrige eksempel.
Siden vi kommer til å være tilbake et objekt vi kan nå lagre nøkkel / verdi-par i sum.,
fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})På vår første pass, vi vil navnet på den første nøkkelen til vår nåværende verdi og vi ønsker å gi den en verdi av 1.
Dette gir oss et objekt med all frukten som nøkler, hver med en verdi av 1. Vi vil mengden av hver frukt for å øke hvis de gjentar.
for Å gjøre dette, på våre andre loop vi sjekke om vår totale inneholde en nøkkel med gjeldende frukt redusering. Hvis det ikke så lager vi det. Hvis den gjør det så vi økning i mengden av ett.
fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});jeg skrev nøyaktig samme logikk på en mer kortfattet måte opp toppen.,
Utflating av en rekke matriser med å Redusere Metode I JavaScript
Vi kan bruke for å redusere flate nestede beløp til en enkelt matrise.
Vi satt den første verdien til en tom tabell og deretter sette sammen den aktuelle verdien til total.
const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // Mer ofte enn ikke, er informasjon som er nestet i mer kompliserte måter. For eksempel, la oss si at vi bare vil ha alle fargene i data variabel nedenfor.
const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];Vi kommer til å gå gjennom hvert objekt og trekk ut farger. Vi gjør dette ved å peke beløp.c for hvert objekt i tabellen., Så bruker vi en forEach-løkke til å presse hver verdi i den nestede array inn ut total.
Hvis vi bare må unikt nummer så vi kan sjekke for å se om nummer som allerede eksisterer i sum før vi skyver det.
Rør med å Redusere
Et interessant aspekt av å redusere metode i JavaScript, er at du kan redusere over funksjoner samt tall og strenger.
La oss si at vi har en samling av enkle matematiske funksjoner. disse funksjonene tillater oss å tilvekst, minsk, doble og halvere beløpet.,
uansett grunn, vi trenger å økning, deretter doble, så minsk et beløp.
Du kan skrive inn en funksjon som tar en inngang, og returnerer (inngang + 1) * 2 -1. Problemet er at vi vet at vi kommer til å trenge for å øke beløpet tre ganger, og deretter dobbeltklikker du den, og deretter redusere den, og deretter halvere det på noe tidspunkt i fremtiden. Vi ønsker ikke å ha for å omskrive vår funksjon hver gang så vi kommer til å bruke redusere for å opprette en rørledning.
En rørledning er et begrep som brukes for en liste over funksjoner som forvandler noen innledende verdi til en endelig verdi., Våre rørledningen vil bestå av våre tre funksjoner i den rekkefølgen vi ønsker å bruke dem.
let pipeline = ;i Stedet for å redusere en rekke verdier vi redusere over våre rørledning av funksjoner. Dette fungerer fordi vi satt den første verdien i det beløpet som vi ønsker å forandre.
const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3Fordi rørledning er en matrise, er det lett kan endres. Hvis vi ønsker å øke noe tre ganger, og deretter dobbeltklikker du den, minsk det , og halvere det så vi bare endre rørledningen.
var pipeline = ;for å redusere funksjonen forblir akkurat det samme.,
Dumme Feil å unngå
Hvis du ikke passere i en initial verdi, reduserer du vil anta at det første elementet i gruppen er din opprinnelige verdi. Dette fungerte fint i de første par eksempler fordi vi var å legge opp en liste med tall.
Hvis du prøver å samle opp frukt, og du la ut den første verdien, så det blir rart. Å ikke angi en startverdi er en enkel feil å gjøre, og en av de første tingene du bør sjekke når debugging.
en Annen vanlig feil er å glemme å returnere totalt. Du må returnere noe for å redusere funksjonen til å fungere., Alltid dobbeltsjekke og sørg for at du faktisk returnerer den verdien du ønsker.
Verktøy, Tips & Referanser
- Alt i dette innlegget kom fra en fantastisk video-serie på egghead kalles å Innføre Redusere. Jeg gir Mykola Bilokonsky full kreditt og jeg takker ham for alt det jeg vet nå om å bruke Redusere Metode I JavaScript. Jeg har prøvd å skrive om mye av det han forklarer i mitt eget ord som en øvelse for å bedre forstå hvert konsept., Også, det er lettere for meg å referere til en artikkel, i motsetning til en video, når jeg trenger å huske hvordan noe skal gjøres.
- MDN Redusere dokumentasjon etiketter hva jeg har kalt en total
accumulator. Det er viktig å vite dette fordi de fleste mennesker vil se det som en akkumulator hvis du lese om det på nettet. Noen kaller detprevsom i forrige verdien. Det viser alle til det samme. Jeg fant det lettere å tenke på en total da jeg var lærer redusere., - Hvis du ønsker å trene på å bruke redusere jeg anbefaler at du registrerer deg for å freeCodeCamp og fullføre så mange av de mellomliggende algoritmer som du kan bruke til å redusere.
- Hvis ‘const’ variabler i eksempel tekstutdrag er nytt for deg, jeg skrev en artikkel om ES6 variabler og hvorfor du ønsker kanskje å bruke dem.
- jeg skrev også en artikkel kalt Problemer Med Løkker som forklarer hvordan å bruke kartet() og filter() hvis du er ny til deg.
Takk for at du leser! Hvis du ønsker å bli varslet når jeg skriver en ny artikkel kan du skriv inn din e-post her.,
Og hvis du likte denne artikkelen kan du dele den på sosiale medier, slik at andre kan finne det.