av Josh Pitzalis

bildkredit till Karthik Srinivas. Tack Karthik.

JavaScript ’ s reduce method är en av hörnstenarna i funktionell programmering. Låt oss utforska hur det fungerar, när du ska använda den, och några av de coola saker det kan göra.

en grundläggande minskning

använd den när: du har en mängd belopp och du vill lägga till dem alla.,

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

hur man använder det:

  • I det här exemplet accepterar Reduce två parametrar, totalt och aktuellt belopp.
  • reduce method cykler genom varje nummer i matrisen ungefär som det skulle i en For-loop.
  • när slingan startar är det totala värdet numret längst till vänster (29.76) och det aktuella beloppet är det bredvid det (41.85).
  • i det här exemplet vill vi lägga till det aktuella beloppet till summan.,
  • beräkningen upprepas för varje belopp i matrisen, men varje gång det aktuella värdet ändras till nästa nummer i matrisen, flyttar höger.
  • när det inte finns fler nummer kvar i matrisen returnerar metoden det totala värdet.

ES5-versionen av Reduce-metoden i JavaScript

om du aldrig har använt ES6-syntax tidigare, låt inte exemplet ovan skrämma dig., Det är exakt samma som att skriva:

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

vi använder const I stället för var och vi ersätter ordet function med en ”fat arrow” (=>) efter parametrarna, och vi utelämnar ordet ”tillbaka”.

Jag använder ES6 syntax för resten av exemplen, eftersom det är mer koncist och lämnar mindre utrymme för fel.

att hitta ett genomsnitt med Reduce-metoden i JavaScript

istället för att logga summan kan du dela summan med längden på matrisen innan du returnerar ett slutvärde.,

sättet att göra detta är genom att dra nytta av de andra argumenten i reduce-metoden. Den första av dessa argument är indexet. Ungefär som en For-loop, hänvisar indexet till antalet gånger reduceraren har loopat över matrisen. Det sista argumentet är själva matrisen.

kartlägga och filtrera som minskningar

om du kan använda reduce-funktionen för att spotta ut ett genomsnitt kan du använda det som du vill.,

Du kan till exempel dubbla summan, eller halva varje nummer innan du lägger till dem tillsammans, eller använda ett if-uttalande inuti reduceraren för att bara lägga till siffror som är större än 10. Min poäng är att Reduce-metoden i JavaScript ger dig en mini-Kodpen där du kan skriva vilken logik du vill ha. Det kommer att upprepa logiken för varje belopp i matrisen och sedan returnera ett enda värde.

saken är, du behöver inte alltid returnera ett enda värde. Du kan minska en array till en ny array.,

till exempel, kan minska en rad mängder till en annan array där varje belopp fördubblas. För att göra detta måste vi ställa in det ursprungliga värdet för vår ackumulator till en tom matris.

det ursprungliga värdet är värdet för den totala parametern när minskningen startar. Du ställer in det ursprungliga värdet genom att lägga till ett kommatecken följt av ditt ursprungliga värde inom parentes men efter lockiga hängslen (bultad i exemplet nedan).

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

i tidigare exempel var det ursprungliga värdet noll så jag utelämnade det., Genom att utelämna det ursprungliga värdet, kommer total standard till det första beloppet i matrisen.

genom att ställa in det ursprungliga värdet till en tom matris kan vi sedan trycka varje belopp i totalsumman. Om vi vill minska en rad värden till en annan array där varje värde fördubblas måste vi trycka på beloppet * 2. Då returnerar vi summan när det inte finns några fler belopp att trycka på.

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

Vi har skapat en ny array där varje belopp fördubblas. Vi kan också filtrera bort nummer vi inte vill dubbla genom att lägga till ett if-uttalande i vår reducerare.,

dessa operationer är kart-och filtermetoderna omskrivna som en reduktionsmetod.

för dessa exempel skulle det vara mer meningsfullt att använda karta eller filter eftersom de är enklare att använda. Fördelen med att använda minska spelar in när du vill kartlägga och filtrera tillsammans och du har mycket data att gå över.

om du kedja karta och filtrera tillsammans du gör arbetet två gånger. Du filtrerar varje enskilt värde och sedan mappar du de återstående värdena. Med reduce kan du filtrera och sedan kartlägga i ett enda pass.,

använd karta och filter men när du börjar kedja massor av metoder tillsammans vet du nu att det är snabbare att minska data istället.

skapa en Tally med Reduce-metoden i JavaScript

använd den när: du har en samling objekt och du vill veta hur många av varje objekt som finns i samlingen.

för att räkna objekt i en matris måste vårt ursprungliga värde vara ett tomt objekt, inte en tom matris som det var i det sista exemplet.

eftersom vi kommer att returnera ett objekt kan vi nu lagra nyckelvärdespar i totalsumman.,

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

på vårt första pass vill vi att namnet på den första nyckeln ska vara vårt nuvarande värde och vi vill ge det ett värde på 1.

detta ger oss ett objekt med all frukt som nycklar, var och en med ett värde av 1. Vi vill att mängden av varje frukt ökar om de upprepas.

för att göra detta, på vår andra slinga kontrollerar vi om vår totala innehåller en nyckel med reducerns nuvarande frukt. Om det inte gör det så skapar vi det. Om det gör det ökar vi beloppet med en.

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

jag skrev om exakt samma logik på ett mer kortfattat sätt uppåt.,

platta till en rad matriser med metoden minska i JavaScript

vi kan använda minska för att platta kapslade mängder i en enda array.

vi ställer in det ursprungliga värdet till en tom matris och sedan sammanfoga det aktuella värdet till det totala.

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

oftare är informationen kapslad på mer komplicerade sätt. Till exempel, låt oss säga att vi bara vill ha alla färger i datavariabeln nedan.

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

Vi kommer att gå igenom varje objekt och dra ut färgerna. Vi gör detta genom att peka belopp.c för varje objekt i matrisen., Vi använder sedan en foreach loop för att driva varje värde i den kapslade arrayen till ut totalt.

om vi bara behöver ett unikt nummer så kan vi kontrollera att numret redan finns totalt innan vi trycker på det.

rörledningar med Reduce

en intressant aspekt av reduce-metoden i JavaScript är att du kan minska över funktioner samt siffror och strängar.

låt oss säga att vi har en samling enkla matematiska funktioner. dessa funktioner gör det möjligt för oss att öka, minska, dubbla och halvera ett belopp.,

av någon anledning måste vi öka, sedan dubbla och sedan minska ett belopp.

Du kan skriva en funktion som tar en ingång och returnerar ( input + 1) * 2 -1. Problemet är att vi vet att vi kommer att behöva öka beloppet tre gånger, sedan fördubbla det, sedan minska det, och sedan halvera det någon gång i framtiden. Vi vill inte behöva skriva om vår funktion varje gång så vi kommer att använda minska för att skapa en pipeline.

en pipeline är en term som används för en lista över funktioner som omvandlar ett initialt värde till ett slutvärde., Vår pipeline kommer att bestå av våra tre funktioner i den ordning vi vill använda dem.

let pipeline = ;

i stället för att minska en rad värden vi minskar över vår pipeline av funktioner. Detta fungerar eftersom vi ställer in det ursprungliga värdet som det belopp vi vill omvandla.

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

eftersom rörledningen är en array kan den enkelt ändras. Om vi vill minska något tre gånger, fördubbla det, minska det och halvera det så ändrar vi bara rörledningen.

var pipeline = ;

reduce-funktionen förblir exakt densamma.,

dumma misstag för att undvika

om du inte passerar i ett initialt värde, kommer reduce att anta att det första objektet i din array är ditt ursprungliga värde. Detta fungerade bra i de första exemplen eftersom vi lade till en lista med siffror.

om du försöker tally upp frukt, och du lämnar ut det ursprungliga värdet blir det konstigt. Att inte ange ett initialt värde är ett enkelt misstag att göra och en av de första sakerna du bör kontrollera när felsökning.

ett annat vanligt misstag är att glömma att returnera totalsumman. Du måste returnera något för att reduce-funktionen ska fungera., Alltid dubbelkolla och se till att du faktiskt returnerar det värde du vill ha.

verktyg, Tips& referenser

  • allt i det här inlägget kom från en fantastisk videoserie på egghead som heter Introducing Reduce. Jag ger Mykola Bilokonsky full kredit och jag är tacksam för honom för allt jag nu vet om att använda Reduce-metoden i JavaScript. Jag har försökt skriva om mycket av vad han förklarar i mina egna ord som en övning för att bättre förstå varje koncept., Det är också lättare för mig att referera till en artikel, i motsats till en video, när jag behöver komma ihåg hur man gör något.
  • MDN minska dokumentetiketter vad jag kallade totaltaccumulator. Det är viktigt att veta detta eftersom de flesta människor kommer att hänvisa till det som en ackumulator om du läser om det online. Vissa kallar det prev som i tidigare värde. Allt hänvisar till samma sak. Jag fann det lättare att tänka på en total när jag lärde mig minska.,
  • Om du vill öva med att använda reduce rekommenderar jag att du registrerar dig till freeCodeCamp och fyller i så många av de mellanliggande algoritmerna som du kan använda reduce.
  • Om ”const” – variablerna i exempelkodavsnitten är nya för dig skrev jag en annan artikel om ES6-variabler och varför du kanske vill använda dem.
  • jag skrev också en artikel som heter Trouble With Loops som förklarar hur man använder map() och filter() om de är nya för dig.

Tack för att du läste! Om du vill bli underrättad när jag skriver en ny artikel, skriv in din e-post här.,

och om du gillade artikeln, vänligen dela den på sociala medier så att andra kan hitta den.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *