TRANSKRYPCJA VIDEO
MMC School × Frontend Development
Metoda Reduce W Prawie 10 Minut 😎 #JavaScript
Opis wygenerowany przez Skrybot
Dla tego filmu nie wygenerowano opisu.
Transkrypcja wygenerowana przez Skrybot
Moi drodzy, w tym odcinku porozmawiamy sobie na temat metody reduce w JavaScriptie. I z tą metodą jest taki problem, że bardzo dużo osoby myśli, że to jest trudna metoda. Zresztą też na przykład na MDN-ie jest ona dość, tak powiedziałbym, chaotycznie skomplikowanie trochę opisana, być może, nie wiem. W każdym razie chciałbym, żebyście wiedzieli, że reduce jest bardzo, bardzo prosty, ponieważ jedyną rzeczą, którą ta metoda wykonuje, to jest redukcja tablicy z wieloma elementami do jednej wartości. Czyli jak widzicie, mamy tutaj na przykład tablicę z numerami i mamy tutaj trzy wartości podane, a dzięki reduce'owi będziemy mogli sobie to sprowadzić do jednej wartości.
No i jak widzicie, mam tutaj takie też właśnie z MDN przygotowaną ściągę, jak to się zapisuje. I mamy tutaj tak, reduce może przyjąć kilka parametrów. Mamy tutaj nasz previous value, czyli naszą poprzednią wartość, ale z tym się nie zgodzę, bo oprócz tego, że to jest poprzednia wartość, to również możemy o tym myśleć jako sumie całego naszego działania. Natomiast ten drugi parametr to jest current value i tutaj to jest tak naprawdę każdy pojedynczy element z naszej tablicy. A więc reduce tak samo jak pętla przejdzie po naszej tablicy trzy razy, no bo mamy trzy elementy i ten nasz current value najpierw będzie jeden, potem trzy, potem pięć.
Jeżeli chodzi o index array, to jest po prostu index tablicy, zaraz wam to pokażę. Array to jest po prostu tablica, z którą się bawimy, też wam to zaraz pokażę. Natomiast napiszmy sobie jakiś kod, na przykład const sum, stworzymy sobie zmienną sum, do której przypisujemy naszą tablicę i oczywiście skorzystamy sobie z naszego reduza. No i ten nasz reduce przyjmuje tutaj funkcję callbacka, możemy napisać tutaj funkcję w środku, także też to zrobimy, napiszemy sobie funkcję strzałkową. Musimy podać te nasze pierwsze dwa parametry, a więc ten previous value, current value, także dajmy na przykład prev value, zrzutowo, no i current value.
I oprócz tego dodamy taki jeszcze dodatkowy parametr opcjonalny, którego będę tłumaczył w dalszej części odcinka, natomiast tutaj damy sobie przecinek i damy sobie zero. Czyli powinniśmy mieć taki zapis, dam comma desk, kod mi się sformatował i powinniśmy mieć coś takiego. No i teraz, żeby zredukować tę naszą tablicę do jednej wartości, musimy zrobić coś takiego jak return i dajemy sobie prev value plus current value. I możemy sobie teraz sprawdzić w konsoli, co nam wyjdzie, powinna nam wyjść 9, faktycznie jest 9. I dlaczego to tak? Już wam tłumaczę, ponieważ to co tutaj się stało, to najpierw mamy to nasze prev value, czyli ta nasza poprzednia wartość, ta nasza suma.
Na początku nasze prev value jest ustalone za pomocą tego właśnie naszego parametru dodatkowego, czyli nasze prev value wynosi 0. Potem mamy nasze current value, czyli tak jak wam mówiłem wcześniej, to jest po prostu każdy pojedynczy element z naszej tablicy. Za pierwszym razem nasze current value równa się 1, także mamy tutaj działanie 0 plus 1, tak, prev value plus 1. No to oczywiście to się równa 1. Teraz nasze prev value się zmieniło, ponieważ tą naszą poprzednią wartością, tą naszą sumą jest 1. Także mamy jedynkę plus kolejny element w tablicy, tam jest 3, no to to się równa 4.
I ponownie, nasze prev value zmieniło swoją wartość, w tym momencie jest 4, także zapisujemy sobie 4, dodajemy sobie ostatnią cyfrę w naszej tablicy, czyli 5, no to mamy 9, faktycznie zgadza się. Jeszcze lepiej tą tabelkę zrozumiecie w momencie, kiedy w konsoli wypiszemy sobie na ten przykład, OK, mamy naszą poprzednią wartość, czyli naszą sumę, to jest ta nasza zmienna prev value, ewentualnie może zapiszemy to jako prev value, może będzie prościej. No to widzimy, że te nasze wartości wypisane w konsoli to jest to samo, co ja wypisałem wam w tabelce, prawda? Zaczynamy od 0 i dodajemy pierwszą wartość, no to mamy potem jedynkę, potem mamy czwórkę. Możemy też oczywiście wypisać sobie nasze current value, także to też skopiujemy, wkleimy.
No i zobaczcie, również jest dokładnie to samo, co nasza tabelka przedstawia, czyli current value najpierw jest jedynka, faktycznie mamy jedynkę, ponieważ ona jest wzięta z tej tablicy, potem mamy kolejną cyfrę 3, faktycznie jest 3, no to tutaj również jest 3, no i 5 to samo. I moi drodzy, zanim przejdziemy do dalszej części odcinka, mam dla was zadanie, ponieważ to zakomentuję. Chciałbym, żebyście stworzyli sobie tablicę, na przykład damy tutaj 2, 4 oraz damy sobie 6, no i chciałbym, żebyście zapisali sobie taką tabelkę. Nie zapisujcie tego naszego reduza, zapiszcie tylko i właśnie tą tabelkę w ten sam sposób, żebyście mieli pewność, że to wszystko rozumiecie. Także teraz prośba o pauzę, no i prośba o podjęcie wyzwania.
No dobra, moi drodzy, więc tak, na początku mamy oczywiście nasze 0, to jest nasza pozycja wejściowa, tak sobie to ustaliliśmy w tym miejscu, no i dodajemy pierwszy element z naszej tablicy, czyli 2, no to 0 plus 2 równa się 2. Teraz nasz preview value równa się 2, więc dodajemy kolejną wartość z naszej tablicy, czyli 4, no to mamy 6, no i na samym końcu 6 plus 6 równa się 12. W takim razie zobaczmy, czy na pewno tak to działa. Odkomenduje console loga, faktycznie mamy 12. Także jeżeli udało wam się rozwiązać tą zagadkę, to naprawdę wielkie, wielkie brawa dla was.
Możemy ewentualnie to odkomendować, gdyby ktoś chciał, żeby sobie jeszcze porównać te wartości, no to macie taką możliwość. Natomiast my przejdziemy sobie, wrócę sobie z tym wszystkim do naszego tego poprzedniego stanu, czyli damy sobie tutaj 1, 3, 5, ponieważ teraz chciałbym wam pokazać jeszcze to nasze index oraz array, co to w ogóle jest. A więc możemy dać tutaj console loga, no i damy nasz index, to w tym momencie zobaczymy w konsoli, a my sobie go tutaj nie zdefiniowaliśmy. Oczywiście tutaj nazwa jest dowolna, możemy dać idx na przykład, ponieważ to my wymyślamy sobie nazwy tych naszych parametrów, no to jak widzicie, index zwraca nam po prostu indeksy naszych elementów z tablicy, index 0, 1, 2, zgadza się.
Natomiast nasz ostatni parametr, ten nasz array, również możemy nazwać go na przykład test, no to nasz array zwraca nam po prostu tablicę, z którą pracujemy, także na tym to polega, OK. Natomiast jest to akurat myślę dość proste, więc nie będziemy na to poświęcać zbyt wiele czasu, także tego się pozbędziemy, ponieważ teraz chciałbym wam pokazać jeszcze jedną bardzo ważną rzecz, a mianowicie ten nasz parametr opcjonalny to nasze 0. Jeżeli odkomentuję sobie naszą osumę, to w tym momencie mamy wartość 9. I odkomentuję sobie naszego priv value na ten przykład, to w tym momencie zaczynamy liczyć od 0, no bo tak powiedzieliśmy, ale możemy tutaj podać coś innego, możemy podać jakąś na przykład wartość 5.
W tym momencie jak widzicie, za pierwszym razem nasz priv value równa się 5, czyli mamy teraz 5 plus 1 równa się 6, 6 plus 3 równa się 9, no i 9 plus 5 równa się 14, faktycznie zgadza się. Natomiast gdybyśmy go w tym miejscu w ogóle nie dali, to zobaczcie co nam się pokaże tutaj jako pierwsze priv value, mamy jedynkę. Jedynka pojawia nam się dlatego, ponieważ jeżeli nie podamy tego parametru opcjonalnego, to tym parametrem pierwszym jest pierwszy element z naszej tablicy, element, który ma indeks 0. Także na przykład jak damy tutaj 13 na początku, no to w tym momencie pierwszym naszym priv value będzie 13. Także usunę sobie tą 13, dodam sobie tutaj nasze 0.
No i moi drodzy, tak naprawdę jeżeli chodzi o zapis Reduce'a, to przez większość czasu właśnie tak będziecie z niego korzystali. Myślę, że jest to w miarę zrozumiałe dla Was. Gdyby na tym etapie nauki coś jeszcze Wam gdzieś tam nie świtało do końca, to zachęcam do tego, żebyście sobie po prostu napisali tego Reduce'a kilka razy. Nawet przepiszcie ten kod, który tutaj w tym momencie widzicie, ponieważ da Wam to mnóstwo, da Wam to bardzo wiele. Zmienicie jakieś wartości w naszej tablicy, pobawcie się z tymi tabelkami, ponieważ mamy jeszcze dla Was kilka przykładów trochę bardziej zaawansowanych, przygotowanych.
Także jeżeli na tym etapie nie uczyłyście się na siłach, zróbcie pauzę, poćwiczcie chwilę, 2-3 minuty, nie za długo, nie za krótko, no i leciemy dalej. No dobra, kto chciał to myślę, że sobie zapauzował. Przy okazji jeszcze zanim przejdziemy do dalszej części odcinka, taka mała autopromocja, www. mmcschool. pl Na mojej stronie znajdziecie kursy tworzenia stron internetowych. Są oczywiście kursy Java Skryptu, są też bezpłatne kursy, ale przede wszystkim jest też mojej rodzaj społeczność. Znajdziecie sobie na tej stronie link do Discorda. Na Discordzie mamy naprawdę bardzo dużą społeczność osób, które również uczą się tworzenia stron internetowych, więc możecie poznać nowe osoby, możecie prosić o pomoc, a nawet możecie pogadać o pogodzie czy innych schabowych. Także zachęcam, zapraszam.
A tymczasem wracając do odcinka, przygotowałem sobie tutaj z boku pewną tablicę, tablicę obiektów. No i na przykład mamy jakąś tam tablicę naszych friendsów, naszych przyjaciół. I zrobimy sobie dwie rzeczy. Po pierwsze, w sumujemy wiek naszych użytkowników, naszych przyjaciół. I po drugie, stworzymy sobie tablicę z wszystkimi naszymi ulubionymi jedzonkami. Także zacznijmy może od początku. Czyli damy sobie tutaj const i na przykład dodamy tutaj count age, ponieważ będziemy sobie liczyli nasz wiek. Musimy oczywiście przypisać naszą tablicę. Musimy oczywiście odwołać się do reduza. Otwieramy nawiasy i tutaj musimy podać tą naszą funkcję, nasz callback. My zapiszemy sobie tutaj funkcję strzałkową. No i standardowo mamy te nasze dwa parametry, czyli nasz previous value oraz nasz current value.
Natomiast jako że to są parametry, możemy nazwać je tak jak tylko chcemy. Także dodajemy na przykład sobie total age, ponieważ tutaj będzie ta nasza previous value, czyli ta nasza suma. No i naszym drugim parametrem, tak jak wam mówiłem, tym naszym current value jest każdy element naszej tablicy. Więc tak naprawdę możemy nazwać sobie ten parametr friend. No i możemy dopisać też nasze tutaj zero na początku. Czemu by nie? Raczej warto to zero dopisywać, ponieważ jak widzicie nieposiadanie tego zera, jeżeli tutaj to zero skasuje, nadal mam wynik 9 w konsoli. Więc jakby czy mamy to zero, czy nie mamy tego zera, w tym konkretnym przypadku nam niczego nie obsuje.
Natomiast są sytuacje, gdzie brak tego opcjonalnego parametru może nam coś tam popsuć. Zresztą nie tylko cyfry możemy tutaj przepisać, co zobaczycie na końcu odcinka. I w sumie tego console logę się pozbędziemy, żeby nam nie przeszkadzał. Także żebyśmy się też dobrze rozumieli, to możemy wypisać sobie w konsoli czym jest nasz total age. W tym momencie oczywiście będzie to zero, no bo tak ustaliliśmy sobie ten nasz parametr. Nie robimy jeszcze nic z danymi z naszej tabeli. No to zobaczymy sobie jeszcze czym jest nasz friend. Albo zanim wam pokażę czym jest nasz friend, to zapiszemy sobie to nasze standardowe działanie. Czyli po prostu return 1 wartość plus druga wartość.
Czyli damy tutaj naszego returna, damy sobie total age, no i damy oczywiście naszego frienda. Zobaczcie co nam się pokaże w konsoli. Oczywiście nic, bo musimy jeszcze sobie to wszystko przecież wypisać za pomocą console loga. No i mamy takie coś. Mamy zero, object, object. To nasze zero bierze się oczywiście z tego naszego parametru w tym miejscu. Jak damy teraz 2 będzie 2. Natomiast potem mamy dziwne rzeczy. I czym są te dziwne rzeczy? No właśnie moi drodzy, zobaczmy sobie w takim razie czym jest nasz friend. Nasz friend jak widzicie zwrócił nam każdy obiekt w naszej tablicy. Czyli zgadza się to co wam mówiłem wcześniej. Current value to jest po prostu każdy element naszej tablicy.
No dobra, no to w takim razie obiektów do siebie dodać nie możemy w ten oto sposób. A co więcej my chcemy tylko i wyłącznie dostać się do naszego wieku. Także jeżeli znacie obiekty, jeżeli wiecie jak się pracuje z obiektami. Wystarczy, że odwołamy się do nazwy obiektu. A następnie po grobce odwołamy się do klucza, który nas interesuje. Nas interesuje klucz age. No to zobaczcie już nam się to wszystko świeci na fioletowo. Jest to podpowiedź, że jest to typ number. No to z typem number już możemy pracować. Także co musimy zrobić to możemy pozbyć się naszego console loga. Odwołać się do klucza age. I w tym momencie mamy 72. No to myślę, że się zgadza.
30 plus 20, 50 plus 22, 72. No i przy okazji, jako że to jest te funkcja strzałkowa, która robi tak naprawdę jedną rzecz. To co możemy zrobić, możemy zapisać sobie to wszystko w jednej linijce. Czyli tak naprawdę możemy się pozbyć returna. Możemy się pozbyć nawiasów klamrowych. I oczywiście wszystko nam w tym momencie nadal działa. No i moi drodzy, ostatnim naszym przypadkiem, który przerobimy sobie w tym odcinku. Będzie pokazanie naszych ulubionych posiłków. Standardowo przepiszemy tutaj naszą tablicę friends. Otwieramy nawiasy. Dajemy sobie funkcję strzałkową. Proszę bardzo. W środku musimy podać te nasze dwa parametry. Więc dajmy na przykład previews i dajmy sobie current. Żeby już tam nie kombinować z wymyśleniem nazw.
No i teraz zaczynają się schody. To znaczy musimy jakoś dostać się do wszystkich naszych tablic. I musimy te tablicę ze sobą złączyć. Jeżeli chodzi o łączenie tablic to fajną rzeczą jest coś takiego jak spread operator. Jeżeli ktoś nie pamięta jak działa spread operator to jeżeli wylogujemy sobie teraz naszego numbers. No to po prostu dostaniemy tablicę z naszymi wartościami. Ale możemy sobie tą tablicę naszą rozsmarować za pomocą trzech kropek. A więc właśnie spread operatora. I teraz dostajemy osobne wartości. No więc możemy z tego skorzystać jakoś w naszym reducie. Na początku dla pomocy możemy sobie sprawdzić czym jest nasz prep. Ok, nasz prep zwrócił nam w tym momencie obiekt. Także z obiektem ciężko będzie nam pracować.
Dlatego skorzystamy sobie z naszego parametru opcjonalnego. I wcześniej jak daliśmy tutaj na przykład 0. Tak teraz możemy dać tutaj pustą tablicę. Czyli jak widzicie w tym momencie nasz prep jest po prostu pustą tablicą. I teraz co możemy zrobić? To możemy zrobić naszego returna. I zapiszę kod, potem jeszcze go będę tłumaczył. Czyli odwołamy się do naszego previews. I odwołamy się do naszego. . . Możemy zobaczyć oczywiście czym jest nasz current. W tym momencie on nam zwróci wszystkie nasze elementy z tablicy czyli każdy nasz obiekt. Ale my chcemy dostać się do naszego klucza FavMills. Także jak damy tutaj FavMills to w tym momencie zobaczymy tablicę z naszymi posiłkami.
Więc co możemy zrobić? To oczywiście możemy rozsmarować te nasze elementy za pomocą spret operatora. W tym momencie nie mamy już tablicy. W tym momencie mamy pojedyncze elementy. No i możemy sobie to wkleić w tym miejscu. To możemy sobie usunąć. No i teraz możemy sobie wylogować naszą zmienną showFavMills. I zobaczcie została zwrócona nam cała wielka tablica. Czyli połączyliśmy sobie trzy nasze tablice w jedną dużą. No i możemy też sprawdzić console. log. prev. previews czy on teraz jest. Widzimy że za pierwszym wykonaniem naszego Redusa on jest po prostu pustą tablicą bo tak sobie to przygotowaliśmy. Potem wrzucamy do niego pierwszy nasz zestaw ulubionych jedzonek. Więc ten nasz prev jest teraz tablicą z naszymi jedzonkami.
Ale jako że będziemy chcieli do niego dodawać kolejne elementy. No to też musimy go rozsmarować za pomocą naszego spread operatora. Bo gdybyśmy tego nie zrobili to właśnie mamy takie dziwne rzeczy. Czyli mamy jakiś array array array. Po prostu do naszej pierwszej tablicy dodajemy sobie kolejne elementy. No i mamy takie brzydkie coś. Dlatego my te wcześniejsze tablice również musimy sobie rozsmarować za pomocą spread operatora. Ok czyli za pomocą tego my co robimy to pozbywamy się tych tablic. Wyciągamy sobie wszystkie elementy z tych naszych tablic. No i pakujemy je do nowej naszej tablicy. Natomiast żeby można było dodać do siebie te elementy. No to ten prev, ten previus który jest naszą reprezentacją tej naszej sumy.
Jego też musimy rozsmarować żeby połączyć te nasze tabele. Ewentualnie jeszcze mogę wam to pokazać w ten oto sposób. Że dodamy na przykład const test równa się tablica abc. No i mamy teraz dwie nasze tablice. Także gdybyśmy chcieli sobie to teraz połączyć. To możemy zrobić sobie numbers arrl. W tym momencie mamy w konsoli oczywiście każdy nasz element wyciągnięty. Możemy odwłać się do testu. Teraz każdy nasz element będzie wyciągnięty. Więc gdybyśmy chcieli to połączyć to możemy zrobić tak że stworzymy nową tablicę. A następnie w środku umieścimy sobie nasz numbers arrl. Tylko oczywiście z trzema kropkami. No i po przecinku dodamy tutaj naszego testa. Jak widzicie powstała nam nowa tablica. Która jest połączeniem tych dwóch powyższych.
Także dokładnie to samo co robimy w tym miejscu. Dokładnie to samo dzieje się w tym miejscu. Także na tym polega metoda reduce. Mam nadzieję że po tym odcinku już to rozumiecie. Jeżeli gdzieś jeszcze jakieś problemy się pojawiają to przede wszystkim zachęcam do tego żebyście napisali swój kod. Napiszcie tą prostą naszą wersję. Potem przepiszcie kod z odcinka. Popatrzcie się z tymi naszymi trochę bardziej zaawansowanymi wersjami. Natomiast w tym momencie najważniejsze dla was jest napisanie kodu. Tak więc z mojej strony to by było tyle. Dajcie kciuka w górę, zasubskrybujcie kanał. I widzimy się w kolejnym materiale. Do zobaczenia. Napisy stworzone przez społeczność Amara. org.
S K R Y B O T
Skrybot. 2023, Transkrypcje video z YouTube
Informujemy, że odwiedzając lub korzystając z naszego serwisu, wyrażasz zgodę aby nasz serwis lub serwisy naszych partnerów używały plików cookies do przechowywania informacji w celu dostarczenie lepszych, szybszych i bezpieczniejszych usług oraz w celach marketingowych.