A Guide To The Reduce Method In Javascript

door Josh Pitzalis

JavaScript ‘ s reduce method is een van de hoekstenen van functioneel programmeren. Laten we eens verkennen hoe het werkt, wanneer je het moet gebruiken, en een aantal van de coole dingen die het kan doen.

een Basisreductie

gebruik het als: u een array van bedragen hebt en u wilt ze allemaal optellen.,

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

hoe het te gebruiken:

• In dit voorbeeld accepteert Reduce twee parameters, het totaal en het huidige bedrag.
• de reduce-methode cycli door elk getal in de array zoals het zou doen in een for-lus.
• wanneer de lus begint is de totale waarde het getal uiterst links (29.76) en de huidige hoeveelheid is degene ernaast (41.85).
• in dit voorbeeld willen we het huidige bedrag bij het totaal optellen.,
• de berekening wordt herhaald voor elke hoeveelheid in de array, maar elke keer dat de huidige waarde verandert naar het volgende getal in de array, naar rechts bewegend.
• wanneer er geen getallen meer over zijn in de array geeft de methode de totale waarde terug.

de ES5-versie van de Reduce-methode in JavaScript

Als u nog nooit ES6-syntaxis hebt gebruikt, laat u dan niet intimideren door het voorbeeld hierboven., Het is precies hetzelfde als schrijven:

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

we gebruiken const in plaats van var en we vervangen het woord function door een “fat arrow” (=>) na de parameters, en we laten het woord ‘return’weg.

Ik zal ES6 syntaxis gebruiken voor de rest van de voorbeelden, omdat het beknopter is en minder ruimte laat voor fouten.

een gemiddelde vinden met de Reductiemethode in JavaScript

in plaats van de som te loggen, kunt u de som delen door de lengte van de array voordat u een definitieve waarde retourneert.,

de manier om dit te doen is door gebruik te maken van de andere argumenten in de reductiemethode. Het eerste argument is de index. Net als een for-lus, verwijst de index naar het aantal keren dat het reductiemiddel over de array heeft gelusd. Het laatste argument is de array zelf.

toewijzen en filteren als reducties

Als u de reductiefunctie kunt gebruiken om een gemiddelde uit te spuwen, kunt u het gebruiken zoals u wilt.,

u kunt bijvoorbeeld het totaal verdubbelen of elk getal de helft geven voordat u ze bij elkaar optelt, of een IF-statement in het reduceer gebruiken om alleen getallen toe te voegen die groter zijn dan 10. Mijn punt is dat de Reduce methode in JavaScript geeft je een mini CodePen waar je kunt schrijven welke logica je wilt. Het zal de logica voor elke hoeveelheid in de array herhalen en vervolgens een enkele waarde retourneren.

het ding is, je hoeft niet altijd een enkele waarde te retourneren. U kunt een array reduceren tot een nieuwe array.,

bijvoorbeeld, laten we een array van bedragen reduceren naar een andere array waar elke hoeveelheid wordt verdubbeld. Om dit te doen moeten we de initiële waarde voor onze accumulator instellen op een lege array.

de beginwaarde is de waarde van de totale parameter wanneer de reductie begint. U stelt de beginwaarde in door een komma toe te voegen gevolgd door uw beginwaarde tussen de haakjes maar na de accolades (vetgedrukt in het voorbeeld hieronder).

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

In vorige voorbeelden was de beginwaarde nul, dus heb ik deze weggelaten., Door het weglaten van de initiële waarde, zal het totaal standaard naar de eerste hoeveelheid in de array.

door de initiële waarde in te stellen op een lege array kunnen we dan elke hoeveelheid in het totaal duwen. Als we een array van waarden willen reduceren tot een andere array waar elke waarde wordt verdubbeld, moeten we de hoeveelheid * 2 pushen. Dan geven we het totaal terug als er geen bedragen meer te push zijn.

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

We hebben een nieuwe array gemaakt waar elke hoeveelheid wordt verdubbeld. We kunnen ook nummers filteren die we niet willen verdubbelen door een if-statement toe te voegen in ons reductiemiddel.,

deze bewerkingen zijn de map en filter methoden herschreven als een reductiemethode.

voor deze voorbeelden zou het zinvoller zijn om map of filter te gebruiken omdat ze eenvoudiger te gebruiken zijn. Het voordeel van het gebruik van verminderen komt in het spel wanneer u wilt in kaart brengen en filteren samen en je hebt veel gegevens te gaan over.

als je de keten kaart en filter samen doe je het werk twee keer. U filtert elke waarde en vervolgens brengt u de resterende waarden in kaart. Met reduce kunt u filteren en vervolgens in een enkele pas in kaart brengen.,

gebruik map en filter, maar wanneer u veel methoden aan elkaar begint te koppelen, weet u nu dat het sneller is om de gegevens in plaats daarvan te verminderen.

een Tally aanmaken met de Reductiemethode in JavaScript

gebruik het als: u een verzameling items hebt en u wilt weten hoeveel van elk item in de verzameling zijn.

om items in een array te tellen moet onze beginwaarde een leeg object zijn, niet een lege array zoals in het laatste voorbeeld.

omdat we een object gaan retourneren, kunnen we nu sleutelwaardeparen in het totaal opslaan.,

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

bij onze eerste pas willen we dat de naam van de eerste sleutel onze huidige waarde is en we willen het een waarde van 1 geven.

Dit geeft ons een object met alle vruchten als sleutels, elk met een waarde van 1. We willen dat de hoeveelheid van elk fruit te verhogen als ze herhalen.

om dit te doen, controleren we op onze tweede lus of ons totaal een sleutel bevat met de huidige vrucht van het reductiemiddel. Zo niet, dan creëren we het. Als dat zo is dan verhogen we het bedrag met één.

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

Ik herschreef exact dezelfde logica op een meer beknopte manier bovenaan.,

een array van arrays afvlakken met de Reduce-methode in JavaScript

kunnen we reduce gebruiken om geneste hoeveelheden af te vlakken in een enkele array.

We stellen de beginwaarde in op een lege array en voegen dan de huidige waarde samen met het totaal.

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

vaak wordt informatie op ingewikkelder manieren genest. Bijvoorbeeld, laten we zeggen dat we gewoon willen Alle kleuren in de gegevens variabele hieronder.

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

We gaan door elk object stappen en de kleuren eruit trekken. We doen dit door het bedrag te wijzen.c voor elk object in de array., We gebruiken dan een foreach lus om elke waarde in de geneste array naar out total te duwen.

als we alleen een uniek getal nodig hebben, dan kunnen we controleren of het getal al in totaal bestaat voordat we het pushen.

Piping met Reduce

een interessant aspect van de reduce methode in JavaScript is dat je zowel over functies als getallen en tekenreeksen kunt verminderen.

laten we zeggen dat we een verzameling van eenvoudige wiskundige functies hebben. met deze functies kunnen we een bedrag verhogen, verlagen, verdubbelen en halveren.,

om welke reden dan ook, moeten we een bedrag verhogen, dan verdubbelen, dan verlagen.

je zou een functie kunnen schrijven die een input neemt, en retourneert ( input + 1) * 2 -1. Het probleem is dat we weten dat we het bedrag drie keer moeten verhogen, het dan verdubbelen, het dan verlagen en het dan op een bepaald moment in de toekomst halveren. We willen niet elke keer onze functie moeten herschrijven, dus gaan we reduce gebruiken om een pijplijn te maken.

een pijplijn is een term die gebruikt wordt voor een lijst met functies die een beginwaarde omzetten in een eindwaarde., Onze pijplijn zal bestaan uit onze drie functies in de volgorde waarin we ze willen gebruiken.

let pipeline = ;

in plaats van het verminderen van een array van waarden verminderen we via onze pijplijn van functies. Dit werkt omdat we de beginwaarde instellen als de hoeveelheid die we willen transformeren.

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

omdat de pijplijn een array is, kan deze eenvoudig worden aangepast. Als we iets drie keer willen ontleden, dan verdubbelen, ontleden en halveren, dan veranderen we gewoon de pijpleiding.

var pipeline = ;

De functie reduceren blijft precies hetzelfde.,

domme fouten om

te vermijden als u geen beginwaarde passeert, neemt reduce aan dat het eerste item in uw array uw beginwaarde is. Dit werkte prima in de eerste paar voorbeelden omdat we een lijst met nummers optellen.

als je probeert fruit te tellen, en je laat de beginwaarde weg dan wordt het raar. Het niet invoeren van een initiële waarde is een gemakkelijke fout om te maken en een van de eerste dingen die je moet controleren bij het debuggen.

een andere veel voorkomende fout is het vergeten om het totaal terug te geven. Je moet iets teruggeven om de functie te verminderen., Controleer altijd dubbel en zorg ervoor dat u daadwerkelijk de waarde retourneert die u wilt.

Tools, Tips & referenties

• alles in dit bericht kwam uit een fantastische videoserie op egghead genaamd Introducing Reduce. Ik geef Mykola Bilokonsky volledige krediet en ik ben hem dankbaar voor alles wat ik nu weet over het gebruik van de Reductiemethode in JavaScript. Ik heb geprobeerd om veel van wat hij in mijn eigen woorden uitlegt te herschrijven als een oefening om elk concept beter te begrijpen., Ook, het is makkelijker voor mij om te verwijzen naar een artikel, in tegenstelling tot een video, wanneer ik moet onthouden hoe iets te doen.
• de MDN verminder documentatie labels wat ik een totaal noemde de accumulator. Het is belangrijk om dit te weten, omdat de meeste mensen zal verwijzen naar het als een accumulator als je over het online lezen. Sommige mensen noemen het prev zoals in de vorige waarde. Het verwijst allemaal naar hetzelfde. Ik vond het makkelijker om te denken aan een totaal toen ik leerde verminderen.,
• als je wilt oefenen met reduce raad ik aan om je aan te melden bij freeCodeCamp en zoveel mogelijk tussenliggende algoritmen in te vullen als je kunt met reduce.
• als de’ const ‘ variabelen in de voorbeeldfragmenten nieuw voor je zijn, heb ik nog een artikel geschreven over ES6 variabelen en waarom je ze misschien wilt gebruiken.
• ik schreef ook een artikel genaamd The Trouble With Loops dat uitlegt hoe map() en filter() te gebruiken als ze nieuw voor je zijn.

Bedankt voor het lezen! Als u een bericht wilt ontvangen wanneer ik een nieuw artikel schrijf, vul dan hier uw e-mail in.,

en als je het artikel leuk vond, deel het dan op sociale media zodat anderen het kunnen vinden.