by Josh Pitzalis
metoda redukcji JavaScript jest jednym z filarów programowania funkcyjnego. Zobaczmy, jak to działa, Kiedy powinieneś go używać i niektóre z fajnych rzeczy, które może zrobić.
A Basic Reduction
użyj go, gdy: masz tablicę kwot i chcesz dodać je wszystkie.,
const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11jak go używać:
- w tym przykładzie redukcja przyjmuje dwa parametry, całkowitą i bieżącą kwotę.
- metoda zmniejsz cykle przez każdą liczbę w tablicy, podobnie jak w pętli for.
- Po uruchomieniu pętli całkowitą wartością jest Liczba po lewej stronie (29.76), a bieżącą wartością jest ta obok niej (41.85).
- w tym konkretnym przykładzie chcemy dodać bieżącą kwotę do sumy.,
- obliczenie jest powtarzane dla każdej kwoty w tablicy, ale za każdym razem, gdy bieżąca wartość zmienia się na następną liczbę w tablicy, przesuwając się w prawo.
- jeżeli w tablicy nie ma już więcej liczb metoda zwraca wartość całkowitą.
wersja ES5 metody Reduce w JavaScript
Jeśli nigdy wcześniej nie używałeś składni ES6, nie pozwól, aby powyższy przykład Cię zastraszył., To dokładnie to samo co pisanie:
var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11używamy const zamiast var I zastępujemy słowo function „strzałką tłuszczu” (=>) po parametrach i pomijamy słowo 'return'.
będę używał składni ES6 do reszty przykładów, ponieważ jest bardziej zwięzła i pozostawia mniej miejsca na błędy.
znalezienie średniej za pomocą metody Reduce w JavaScript
zamiast zapisywania sumy, możesz podzielić sumę przez długość tablicy przed zwróceniem ostatecznej wartości.,
sposobem na to jest skorzystanie z innych argumentów w metodzie reduce. Pierwszym z tych argumentów jest indeks. Podobnie jak pętla for, indeks odnosi się do liczby razy reduktor zapętlił się nad tablicą. Ostatnim argumentem jest sama tablica.
Mapuj i filtruj jako Redukcje
Jeśli możesz użyć funkcji redukuj, aby wypluć średnią, możesz jej używać w dowolny sposób.,
na przykład możesz podwoić liczbę całkowitą lub połowę każdej liczby przed dodaniem ich razem lub użyć instrukcji if wewnątrz reduktora, aby dodać tylko liczby większe niż 10. Chodzi mi o to, że metoda Reduce w JavaScript daje mini CodePen, w którym możesz napisać dowolną logikę. Powtórzy logikę dla każdej wartości w tablicy, a następnie zwróci pojedynczą wartość.
rzecz w tym, że nie zawsze musisz zwracać pojedynczą wartość. Można zredukować tablicę do nowej tablicy.,
na przykład, pozwala zmniejszyć tablicę kwot do innej tablicy, gdzie każda kwota jest podwojona. W tym celu musimy ustawić wartość początkową naszego akumulatora na pustą tablicę.
wartość początkowa jest wartością parametru total w momencie rozpoczęcia redukcji. Wartość początkową ustawiasz, dodając przecinek, a następnie wartość początkową w nawiasach, ale po nawiasach klamrowych (pogrubione w poniższym przykładzie).
const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);w poprzednich przykładach wartość początkowa wynosiła zero, więc pominąłem ją., Pomijając wartość początkową, suma będzie domyślnie pierwszą wartością w tablicy.
ustawiając wartość początkową na pustą tablicę możemy następnie wypchnąć każdą wartość do sumy. Jeśli chcemy zmniejszyć tablicę wartości do innej tablicy, gdzie każda wartość jest podwojona, musimy wypchnąć wartość * 2. Następnie zwracamy sumę, gdy nie ma już kwot do wypchnięcia.
const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // stworzyliśmy nową tablicę, w której każda kwota jest podwojona. Możemy również odfiltrować liczby, których nie chcemy podwoić, dodając wyrażenie if wewnątrz naszego reduktora.,
są to metody map i filtrów przepisane jako metoda redukcji.
w przypadku tych przykładów bardziej sensowne byłoby użycie map lub filter, ponieważ są one prostsze w użyciu. Korzyści z używania reduce wchodzą w grę, gdy chcesz mapować i filtrować razem i masz dużo danych do przejrzenia.
Jeśli łączysz mapę i filtrujesz razem, wykonujesz pracę dwa razy. Filtrujesz każdą pojedynczą wartość, a następnie mapujesz pozostałe wartości. Z redukcją możesz filtrować, a następnie mapować w jednym przejściu.,
użyj map i filter, ale kiedy zaczniesz łączyć wiele metod razem, teraz wiesz, że szybciej jest zmniejszyć dane.
Tworzenie listy za pomocą metody Reduce w JavaScript
użyj jej, gdy: masz kolekcję elementów i chcesz wiedzieć, ile z nich jest w kolekcji.
aby przeliczyć pozycje w tablicy, nasza wartość początkowa musi być pustym obiektem, a nie pustą tablicą, jak w poprzednim przykładzie.
ponieważ mamy zamiar zwracać obiekt, możemy teraz przechowywać pary klucz-wartość w sumie.,
fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})przy pierwszym przejściu chcemy, aby nazwa pierwszego klucza była naszą bieżącą wartością i chcemy nadać mu wartość 1.
to daje nam obiekt ze wszystkimi owocami jako kluczami, każdy z wartością 1. Chcemy, aby ilość każdego owocu wzrosła, jeśli się powtórzy.
aby to zrobić, na naszej drugiej pętli sprawdzamy, czy nasza suma zawiera klucz z aktualnym owocem reduktora. Jeśli nie, to go stworzymy. Jeśli tak, to zwiększamy kwotę o jeden.
fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});przepisałem dokładnie tę samą logikę w bardziej zwięzły sposób na górze.,
spłaszczanie tablicy tablic metodą Reduce w JavaScript
możemy użyć reduce do spłaszczenia zagnieżdżonych kwot w jedną tablicę.
ustawiamy wartość początkową na pustą tablicę, a następnie łączymy bieżącą wartość z sumą.
const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // najczęściej informacje są zagnieżdżane w bardziej skomplikowany sposób. Na przykład, powiedzmy, że chcemy tylko wszystkie kolory w zmiennej danych poniżej.
const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];przejdziemy przez każdy obiekt i wyciągniemy kolory. Robimy to wskazując kwotę.c dla każdego obiektu w tablicy., Następnie używamy pętli forEach, aby wypchnąć każdą wartość zagnieżdżonej tablicy do out total.
Jeśli potrzebujemy tylko unikalnego numeru, to możemy sprawdzić, czy numer już istnieje w sumie, zanim go naciśniemy.
Piping with Reduce
ciekawym aspektem metody reduce w JavaScript jest to, że można redukować zarówno funkcje, jak i liczby i ciągi znaków.
Załóżmy, że mamy zbiór prostych funkcji matematycznych. funkcje te pozwalają nam zwiększać, zmniejszać, podwoić i zmniejszyć o połowę kwotę.,
z jakiegokolwiek powodu musimy zwiększyć, potem podwoić, a następnie zmniejszyć kwotę.
można napisać funkcję, która pobiera dane wejściowe i zwraca (input + 1) * 2 -1. Problem polega na tym, że wiemy, że będziemy musieli zwiększyć tę kwotę trzykrotnie, następnie podwoić ją, następnie zmniejszyć ją, a następnie zmniejszyć o połowę w pewnym momencie w przyszłości. Nie chcemy za każdym razem przepisywać naszej funkcji, więc użyjemy reduce do utworzenia potoku.
potoki to termin używany dla listy funkcji, które przekształcają pewną wartość początkową w wartość końcową., Nasz rurociąg będzie składał się z naszych trzech funkcji w kolejności, w jakiej chcemy ich używać.
let pipeline = ;zamiast zmniejszać tablicę wartości, zmniejszamy liczbę funkcji w naszym potoku. Działa to, ponieważ ustawiamy wartość początkową jako kwotę, którą chcemy przekształcić.
const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3ponieważ rurociąg jest tablicą, można ją łatwo modyfikować. Jeśli chcemy zmniejszyć coś trzy razy, potem podwoić, zmniejszyć i zmniejszyć o połowę, to po prostu zmieniamy rurociąg.
var pipeline = ;funkcja redukcji pozostaje dokładnie taka sama.,
głupie błędy, aby uniknąć
Jeśli nie podasz wartości początkowej, zmniejsz założy, że pierwsza pozycja w tablicy jest twoją wartością początkową. To działało dobrze w pierwszych kilku przykładach, ponieważ dodawaliśmy listę liczb.
Jeśli próbujesz przeliczyć owoce, a pomijasz wartość początkową, to robi się dziwnie. Nie wpisanie wartości początkowej jest łatwym błędem i jedną z pierwszych rzeczy, które należy sprawdzić podczas debugowania.
kolejnym częstym błędem jest zapomnienie o zwróceniu sumy. Musisz zwrócić coś, aby funkcja reduce działała., Zawsze dokładnie sprawdź i upewnij się, że zwracasz żądaną wartość.
narzędzia, porady& Referencje
- wszystko w tym poście pochodzi z fantastycznej serii filmów o eggheadzie o nazwie Introducing Reduce. Mykoła Bilokonsky jest mi wdzięczny za wszystko, co wiem o stosowaniu metody Reduce w JavaScript. Próbowałem przepisać wiele z tego, co wyjaśnia w moich własnych słowach jako ćwiczenie, aby lepiej zrozumieć każdą koncepcję., Ponadto łatwiej jest mi odnieść się do artykułu, w przeciwieństwie do filmu, kiedy muszę pamiętać, jak coś zrobić.
- MDN redukuje etykiety dokumentacji, co nazwałem w sumie
accumulator. Ważne jest, aby to wiedzieć, ponieważ większość ludzi będzie odnosić się do niego jako akumulatora, jeśli przeczytasz o tym w Internecie. Niektórzy nazywają jąprevjak w poprzedniej wartości. Wszystko odnosi się do tego samego. Łatwiej było mi myśleć o sumie, gdy się uczyłem., - Jeśli chcesz poćwiczyć korzystanie z reduce, polecam zapisać się do freeCodeCamp i wypełnić jak najwięcej algorytmów pośrednich za pomocą reduce.
- Jeśli zmienne 'const' w przykładowych fragmentach są dla Ciebie nowe, napisałem kolejny artykuł o zmiennych ES6 i dlaczego możesz chcieć ich używać.
- napisałem również artykuł o nazwie The Trouble With Loops, który wyjaśnia, jak używać map() i filter (), jeśli są dla Ciebie nowe.
dzięki za przeczytanie! Jeśli chcesz być powiadamiany, gdy piszę nowy artykuł, wpisz swój adres e-mail tutaj.,
a jeśli spodobał ci się artykuł, udostępnij go w mediach społecznościowych, aby inni mogli go znaleźć.