Array.reduce() w JavaScript wyjaśniony w niespełna 12 minut (film, po polsku)
W dzisiejszym filmie autor kanału Overment zwraca uwagę na różnorodność zastosowań metody reduce w JavaScript. Na początku pokazuje, że metoda ta nie jest ograniczona tylko do sumowania wartości w tablicach, ale może być wykorzystywana do bardziej złożonych obliczeń, takich jak obliczanie średniej. Dla przykładu, przy użyciu metody reduce, można dynamicznie obliczyć średnią, dzieląc sumę wszystkich elementów przez ich liczbę. To pokazuje, jak elastycznym narzędziem jest metoda reduce w kontekście obliczeń tablicowych.
Kolejnym interesującym zastosowaniem metody reduce, które pokazuje Overment, jest sprawdzanie duplikatów w tablicy. Używając callbacku w metodzie reduce, autor demonstruje, jak można stworzyć nową tablicę, która będzie zawierała unikalne wartości, co prowadzi do wniosku, że można w ten sposób sprawdzić obecność duplikatów. Te przykłady pokazują, że reduce może być używane w kreatywny sposób, ale również sugerują, że do prostych problemów można używać prostszych rozwiązań, takich jak obiekt Set, który automatycznie filtruje duplikaty.
W dalszej części autor przechodzi do bardziej zaawansowanych przykładów, takich jak obsługa zagnieżdżonych tablic. Overment udowadnia, że metoda reduce może być wykorzystana do łączenia prostych tablic, ale w przypadku bardziej skomplikowanej struktury, jak głęboko zagnieżdżone obiekty, wiele jest łatwiej zrobić z użyciem metody Flat, która funkcjonuje w nowych wersjach JavaScript. To z kolei zwraca uwagę na różnorodność technik, które można zastosować do manipulowania danymi w JavaScript.
Ważnym punktem w filmie jest również transformacja obiektów. Autor pokazuje, w jaki sposób można przekształcać dane obiektowe za pomocą metody reduce, korzystając z kluczy oraz właściwości obiektów. Ostatecznie, widzowie otrzymują praktyczne wskazówki, jak używać tej metody w codziennym kodowaniu, co może być szczególnie przydatne dla programistów zajmujących się JavaScript. Każdy z tych przykładów poszerza wiedzę w zakresie programowania i zachęca do eksperymentowania z metodą reduce.
Na koniec Overment dzieli się statystykami filmu. W chwili pisania tego artykułu, film zdobył 11,831 wyświetleń oraz 246 polubień. Te liczby wskazują na zainteresowanie i zaangażowanie widzów w temat, co może pozwolić temu materiałowi nauczyć jeszcze więcej programistów, jak korzystać z metody reduce w JavaScript. Autor zachęca również do zapisania się na newsletter, oferując dodatkowe materiały, które nie znalazły się w filmie. Warto być na bieżąco z nowinkami w programowaniu i czerpać z doświadczeń innych, jak pokazuje to Overment.
Toggle timeline summary
-
Wprowadzenie do metody 'deduce' i jej zastosowania.
-
Wyjaśnienie podstawowego zastosowania 'deduce' z przykładami.
-
Zaczynając od prostego przykładu z użyciem tablicy.
-
Demonstracja, jak 'deduce' może obliczyć sumę.
-
Opis, jak 'deduce' przetwarza każdy element za pomocą funkcji zwrotnej.
-
Sumowanie elementów w tablicy za pomocą funkcji zwrotnej.
-
Zgłębianie dalszych zastosowań 'deduce' poza sumowaniem.
-
Obliczanie średniej z elementów tablicy za pomocą 'deduce'.
-
Szczegóły dotyczące obliczania wartości średniej i jej zwracania.
-
Użycie 'deduce' do sprawdzania duplikatów w zbiorze danych.
-
Praktyczne zastosowanie 'deduce' do znajdowania duplikatów.
-
Wyjaśnienie detekcji duplikatów i sugerowanie alternatyw.
-
Wprowadzenie do zagnieżdżonych tablic i ich obsługi.
-
Przejście od spłaszczania tablic do obsługi zagnieżdżonych obiektów.
-
Pokazanie potężnych możliwości z 'deduce'.
-
Transformacja struktur obiektów za pomocą metody 'deduce'.
-
Zgłębianie użycia funkcji jako wartości w 'deduce'.
-
Zachęta do przyjęcia metody 'deduce'.
-
Ostateczne myśli i apel do działania: zasubskrybuj newsletter.
Transcription
Cześć! W tym filmie pokażę Ci, że metoda deduce nie służy wyłącznie do sumowania elementów. Pokażę Ci, jak możesz ją wykorzystać na kilku przykładach. Przykłady zaczniemy od tego najprostszego, czyli mam tutaj kilka elementów znajdujących się w tablicy i elementy te przechowują konkretne wartości. Z pomocą metody deduce mogę zamienić te kilka wartości w jedną. Przykładem takiego działania może być wspomniane sumowanie elementów. Jak zapewne wiesz, metoda deduce przyjmuję jako argument callback, który zostaje wykonany dla każdego elementu tablicy, na której wykonujemy metodę deduce. Mało tego, wartość, która zostanie zwrócona z każdego tego callbacku, zostanie zapisana w zmiennej total. I finalnie wartością zwróconą przez metodę deduce będzie wartość zwrócona przez ostatnie wywołanie tego callbacku. Czyli w tej sytuacji, jeżeli zapiszę ten callback w taki sposób, otrzymamy sumę elementów. Wynika to z tego, że ten callback został wykonany dla każdego elementu tej tablicy i przy każdym jego wywołaniu zwracaliśmy sumę bieżącego i poprzedniego elementu. I dzięki temu otrzymaliśmy ich łączną wartość. Mogłoby się teraz wydawać, że zastosowanie metody deduce na tym się kończy. Oczywiście możemy zamieniać tutaj działanie na dodawanie, mnożenie, dzielenie itd. Ale na tym zastosowanie metody deduce wcale się nie kończy. Pójdźmy zatem krok dalej i wykorzystajmy metodę deduce do obliczenia średniej wartości elementów. Aby to zrobić, będziemy musieli wykorzystać pozostałe argumenty, które przyjmuje callback metody deduce. Są to argumenty index oraz array. Index wskazuje oczywiście na indeks bieżącego elementu, a array na całą tablicę, na której wykonujemy metodę deduce. W tym przypadku jest to tablica orders. Obliczenie średniej wartości będzie nieco bardziej skomplikowane niż obliczenie sumy, natomiast w dalszym ciągu mówimy tutaj o sumowaniu elementów. Będziemy je sumować tak długo, aż dojdziemy do ostatniego. Wtedy, jak wspomniałem wcześniej, będziemy zwracać ostateczny wynik metody deduce i w tym przypadku jest to średnia, którą otrzymujemy poprzez podzielenie sumy tych elementów przez ich ilość. Natomiast, jak widzisz, w tej chwili obsługujemy tylko zwracanie wartości w przypadku ostatniego elementu, więc musimy zadbać również o te pozostałe, zwracając wartość total. Czyli, jak widzisz, dochodzi tutaj do sumowania elementów i wartość tej sumy przekazywana jest dalej, natomiast w sytuacji, gdy mamy do czynienia z ostatnim elementem, zwracamy średnią wartość. Tutaj ponownie wynik jest w porządku. Co ciekawe, nie jest to koniec możliwości metody deduce, więc przejdźmy już do kolejnego przykładu. Kolejny scenariusz polega na sprawdzeniu, czy w podanym zestawie danych znajdują się duplikaty. I mam tutaj nową tablicę i wykorzystam teraz metodę deduce do tego, aby to zrobić. W tej sytuacji wystarczy, że w callbacku będę sprawdzał, czy bieżąca wartość elementu znajduje się w nowo tworzonej tablicy, która będzie zwrócona na samym końcu przez metodę deduce. No właśnie, bo do tej pory z wynikiem metody deduce była jakaś wartość, ale oczywiście nic nie stoi na przeszkodzie, aby taką wartością była tablica. Zobaczmy jednak, jak to będzie wyglądało w praktyce. W tym momencie oczywiście otrzymuję błąd, ponieważ w żaden sposób nie poinformowałem metody deduce, że pracujemy na tablicy. Na szczęście jako drugi argument metoda deduce przyjmuje wartość początkową, więc w tej sytuacji będzie to pusta tablica. Dzięki temu wartość, którą przekazałem tutaj, będzie przekazana jako wartość argumentu total, więc w tej chwili wszystko będzie działać. To, co tutaj otrzymałem, to jak widzisz nowa tablica, tym razem nie zawierająca duplikatów, więc aby sprawdzić, czy w tej oryginalnej tablicy istnieją duplikaty, wystarczy, że porównam liczbę elementów w oryginalnej tablicy i w tej nowej. No i faktycznie mamy tutaj potwierdzenie, że w tej tablicy znajdują się duplikaty. Ostatecznie jednak pokazałem Ci ten scenariusz po to, aby zainspirować Cię do wykorzystania metody deduce, ale samo sprawdzanie duplikatów możemy wykonać zdecydowanie prościej, korzystając z obiektu set. Set to specjalny obiekt zawierający wyłącznie unikatowe wartości. Nowy set mogę utworzyć z pomocą konstruktora i przekazując do niego tablicę, otrzymuję od razu nowy zestaw danych pozbawiony duplikatów. Więc ponownie wystarczy, że porównam liczbę elementów, którą zawiera, z liczbą elementów oryginalnej tablicy. No i wynik, jak widzisz, jest dokładnie taki sam. No i teraz możemy przejść do kolejnego przykładu, a będą nim zagnieżdżone tablice. No bo niejednokrotnie może zdarzyć się, że będziemy mieć do czynienia właśnie z zagnieżdżonymi tablicami bądź obiektami. Tego typu struktury danych często musimy w jakiś sposób uprosić. Tak się składa, że w tej sytuacji metoda Reduce świetnie może się sprawdzić. Tutaj akurat mamy dość prosty przykład, ponieważ mamy jednopoziomowe zagnieżdżenie, więc wystarczy, że w callbacku wykonamy metodę concat do tego, aby połączyć te wszystkie tablice ze sobą no i oczywiście otrzymamy jedną tablicę zawierającą te wszystkie elementy. Natomiast wystarczy, że ten przykład byłby w jakiś sposób bardziej złożony, na przykład mielibyśmy podwójne bądź potrójne zagnieżdżenie obiektów, no i nasza metoda Reduce w tym momencie by nie zadziałała. Oczywiście moglibyśmy odpowiednio zmodyfikować kod tego callbacku, natomiast w kontekście obsługiwania zagnieżdżonych tablic istnieje zdecydowanie prostszy sposób. Mam tutaj na myśli metodę Flat, która obecnie jest na czwartym etapie procesu TC39, czyli nie jest jeszcze dla nas oficjalnie dostępna, natomiast pomocą chociażby Babela możemy z niej korzystać już dziś. Efekt jej działania jest dokładnie taki sam, natomiast obsługuje większą ilość przypadków. Ponownie jednak zdecydowałem się pokazać Ci taki scenariusz, ze względu na to, aby zainspirować Cię do wykorzystania metody Reduce w różnego rodzaju scenariuszach. No bo w końcu nie jest możliwe, abym pokazał Ci je wszystkie. Po prostu bądź świadomy, że istnieją takie możliwości wykorzystania tej metody. Oczywiście na spłaszczeniu tablic to wszystko się nie kończy, no bo co w sytuacji, gdy mamy na przykład zagnieżdżony obiekt o strukturze drzewiastej, czyli każdy z elementów może, ale nie musi posiadać właściwości Children będącą tablicą nowych elementów. Co w sytuacji, gdybyśmy chcieli z jakiegoś powodu spłaszczyć taki obiekt? Aby rozwiązać taki problem musimy stworzyć nową metodę, która będzie przyjmowała jako argument obiekt. W tej metodzie przede wszystkim musimy sprawdzić, czy przekazany obiekt jest tablicą. Dlaczego musimy to robić wyjaśnię Ci za chwilę. Tymczasem wartością, która będzie zwrócona przez metodę Flatten będzie wynik metody Reduce. Ostatecznie ta metoda zwróci nam nową tablicę i w pierwszej kolejności zadbamy o to, aby obecny element tej tablicy znalazł się w tej nowotworzonej. Natomiast jak wskazuje nam struktura tego drzewa, może się okazać, że dany element będzie posiadał dzieci. Aby to sprawdzić wykorzystamy tutaj prostego ifa. No i w tym momencie zaczyna się prawdziwa zabawa, ponieważ musimy wykorzystać rekurencję. Aktualne wartości tablicy result przypisujemy do wyniku metody Flatten wykonanej na dzieciach bieżącego elementu. W związku z tym jak działa rekurencja i tego akurat teraz nie będę tłumaczył, nawet w sytuacji, gdy dzieci tego elementu będą posiadać własne dzieci, ostateczny wynik uwzględni je wszystkie. Natomiast to, o co my musimy zadbać, to usunięcie właściwości Children z bieżącego elementu, oczywiście w momencie, gdy ten proces się skończy. No i nie pozostaje nam nic innego, jak zwrócić tablicę result i ostatecznie zainicjalizować ją pustą tablicą. Tak przygotowaną metodę możemy wywołać na naszym obiekcie, a wynik, który otrzymaliśmy w pełni spełnia nasze oczekiwania. Musisz przyznać, że takie wykorzystanie metody Reduce daje ogromne możliwości. No a skoro jesteśmy już przy możliwościach, przejdźmy teraz do przedostatniego przykładu tego filmu. Mianowicie przygotowałem tutaj obiekt o następującej strukturze, którą chciałbym, abyśmy zmodyfikowali do takiej. Oczywiście to wszystko może wydarzyć się z pomocą metody Reduce. Pytanie tylko, jak to dokładnie zrobić. I teraz możesz zatrzymać ten film, pobrać ten przykład z linku z opisu tego filmu, a następnie wrócić do propozycji mojego rozwiązania, które omówię już za chwilę. Ok, jeżeli jesteś już gotowy, możemy przejść dalej. Podstawą tej całej transformacji będą klucze tego obiektu. Wybacz mi tylko brak spójności w ich zapisie. W każdym razie, aby je wykorzystać, skorzystamy z właściwości Keys klasy Object. Dzięki temu otrzymamy tablicę tych właściwości i będziemy mogli na niej wykonać metodę Reduce. Następnie musimy zaimplementować odpowiedni Reducer. Idąc krok po kroku, na początku musimy sprawdzić, czy dana właściwość zawiera podkreślenie. Bo jeżeli go nie zawiera, nie musimy z nią nic robić, tylko po prostu przypisać ją od razu do właściwości nowo tworzonego obiektu. Ale już w sytuacji, gdy podkreślenie w nazwie się znajduje, wykorzystując takie wyrażenie regularne, rozbijamy nazwę względem drugiego podkreślenia. Dzięki temu pierwszym elementem otrzymanej w ten sposób tablicy będzie nasz docelowy klucz. Zatem musimy teraz sprawdzić, czy dany klucz istnieje w nowo tworzonym obiekcie. Jeżeli nie, musimy go po prostu utworzyć. A w momencie, gdy już mamy pewność, że pod tym kluczem znajduje się obiekt, możemy dodać do niego nowe właściwości i do tych właściwości przypisać wartości. Na samym końcu zwracamy rezultat oraz jako drugi argument metody REVIEWS podajemy nowy obiekt. Jak widzisz nasz obiekt został teraz odpowiednio zmodyfikowany. Muszę jednak zaznaczyć, że jeżeli miałeś jakiś problem z rozwiązaniem tego zadania, to proszę Cię absolutnie się nie załamuj. Zastosowanie takiego rozwiązania wymaga po prostu obycia się i doświadczenia z metodą REVIEWS. Na sam koniec przygotowałem jeszcze tylko jeden przykład, który pokazuje, że wartościami, którymi możemy operować wewnątrz metody REVIEWS mogą być również funkcje. Konkretnie spójrz proszę na ten przykład. Mamy tutaj trzy metody i każda z nich wykonuje jakieś działanie na przekazanej wartości. Teraz wszystkie te metody dodaję do nowej tablicy, na której wykonam metodę REVIEWS. Dzięki temu mogę wykorzystać teraz te wszystkie metody do wykonania jakiegoś działania na przekazanej wartości. W tej konkretnej sytuacji będzie to liczba 10. Wynik to oczywiście 18, ponieważ dodaliśmy na początku 1, następnie odjęliśmy 2 i otrzymany wynik pomnożyliśmy przez 2. Naturalnie ten konkretny przykład do niczego się nie nadaje, ale chodzi o samą koncepcję wykorzystania funkcji jako wartości metody REVIEWS. W ten oto sposób zbliżyliśmy się już do końca tego filmu. Mam nadzieję, że metoda REVIEWS na tym etapie jest dla Ciebie bardziej zrozumiała i w głowie pojawiły Ci się pomysły, jak możesz ją wykorzystać. Dlatego oczywiście serdecznie Cię zachęcam i zachęcam Cię również do jeszcze jednej rzeczy. Mianowicie proponuję, abyś przeszedł teraz do mojej strony i zapisał się na newsletter, w którym regularnie mówię o rzeczach, na które nie ma miejsca w tych filmach. Zrób to proszę teraz, a tymczasem ja dziękuję Ci za uwagę. Do usłyszenia w kolejnym filmie. Cześć!