Pochopit, JavaScript Snížit S 5 Příklady

reduce() metoda na pole Javascriptu provádí „redukce“ funkce na everyelement pole v pořadí, předávání návratové hodnoty z předchozího reducercall na další redukce zavolat. reduce() funkce je běžná příčina zmatku, ale to může také, aby váš kód mnohem čitelnější, když v kombinaci s jinými funkční programovací abstrakce.,Zde jsou 4 běžné příklady a 1 ne tak běžný příklad, který ukazuje, jak používat reduce().

Součet řady Čísel

reduce() návody začít s tímto příkladem: vzhledem k tomu, pole čísel , vypočítat součet. Zde je návod, jak můžete shrnout pole s obyčejným starým for smyčka.,

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

Tady je ekvivalentní například pomocí reduce():

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

reduce() funkce první 2 parametry jsou funkce reducer() a svévolné initialValue. JavaScript pak volá reducer() na každémprvku pole s hodnotou akumulátoru jako první parametr.Akumulátor začíná jako initialValue, a pak se JavaScript používá returnvalue každého reduce() volání jako nový akumulátor.,

mluvit je levné, ukažte mi kód. Takže zde je rychlý příklad toho, jak mocněmožnění zjednodušené reduce() funkce pomocí for smyčky.

součet pole číselných vlastností

reduce() funkce sama o sobě je často matoucí než užitečná.Pokud vše, co musíte udělat, je součet pole čísel, můžete být lepšíoff pomocí for smyčka., Ale, když v kombinaci s další řadou metod, jako jefilter() map()reduce() začíná vypadat více atraktivní.

předpokládejme například, že máte pole řádkové položky a chcete spočítat součet každého řádku položky total majetku.

Tady je jeden způsob, jak přidat do řádkových položek total pomocí reduce():

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

To funguje, ale je méně composable. Lepší alternativou je nejprvemap() získat total.,

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

proč je tento druhý přístup lepší? Protože můžete abstrakt z thereducer do funkce sum(), a znovu použít všude tam, kde potřebujete, aby sumup pole.

to je důležité, protože zatímco si myslíte, že sumReducer() se nikdy nezmění, bude. Například výše uvedený kód neodpovídá skutečnosti, že0.1 + 0.2 !== 0.3 v JavaScriptu. To je častá chyba při výpočtěceny v interpretovaném jazyce. Binární plovoucí body jsou divné.,Takže si opravdu potřebujete, aby kolem:

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

reduce() je to snadné, aby znovu použít logiku, jako sumReducer() celé své appusing funkci řetězení. Takže můžete změnit svou logiku jednou spíše než prohledávánípřes každýfor smyčka ve vaší aplikaci.

Najděte maximální hodnotu

například předpokládejme, že máte pole dat JavaScriptu a chcetenajít poslední datum.

jedním z přístupů je třídit pole a vzít poslední prvek v sortedarray., To funguje, ale není tak efektivní, jak by to mohlo být, a třídění pole dat v JavaScriptu je netriviální.

Místo toho můžete použít reduce() a vaše redukce vrátí nejnovější data našel tak daleko.

Seskupení Hodnot

Vzhledem k tomu, pole objektů s age ubytování:

const characters = ;

Jak se vrátíte mapu, která obsahuje jak mnoho znaků danýage? Například správný výstup na výše uvedeném poli by byl{ 29: 2, 59: 1 }.,

zde je návod, jak to udělat s reduce().

Bonus: slib řetězení

Předpokládejme, že máte řadu async funkcí, které chcete spustit v sérii.K dispozici je nestandardní funkce promise.series pro toto, ale můžete to také provést pomocí reduce().

pohybující se na

reduce() funkce je výkonný nástroj. Abstrahováním z filtrya redukce, můžete konsolidovat společné úkoly, jako „součet řady čísel“do samostatné funkce pro snadnější refactoring a SUCHÉ-er kód.