begrijp JavaScript verminderen met 5 voorbeelden

de reduce() methode op JavaScript arrays voert een “reducer” functie op elk element van de array in volgorde, het doorgeven van de return waarde van de vorige reducercall naar de volgende reducer aanroep. De functie reduce() is een veelvoorkomende oorzaak van verwarring, maar het kan uw code ook veel leesbaarder maken in combinatie met andere functionele programmeerabstracties.,Hier zijn 4 veelvoorkomende voorbeelden en 1 niet-zo-veelvoorkomende voorbeeld die laten zien hoe reduce()te gebruiken.

optellen van een array van getallen

De meeste reduce() tutorials beginnen met dit voorbeeld: gegeven een array van getallen , bereken de som. Hier is hoe je een array kunt samenvatten met een gewone oude for lus.,

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

Hier is een equivalent voorbeeld met reduce():

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

De reduce() de eerste 2 parameters van de functie zijn een functie reducer() andan arbitrair initialValue. JavaScript roept dan de reducer() aan op elk element van de array met de accumulator waarde als de eerste parameter.De accumulator start als initialValue, en dan gebruikt JavaScript de returnwaarde van elke reduce() aanroep als de nieuwe accumulator.,

Talk is goedkoop, toon me de code. Dus hier is een snel voorbeeld van hoe je een vereenvoudigde reduce() functie met behulp van for lussen kunt implementeren.

het optellen van een Array van numerieke eigenschappen

de reduce() functie op zich is vaak meer verwarrend dan nuttig.Als u alleen een reeks getallen hoeft op te tellen, kunt u beter een for lus gebruiken., Maar in combinatie met andere array methoden zoalsfilter() en map(), begintreduce() aantrekkelijker te lijken.

bijvoorbeeld, stel dat u een array van regelitems hebt, en u wilt de som van de total eigenschap van elk regelitem berekenen.

Hier is een manier om de regelitems op te tellen total met reduce():

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

Dit werkt, maar is minder composeerbaar. Een beter alternatief is eerstmap() om de totalte krijgen.,

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

Waarom is deze tweede benadering beter? Omdat je out thereducer kunt abstracteren in een functie sum(), en het kunt hergebruiken waar je een array moet samenvatten.

Dit is belangrijk omdat, hoewel u denkt dat sumReducer() nooit zal veranderen, het wel zal veranderen. De bovenstaande code houdt bijvoorbeeld geen rekening met het feit dat0.1 + 0.2 !== 0.3 In JavaScript. Dit is een veel voorkomende fout bij het berekenen vanprijzen in een geïnterpreteerde taal. Binaire zwevende punten zijn raar.,Dus je moet eigenlijk rond:

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

reduce() maakt het gemakkelijk om logica te hergebruiken zoals sumReducer() gedurende uw appusing functie chaining. Dus u kunt uw logica één keer veranderen in plaats van door elke for lus in uw app te zoeken.

Zoek de maximale waarde

bijvoorbeeld, stel dat u een array van JavaScript datums hebt, en u wilt de meest recente datum vinden.

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

een aanpak is om de array te sorteren en het laatste element in de sortedarray te nemen., Dat werkt, maar is niet zo efficiënt als het zou kunnen zijn, en het sorteren van een array van data in JavaScript is niet-triviaal.

in plaats daarvan kunt u reduce() gebruiken en uw reducer de meest recent gevonden Datum laten retourneren.

waarden groeperen

gegeven een array van objecten met een age eigenschap:

const characters = ;

hoe retourneer je een kaart die bevat hoeveel tekens een gegevenage? Bijvoorbeeld, de correcte uitvoer op de bovenstaande array zou{ 29: 2, 59: 1 }zijn.,

Hier is hoe je dat kunt doen met reduce().

Bonus: Promise Chaining

stel dat u een array van async-functies hebt die u in series wilt uitvoeren.Er is hiervoor een niet-standaard promise.series functie, maar u kunt dit ook doen met reduce().

Moving On

de functie reduce() is een krachtig hulpmiddel. Door filtersand reductoren te abstraheren, kunt u gemeenschappelijke taken zoals “optellen van een array van getallen”consolideren in een aparte functie voor eenvoudiger refactoring en DRY-er code.