Útmutató a Reduce Method Javascript

Josh Pitzalis

a JavaScript reduce metódusa a funkcionális programozás egyik sarokköve. Vizsgáljuk meg, hogyan működik, mikor kell használni, és néhány jó dolog, amit tehet.

A Basic Reduction

használja, ha: van egy sor összeget, és szeretné felvenni őket.,

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

hogyan kell használni:

• ebben a példában csökkentse elfogadja két paraméter, a teljes és az aktuális összeget.
• A reduce method ciklusok révén minden szám a tömbben, mint azt a For-loop.
• amikor a hurok elindul, a teljes érték a bal szélső szám (29.76), az aktuális összeg pedig a mellette lévő szám (41.85).
• ebben a példában szeretnénk hozzáadni az aktuális összeget a teljes összeghez.,
• a számítás megismétlődik a tömb minden egyes összegére, de minden alkalommal, amikor az aktuális érték a tömb következő számára változik, jobbra mozogva.
• ha nincs több szám a tömbben, a módszer visszaadja a teljes értéket.

A reduce metódus ES5 verziója JavaScript

Ha még soha nem használta az ES6 szintaxist, ne hagyja, hogy a fenti példa megfélemlítsen., Pontosan ugyanaz, mint az írás:

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

const var helyett function “kövér nyíllal” (=>) a paraméterek után elhagyjuk a “visszatérés” szót.

az ES6 szintaxist fogom használni a többi példához, mivel tömörebb, és kevesebb helyet hagy a hibákra.

Átlagkeresés a Reduce metódussal a JavaScript

– ben az összeg naplózása helyett megoszthatja az összeget a tömb hosszával, mielőtt visszatérne a végső értékhez.,

ennek módja a reduce módszer többi Argumentumának kihasználása. Az első ilyen érv az index. Hasonlóan a For-loop, az index utal, hogy hányszor a szűkítő hurkolt át a tömb. Az utolsó érv maga a tömb.

Map and Filter as Reductions

Ha tudod használni a reduce funkció köpni egy átlagos, akkor tudod használni, ahogy akarod.,

például megduplázhatja az összeset, vagy az egyes számok felét, mielőtt összeadná őket, vagy ha a szűkítőn belül egy if utasítás segítségével csak 10-nél nagyobb számokat adhat hozzá. A lényeg az, hogy a Reduce módszer JavaScript ad egy mini CodePen ahol írhat bármilyen logika szeretne. Ez megismétli a logika minden egyes összeget a tömbben, majd vissza egy értéket.

Az a helyzet, hogy nem mindig kell egyetlen értéket visszaadnia. Csökkentheti egy tömb egy új tömb.,

például, lehetővé teszi, hogy csökkentse a tömb összegek egy másik tömb, ahol minden összeg megduplázódik. Ehhez be kell állítanunk az akkumulátor kezdeti értékét egy üres tömbre.

a kezdeti érték a teljes paraméter értéke, amikor a csökkentés megkezdődik. A kezdeti értéket vessző hozzáadásával állíthatja be, majd a kezdeti értéket a zárójelben, de a göndör zárójelek után (az alábbi példában csavarozva).

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

az előző példákban a kezdeti érték nulla volt, így kihagytam., A kezdeti érték elhagyásával a teljes összeg alapértelmezés szerint az első összeg a tömbben.

a kezdeti érték üres tömbre állításával ezután minden összeget a teljes értékbe nyomhatunk. Ha egy sor értéket egy másik tömbbe szeretnénk csökkenteni, ahol minden érték megduplázódik, akkor a * 2 összeget kell megnyomnunk. Ezután visszaadjuk a teljes összeget, ha nincs több összeg, amelyet meg kell nyomni.

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

létrehoztunk egy új tömböt, ahol minden összeg megduplázódik. Kiszűrhetjük azokat a számokat is, amelyeket nem akarunk duplázni, ha hozzáadunk egy if-nyilatkozatot a szűkítőnkbe.,

ezek a műveletek a térkép-és szűrőmódszerek, amelyeket reduce metódusként újraírnak.

ezekre a példákra több értelme lenne a térkép vagy a szűrő használata, mivel ezek egyszerűbbek. A reduce használatának előnye akkor jön létre, amikor össze szeretné térképezni és szűrni, és sok adatot kell átnéznie.

Ha a térképet láncolod és együtt szűröd, akkor kétszer csinálod a munkát. Minden egyes értéket szűrünk, majd leképezzük a fennmaradó értékeket. A csökkentése lehet szűrni, majd térkép egy menetben.,

használja a térképet és a szűrőt, de amikor elkezdi láncolás sok módszer együtt most már tudja, hogy ez gyorsabb, hogy csökkentse az adatokat helyett.

létrehozása Tally a Reduce Method JavaScript

használja, ha: van egy gyűjtemény elemek, és szeretné tudni, hogy hány minden elem van a gyűjteményben.

egy tömb elemeinek összevonásához kezdeti értékünknek üres objektumnak kell lennie, nem pedig üres tömbnek, mint az utolsó példában.

mivel egy objektumot fogunk visszaküldeni, most már tárolhatjuk a kulcs-érték párokat a teljes összegben.,

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

az első lépésnél azt akarjuk, hogy az első kulcs neve legyen a jelenlegi értékünk, és 1 értéket akarunk adni neki.

Ez ad nekünk egy objektumot az összes gyümölcs kulcsként, mindegyik értéke 1. Azt akarjuk, hogy az egyes gyümölcsök mennyisége növekedjen, ha megismétlik.

ehhez a második hurokon ellenőrizzük, hogy a teljes tartalmaz-e kulcsot a reduktor aktuális gyümölcsével. Ha nem, akkor létrehozzuk. Ha igen, akkor növeljük az összeget egy.

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

ugyanazt a logikát átírtam tömörebben felfelé.,

tömbök tömb simítása a Reduce Method in JavaScript

A reduce segítségével a beágyazott összegeket egyetlen tömbbe simíthatjuk.

a kezdeti értéket egy üres tömbre állítjuk, majd az aktuális értéket a teljes értékre csoportosítjuk.

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

gyakrabban, mint nem, az információ bonyolultabb módon van beágyazva. Tegyük fel például, hogy csak az összes színt akarjuk az alábbi adatváltozóban.

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

átmegyünk minden objektumon, és kihúzzuk a színeket. Ezt az összeg mutatásával végezzük.c minden objektum a tömbben., Ezután egy forEach hurkot használunk, hogy a beágyazott tömb minden értékét teljes értékre toljuk.

Ha csak egyedi számra van szükségünk, akkor ellenőrizhetjük, hogy a szám már létezik-e összesen, mielőtt megnyomnánk.

piping with Reduce

A reduce metódus érdekes aspektusa a JavaScript-ben az, hogy csökkentheti a több funkciót, valamint a számokat és a karakterláncokat.

tegyük fel, hogy egyszerű matematikai függvények gyűjteménye van. ezek a funkciók lehetővé teszik számunkra, hogy növeljük, csökkentsük, megduplázzuk és felére csökkentsük az összeget.,

bármilyen okból növelni kell, majd duplázni, majd csökkenteni kell egy összeget.

írhat egy függvényt, amely egy bemenetet vesz fel, és visszatér (input + 1) * 2 -1. A probléma az, hogy tudjuk, hogy háromszor kell növelnünk az összeget, majd megdupláznunk, majd csökkentenünk, majd a jövőben felére csökkenteni. Nem akarjuk, hogy minden alkalommal újraírjuk a funkciónkat, ezért a reduce-t használjuk egy csővezeték létrehozásához.

a csővezeték olyan funkciók listájához használt kifejezés, amelyek bizonyos kezdeti értéket végső értékké alakítanak át., A csővezeték három funkciónkból áll abban a sorrendben, hogy használni akarjuk őket.

let pipeline = ;

az értékek tömb csökkentése helyett csökkentjük a funkciók csővezetékét. Ez azért működik, mert a kezdeti értéket az átalakítani kívánt összegként állítjuk be.

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

mivel a csővezeték tömb, könnyen módosítható. Ha háromszor akarunk valamit csökkenteni, akkor duplázzuk meg, csökkentsük és felére csökkentsük, akkor csak megváltoztatjuk a vezetéket.

var pipeline = ;

A reduce funkció pontosan ugyanaz marad.,

buta hibák elkerülése érdekében

ha nem adja át a kezdeti érték, csökkenti vállalja az első elem a tömb a kezdeti érték. Ez jól működött az első néhány példában, mert összeadtunk egy számlistát.

ha gyümölcsöt próbálsz összeszedni, és kihagyod a kezdeti értéket, akkor a dolgok furcsává válnak. Nem adja meg a kezdeti érték egy egyszerű hiba, hogy az egyik első dolog, amit ellenőrizni kell, ha hibakeresés.

egy másik gyakori hiba az, hogy elfelejtjük visszaadni a teljes összeget. Vissza kell adnia valamit a csökkentési funkció működéséhez., Mindig ellenőrizze újra, hogy valóban visszaadja-e a kívánt értéket.

eszközök, tippek & referenciák

• minden ebben a bejegyzésben jött egy fantasztikus videó sorozat egghead nevű bevezetése csökkentése. Teljes hitelt adok Mykola Bilokonsky – nak, és hálás vagyok neki mindazért, amit most tudok a JavaScript Reduce Method használatáról. Megpróbáltam átírni sokat, amit a saját szavaimban elmagyaráz, mint egy gyakorlatot, hogy jobban megértsük az egyes fogalmakat., Ezenkívül könnyebb számomra hivatkozni egy cikkre, szemben a videóval, amikor emlékeznünk kell arra, hogyan kell csinálni valamit.
• az MDN csökkenti a dokumentációs címkéket, amit totálisnak hívtam a accumulator. Fontos tudni ezt, mert a legtöbb ember fog hivatkozni rá, mint egy akkumulátor, ha olvastam róla az interneten. Egyesek prev – nek hívják, mint az előző értéknél. Minden ugyanarra utal. Azt találtam, hogy könnyebb gondolni a teljes, amikor a tanulás csökkentése.,
• ha a reduce használatával szeretne gyakorolni, azt javaslom, hogy iratkozzon fel a freeCodeCamp-re, és töltsön ki annyi közbenső algoritmust, amennyit csak tudsz a reduce használatával.
• Ha a’ const ‘ változók a példa töredék új neked írtam egy másik cikket ES6 változók, és miért érdemes használni őket.
• írtam egy cikket a The Trouble With Loops címmel is, amely elmagyarázza, hogyan kell használni a map () – t és a filter () – t, ha az új neked.

Köszönjük az olvasást! Ha szeretne értesítést kapni, amikor új cikket írok, kérjük, írja be e-mailjét itt.,

és ha tetszett a cikk, kérjük, ossza meg a közösségi médiában, hogy mások megtalálják.