En Guide Til at Reducere Metode I Javascript

af Josh Pitzalis

JavaScript ‘ s reduceringsmetode er en af hjørnestenene i funktionel programmering. Lad os undersøge, hvordan det fungerer, hvornår du skal bruge det, og nogle af de seje ting, det kan gøre.

en grundlæggende reduktion

brug den, når: du har en række beløb, og du vil tilføje dem alle sammen.,

const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11

Sådan bruges det:

• i dette eksempel accepterer reducer to parametre, det samlede og det aktuelle beløb.
• reduktionsmetoden cykler gennem hvert nummer i arrayet, ligesom det ville gøre i en for-loop.
• når sløjfen starter, er den samlede værdi tallet længst til venstre (29.76), og det aktuelle beløb er det ved siden af (41.85).
• i dette særlige eksempel ønsker vi at tilføje det aktuelle beløb til det samlede beløb.,
• beregningen gentages for hvert beløb i arrayet, men hver gang den aktuelle værdi ændres til det næste nummer i arrayet, bevæger sig til højre.
• når der ikke er flere tal tilbage i arrayet, returnerer metoden den samlede værdi.

ES5-versionen af Reduceringsmetoden i JavaScript

Hvis du aldrig har brugt ES6-syntaks før, skal du ikke lade eksemplet ovenfor skræmme dig., Det er præcis det samme som at skrive:

var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11

Vi bruger const i stedet for var og vi erstatte ordet function med en “tyk pil” (=>) efter de parametre, og vi udelader ordet ‘vende tilbage’.

Jeg bruger ES6-syntaks til resten af eksemplerne, da det er mere kortfattet og giver mindre plads til fejl.

Find et gennemsnit med Reduktionsmetoden i JavaScript

i stedet for at logge summen, kan du dele summen med længden af arrayet, før du returnerer en endelig værdi.,

måden at gøre dette på er ved at drage fordel af de andre argumenter i reduceringsmetoden. Den første af disse argumenter er indekset. Meget som en for-loop, indekset refererer til det antal gange reduceren har sløjfet over arrayet. Det sidste argument er selve arrayet.

kort og filtrer som reduktioner

Hvis du kan bruge reducer-funktionen til at spytte et gennemsnit ud, kan du bruge det som du vil.,for eksempel kan du fordoble det samlede antal eller halvdelen af hvert nummer, før du tilføjer dem sammen, eller brug en if-sætning inde i reduceren til kun at tilføje tal, der er større end 10. Min pointe er, at Reducere Metode I JavaScript giver dig en mini CodePen, hvor du kan skrive, hvad logik, du ønsker. Det vil gentage logikken for hvert beløb i arrayet og derefter returnere en enkelt værdi.

sagen er, at du ikke altid behøver at returnere en enkelt værdi. Du kan reducere et array til et nyt array.,

for eksempel, kan reducere en vifte af beløb i en anden Matri., hvor hvert beløb fordobles. For at gøre dette skal vi indstille startværdien for vores akkumulator til et tomt array.

den oprindelige værdi er værdien af den samlede parameter, når reduktionen starter. Du indstiller den oprindelige værdi ved at tilføje et komma efterfulgt af din oprindelige værdi inde i parenteserne, men efter de krøllede seler (fed i eksemplet nedenfor).

const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);

i tidligere eksempler var den oprindelige værdi nul, så jeg udeladte den., Ved at udelade den oprindelige værdi, vil den samlede standard til det første beløb i arrayet.

Ved at indstille startværdien til et tomt array kan vi derefter skubbe hvert beløb ind i det samlede beløb. Hvis vi ønsker at reducere en række værdier til en anden Matri., hvor hver værdi fordobles, skal vi skubbe mængden * 2. Så returnerer vi det samlede beløb, når der ikke er flere beløb at skubbe.

const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // 

Vi har oprettet et nyt array, hvor hvert beløb fordobles. Vi kunne også filtrere ud tal, vi ikke ønsker at fordoble ved at tilføje en if-erklæring inde i vores reducer.,

disse operationer er kort-og filtermetoderne omskrevet som en reduceringsmetode.

for disse eksempler ville det være mere fornuftigt at bruge kort eller filter, fordi de er enklere at bruge. Fordelen ved at bruge reduce kommer i spil, når du vil kortlægge og filtrere sammen, og du har en masse data at gå over.

Hvis du kæde kort og filtrere sammen du gør arbejdet to gange. Du filtrerer hver enkelt værdi, og så kortlægger du de resterende værdier. Med reduce kan du filtrere og derefter kortlægge i et enkelt pass.,

Brug kort og filter, men når du begynder at kæde mange metoder sammen, ved du nu, at det er hurtigere at reducere dataene i stedet.

oprettelse af et tal med reducer-metoden i JavaScript

brug det, når: du har en samling af varer, og du vil vide, hvor mange af hvert element der er i samlingen.

for at tælle elementer i et array skal vores oprindelige værdi være et tomt objekt, ikke et tomt array som det var i det sidste eksempel.

da vi skal returnere et objekt, kan vi nu gemme nøgleværdipar i det samlede antal.,

fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})

på vores første pass ønsker vi, at navnet på den første nøgle skal være vores nuværende værdi, og vi vil give den en værdi på 1.

dette giver os et objekt med al frugten som nøgler, hver med en værdi på 1. Vi ønsker, at mængden af hver frugt skal stige, hvis de gentager.

for at gøre dette kontrollerer vi på vores anden sløjfe, om vores samlede indeholder en nøgle med reducerens aktuelle frugt. Hvis det ikke gør det, skaber vi det. Hvis det gør det, øger vi beløbet med en.

fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});

Jeg omskrev nøjagtig samme logik i en mere kortfattet måde op toppen.,

udfladning af en række arrays med Reduktionsmetoden i JavaScript

Vi kan bruge reduce til at flade indlejrede mængder i et enkelt array.

vi indstiller startværdien til et tomt array og sammenkæder derefter den aktuelle værdi til det samlede antal.

const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // 

oftere end ikke indlejres information på mere komplicerede måder. For eksempel, lad os sige, at vi bare vil have alle farverne i data variablen nedenfor.

const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];

Vi går gennem hvert objekt og trækker farverne ud. Vi gør dette ved at pege beløb.c for hvert objekt i arrayet., Vi bruger derefter en forEach loop til at skubbe hver værdi i det indlejrede array til ud i alt.

Hvis vi kun har brug for unikt nummer, kan vi kontrollere for at se det antal, der allerede findes i alt, før vi skubber det.

rør med Reduce

et interessant aspekt af reduce-metoden i JavaScript er, at du kan reducere overfunktioner såvel som tal og strenge.

lad os sige, at vi har en samling af enkle matematiske funktioner. disse funktioner giver os mulighed for at forøge, formindske, fordoble og halvere et beløb.,

af en eller anden grund er vi nødt til at forøge, derefter fordoble og derefter reducere et beløb.

Du kan skrive en funktion, der tager et input, og returnerer (input + 1) * 2 -1. Problemet er, at vi ved, at vi bliver nødt til at forøge beløbet tre gange, derefter fordoble det, derefter formindske det og derefter halvere det på et tidspunkt i fremtiden. Vi ønsker ikke at skulle omskrive vores funktion hver gang, så vi vil bruge reduce til at oprette en pipeline.

en pipeline er et udtryk, der bruges til en liste over funktioner, der omdanner en startværdi til en endelig værdi., Vores rørledning vil bestå af vores tre funktioner i den rækkefølge, vi ønsker at bruge dem.

let pipeline = ;

i stedet for at reducere en række værdier reducerer vi over vores pipeline af funktioner. Dette fungerer, fordi vi indstiller den oprindelige værdi som det beløb, vi vil transformere.

const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3

fordi rørledningen er en Matri., kan den let ændres. Hvis vi vil reducere noget tre gange, så fordoble det , reducere det og halvere det, så ændrer vi bare rørledningen.

var pipeline = ;

reducer-funktionen forbliver nøjagtig den samme.,

dumme fejl at undgå

Hvis du ikke passerer en indledende værdi, vil reduce antage, at det første element i dit array er din oprindelige værdi. Dette fungerede fint i de første par eksempler, fordi vi tilføjede en liste over tal.

Hvis du forsøger at tælle frugt, og du udelader den oprindelige værdi, bliver tingene underlige. Ikke at indtaste en indledende værdi er en let fejl at gøre, og en af de første ting, du bør tjekke, når debugging.

en anden almindelig fejl er at glemme at returnere summen. Du skal returnere noget for at reducere funktionen til at arbejde., Dobbelttjek altid, og sørg for, at du faktisk returnerer den ønskede værdi.

Værktøjer, Tips & Referencer

• Alt i dette indlæg kom fra en fantastisk video serie om egghead kaldet Indføre Reducere. Jeg giver Mykola Bilokonsky fuld kredit, og jeg er taknemmelig for ham for alt, hvad jeg nu ved om at bruge Reduce-metoden i JavaScript. Jeg har forsøgt at omskrive meget af det, han forklarer med mine egne ord som en øvelse for bedre at forstå hvert koncept., Det er også lettere for mig at henvise til en artikel i modsætning til en video, når jeg skal huske, hvordan man gør noget.
• MDN Reducere dokumentation etiketter, hvad jeg kaldte en total accumulator. Det er vigtigt at vide dette, fordi de fleste mennesker vil henvise til det som en akkumulator, hvis du læser om det online. Nogle kalder det prev som i tidligere værdi. Det hele refererer til den samme ting. Jeg fandt det lettere at tænke på en total, da jeg lærte reducere.,
• hvis du gerne vil øve dig på at bruge reduce, anbefaler jeg, at du tilmelder dig freeCodeCamp og afslutter så mange af de mellemliggende algoritmer, som du kan bruge reduce.
• hvis’ const ‘ – variablerne i eksemplet uddrag er nye for dig, skrev jeg en anden artikel om ES6-variabler, og hvorfor du måske vil bruge dem.
• jeg skrev også en artikel kaldet The Trouble Withith Loops, der forklarer, hvordan man bruger kort() og filter (), hvis de er nye for dig.

tak for læsning! Hvis du gerne vil have besked, når jeg skriver en ny artikel, skal du indtaste din e-mail her.,

og hvis du kunne lide artiklen, skal du dele den på sociale medier, så andre kan finde den.