Értem JavaScript Csökkentése 5 Példák

A reduce() módszer a JavaScript tömbök végrehajtja a “szűkítő” funkció everyelement a tömbben annak érdekében, átadva a visszatérési érték az előző reducercall a következő szűkítő hívás. Areduce() függvény gyakori okaAz összetévesztés, de a kódot sokkal olvashatóbbá is teheti, ha más funkcionális programozási absztrakciókkal kombinálják.,Íme 4 gyakori példa és 1 nem túl gyakori példa, amely bemutatja a reduce()használatát.

összegezve egy sor számot

Most reduce() oktatóanyagok kezdeni ezt a példát: adott egy sor számot , kiszámítja az összeget. Így lehet összefoglalni egy tömböt egy egyszerű régi for hurokkal.,

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

Itt egy példa egyenértékű a reduce():

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

A reduce() függvény első 2 paraméterek funkció reducer() ez egy önkényes initialValue. A JavaScript ezután areducer() – ot hívja mindegyikbena tömb eleme az akkumulátor értékével, mint az első paraméter.Az akkumulátor indul initialValue, majd JavaScript használja a returnvalue minden reduce() hívás, mint az új akkumulátor.,

A beszélgetés olcsó, mutasd meg a kódot. Tehát itt van egy gyors példa arra, hogy hogyan kellegy egyszerűsített reduce() függvény használata for hurkok.

összegezve egy sor numerikus tulajdonságok

a reduce() függvény önmagában gyakran több zavaró, mint hasznos.Ha csak annyit kell tennie, hogy összegez egy sor számot, akkor lehet, hogy jobb, ha egy for hurkot használ., De, ha együtt más tömb módszerek, mint afilter() és map(),reduce() kezd keres vonzóbb.

például tegyük fel, hogy van egy sortétel-tömb, és minden sortétel total tulajdonságának összegét ki akarjuk számítani.

atotal sorelemek hozzáadásának egyik módja a:

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

Ez működik, de kevésbé kompozálható. Jobb alternatíva az elsőmap(), hogy megkapja a total.,

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

miért jobb ez a második megközelítés? Mert a thereducert egy sum() függvényre bonthatja, majd újra felhasználhatja, ahol egy tömb összegzéséhez szükséges.

Ez azért fontos, mert bár úgy gondolja, hogy a sumReducer() soha nem fog megváltozni. Például a fenti kód nem veszi figyelembe azt a tényt, hogy a0.1 + 0.2 !== 0.3 A JavaScriptben. Ez egy gyakori hiba a számítás soránárakat értelmezett nyelven. A bináris lebegőpontok furcsák.,Tehát valójában kerekítenie kell:

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

megkönnyíti a logika újrafelhasználását, mint például a sumReducer() az alkalmazás funkciójának láncolása során. Így meg lehet változtatni a logika egyszer helyett searchingthrough minden for hurok az alkalmazásban.

keresse meg például a

maximális értéket, tegyük fel, hogy van egy sor JavaScript dátum, amit akarhogy megtalálja a legfrissebb dátumot.

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

az egyik megközelítés a tömb rendezése és az utolsó elem a sortedarray-ben., Ez működik, de nem olyan hatékony, mint lehetne, és válogatás egy sor dátumok JavaScript nem triviális.

ehelyett a reduce() értéket használhatja, így a reduktor visszatér az eddig talált legeredményesebb dátumhoz.

csoportosítási értékek

adott egy sor objektumot egy age tulajdonság:

const characters = ;

hogyan tér vissza a térkép, amely tartalmazza, hogy hány karakter van egy adottage? Például a fenti tömb helyes kimenete{ 29: 2, 59: 1 }lenne.,

itt van, hogyan lehet ezt megtenni a reduce().

Bonus: Promise láncolás

tegyük fel, hogy van egy sor async funkciók, hogy szeretné végrehajtani sorozatban.Van egy nem szabványos promise.series funkció ehhez, de ezt is megteheti a reduce().

a reduce() funkció egy hatékony eszköz. Által referáló ki filtersand kicsinyítőhöz, hogy konszolidálja a közös feladatok, mint például a “összefoglalva egy sor számok”egy külön funkció a könnyebb írd újra, SZÁRAZ-er-kódot.

Share

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük