Understand JavaScript Reduce With 5 Examples

metodareduce() na tablicach JavaScript wykonuje funkcję „reducer” na każdym elemencie tablicy w kolejności, przekazując wartość zwrotną z poprzedniego reducercall do następnego wywołania reducer. Funkcja reduce() jest częstą przyczyną nieporozumień, ale może również sprawić, że Twój kod będzie o wiele bardziej czytelny w połączeniu z innymi abstrakcjami programowania funkcyjnego.,Oto 4 typowe przykłady i 1 niezbyt popularny przykład, który pokazuje, jak używać reduce().

sumowanie tablicy liczb

Większośćreduce() tutoriale zaczynają się od tego przykładu: biorąc tablicę liczb, Oblicz sumę. Oto jak można podsumować tablicę ze zwykłą starąfor pętlą.,

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

oto równoważny przykład przy użyciu reduce():

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

reduce() pierwsze 2 parametry funkcji są funkcją reducer() andan initialValue. JavaScript następnie wywołuje reducer() na każdym elemencie tablicy z wartością akumulatora jako pierwszym parametrem.Akumulator uruchamia się jako initialValue, a następnie JavaScript używa wartości zwrotnej każdego wywołania reduce() jako nowego akumulatora.,

Talk is cheap, show me the code. Oto szybki przykład, jak można zmontować uproszczoną funkcję reduce() za pomocą pętli for.

sumowanie tablicy właściwości liczbowych

funkcjareduce() jest często bardziej myląca niż pomocna.Jeśli wystarczy zsumować tablicę liczb, lepiej będzie użyć pętli for., Jednak w połączeniu z innymi metodami tablicy, takimi jakfilter()Imap(),reduce() zaczyna wyglądać bardziej atrakcyjnie.

na przykład załóżmy, że masz tablicę pozycji w wierszu i chcesz obliczyć sumę właściwości total.

oto jeden ze sposobów dodawania pozycji linii totalza pomocą reduce():

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

To działa, ale jest mniej złożone. Lepszą alternatywą jest najpierwmap() aby uzyskać total.,

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

Dlaczego to drugie podejście jest lepsze? Ponieważ można wyodrębnić funkcję sum() I użyć jej ponownie wszędzie tam, gdzie trzeba sumować tablicę.

jest to ważne, ponieważ podczas gdy myślisz, że sumReducer() nigdy się nie zmieni, tak się stanie. Na przykład powyższy kod nie uwzględnia faktu, że0.1 + 0.2 !== 0.3 w JavaScript. Jest to częsty błąd podczas obliczania cen w języku interpretowanym. Binarne punkty zmiennoprzecinkowe są dziwne.,Więc rzeczywiście trzeba zaokrąglić:

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

reduce()ułatwia ponowne użycie logiki, jaksumReducer() w całym łańcuchu funkcji aplikacji. Możesz więc zmienić swoją logikę raz, zamiast przeszukiwać każdą pętlę for w aplikacji.

Znajdź maksymalną wartość

na przykład załóżmy, że masz tablicę dat JavaScript i chcesz znaleźć najnowszą datę.

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

jedną z metod jest sortowanie tablicy i pobranie ostatniego elementu w sortedarray., To działa, ale nie jest tak efektywne, jak mogłoby być, a sortowanie tablicy dat w JavaScript jest nietrywialne.

zamiast tego możesz użyćreduce() I sprawić, że Twój reduktor zwróci najbardziej aktualną datę znalezioną do tej pory.

grupowanie wartości

podano tablicę obiektów oage właściwość:

const characters = ;

Jak zwrócić mapę, która zawiera ile znaków ma danyage? Na przykład, poprawnym wyjściem dla powyższej tablicy będzie{ 29: 2, 59: 1 }.,

Oto jak możesz to zrobić z reduce().

Bonus: Promise Chaining

Załóżmy, że masz tablicę funkcji asynchronicznych, które chcesz wykonywać szeregowo.Istnieje niestandardowa funkcja promise.series, ale możesz to zrobić również za pomocą reduce().

przechodząc dalej

funkcjareduce() jest potężnym narzędziem. Wyodrębniając filtry i reduktory, możesz skonsolidować typowe zadania, takie jak „sumowanie tablicy liczb”w oddzielną funkcję dla łatwiejszej refaktoryzacji i suchego kodu.