Het begrijpen van de Almachtige Reducer

0
16

Ik was onlangs mentorschap iemand die problemen had met de .verminderen() methode in JavaScript. Namelijk, hoe je van deze:

const nums = [1, 2, 3]
laat waarde = 0

voor (i = 0; i < nums.lengte; i++) {
waarde += nums[i]
}

…bij deze:

const nums = [1, 2, 3]
const value = nums.verminderen((ac, volgende) => ac + naast, 0)

Ze zijn functioneel gelijkwaardig en beide som van alle getallen in de matrix, maar er is een beetje van de paradigma verschuiving tussen hen. Ontdek verloopstukken voor een moment omdat ze krachtig en belangrijk in uw programmering toolbox. Er zijn letterlijk honderden andere artikelen op verloopstukken die er zijn, en ik zal het op de koppeling van een aantal van mijn favorieten op het einde.

Wat is een reducer?

De eerste en meest belangrijke ding om te begrijpen over een verloopnippel is dat het altijd alleen maar de terugkeer van één waarde. De taak van een verloopnippel is te verminderen. Dat een waarde kan een getal, een string, een matrix of een object, maar het zal altijd maar één. Reducers zijn echt geweldig voor een heleboel dingen, maar ze zijn vooral handig voor het aanbrengen van een beetje logica om een groep van waarden en eindigend met nog één resultaat.

Dat is het andere ding om te vermelden: verloopstukken niet, door hun aard, muteren van uw initiële waarde, maar ze weer iets anders. Laten we lopen over dat eerste voorbeeld, zodat u kunt zien wat hier gebeurt. De video hieronder legt uit:

Uw browser ondersteunt niet de video tag.

Het kan nuttig zijn om de video te bekijken om te zien hoe de progressie optreedt, maar hier is de code die wij op zoek bent naar:

const nums = [1, 2, 3]
laat waarde = 0

voor (i = 0; i < nums.lengte; i++) {
waarde += nums[i]
}

We hebben onze array (1, 2, 3) en de eerste waarde van elk getal in de matrix worden toegevoegd (0). We lopen door het bedrag van de matrix en voeg ze toe aan de oorspronkelijke waarde.

Laten we proberen dit een beetje anders:

const nums = [1, 2, 3]
const initialValue = 0

const reducer = function (acc, item) {
terug acc + item
}

const totaal = nums.het verminderen van(reducer, initialValue)

Nu hebben we dezelfde array, maar dit keer worden we niet muteert die eerste waarde. In plaats daarvan hebben we een initialValue dat zal alleen worden gebruikt aan de start. Vervolgens kunnen we een functie neemt een accu en een item. De accu is de verzamelde waarde geretourneerd in de laatste recitatie met de mededeling dat de functie wat de volgende waarde zal worden toegevoegd aan. In dit geval van toevoeging, je kan het zien als een sneeuwbal te rollen naar beneden van een berg eet elke waarde in de weg als het groeit in omvang door ieder gegeten waarde.

We gebruiken .verminderen() toepassen de functie en de start van de initiële waarde. Dit kan worden ingekort met een pijl functie:

const nums = [1, 2, 3]
const initialValue = 0

const reducer = (acc, item) => {
terug acc + item
}

const totaal = nums.het verminderen van(reducer, initialValue)

En dan ingekort wat meer! Impliciet geeft voor de win!

const nums = [1, 2, 3]
const initialValue = 0

const reducer = (acc, item) => acc + item

const totaal = nums.het verminderen van(reducer, initialValue)

Nu kunnen we de functie waar noemden we het, en we kunnen ook plop dat de initiële waarde direct in!

const nums = [1, 2, 3]

const totaal = nums.verminderen((acc, item) => acc + item,

Een accu kan een intimiderende term, dus je kan het zien als de huidige stand van de matrix als we de toepassing van de logica op de callback ‘ s aanroepen.

De Call-Stack

In het geval het niet duidelijk is wat er gebeurt, we melden wat er aan de hand voor elke iteratie. Het verminderen is het gebruik van een callback-functie die wordt uitgevoerd voor elk item in de array. De volgende demo zal helpen om dit meer helder. Ik heb ook gebruik gemaakt van een ander array ([1, 3, 6]), omdat de nummers hetzelfde zijn als de index zou verwarrend kunnen zijn.

Zie de Pen tonen acc, item, terug door Sarah Drasner (@sdras) op CodePen.

Wanneer we dit uitvoeren, zien we deze output in de console:

“Acc: 0, Item: 1, waarde: 1”
“Acc: 1, Punt: 3 -, Return-waarde: 4”
“Acc: 4, Item: 6, waarde: 10”

Hier is een meer visuele verdeling:

Uw browser ondersteunt niet de video tag.

  1. Het toont aan dat de accu wordt vanaf onze eerste waarde, 0
  2. Dan hebben we het eerste item, dat is 1, dus onze terugkeer is de waarde 1 (0 + 1 = 1)
  3. 1 wordt de accu op de volgende aanroep
  4. Nu hebben we 1 van de accu en 3 is het item aince het volgende is in de array.
  5. De geretourneerde waarde wordt 4 (1 + 3 = 4)
  6. Dat, op zijn beurt, wordt de accu en het volgende item op het inroepen van 6
  7. Dat resulteert in 10 (4 + 6 = 10) en is onze uiteindelijke waarde sinds 6 is het laatste nummer in de array

Eenvoudige Voorbeelden

Nu hebben we dat onder onze riem, laten we eens kijken naar enkele algemene en nuttige dingen verloopstukken kunnen doen.

Hoeveel van X hebben we?

Stel, u hebt een matrix van getallen en u wilt terugkeren van een object dat in de rapporten van het aantal keren dat deze nummers komen in de matrix. Merk op dat dit zou net zo goed van toepassing op de snaren.

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]

const resultaat = nums.verminderen((tally, amt) => {
tally[amt] ? tally[amt]++ : tally[amt] = 1
terug tally
}, {})

console.log(resultaat)

Zie de Pen vereenvoudigd verminderen door Sarah Drasner (@sdras) op CodePen.

Wacht, wat hebben we het gewoon doen?

In eerste instantie hebben we een matrix en het object dat we gaan de inhoud in. In onze reducer, stellen wij de vraag: is dit item bestaat? Als dat zo is, laten we verhogen. Zo niet, voeg deze toe en stel deze in op 1. Op het einde, gelieve het tellen van de graaf van elk item. Vervolgens lopen we het verminderen van de functie, die in zowel de drukregelaar en de initiële waarde.

Neem een array te zetten in een object toont een aantal voorwaarden

Laten we zeggen dat we een matrix en we willen het maken van een object op basis van een set van voorwaarden. Verminderen groot in kan zijn! Hier willen we een object te maken van de eventuele aanleg van een aantal opgenomen in de matrix en het tonen van zowel een even en oneven versie van dit nummer. Als het nummer al even of oneven is, dan is dat wat we hebben in het object.

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]

// we gaan maken van een object uit een even en oneven
// versie van elk exemplaar van een aantal
const resultaat = nums.verminderen((acc, item) => {
acc[item] = {
odd: item % 2 ? item : item – 1,
zelfs: het item % 2 ? item + 1 : item
}
terug acc
}, {})

console.log(resultaat)

Zie de Pen vereenvoudigd verminderen door Sarah Drasner (@sdras) op CodePen.

Dit zal schieten uit de volgende output in de console:

1:{oneven: 1, zelfs: 2}
3:{odd: 3, zelfs: 4}
4:{odd: 3, zelfs: 4}
5:{odd: 5: 6}
6:{odd: 5: 6}
82:{odd: 81, zelfs: 82}

OK, dus wat gebeurt er?

Als we gaan elk item in de array, we maken een woning voor even en oneven, en op basis van een inline-conditie met een modulus operator, we slaan het nummer of de verhoging het door 1. De modulus operator is echt goed voor dit, want het kan snel en check even of oneven — als het deelbaar door twee, zelfs indien niet, het is vreemd.

Andere middelen

Op de top, zei ik andere berichten die er zijn handige middelen om meer vertrouwd te maken met de rol van de reducers. Hier zijn een paar van mijn favorieten:

  • De MDN documentatie is geweldig. Serieus, het is een van hun beste berichten, IMO. Ze beschrijven ook wat meer in detail wat er gebeurt als u niet voorzien in een initiële waarde, die we niet dekken in deze post.
  • Daniel Shiffman is altijd geweldig om dingen uit te leggen op de Codering van de Trein.
  • Een Infuus van JavaScript heeft een goede baan, ook.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!