EcmaScript 6: Operator spread

0:00W tej lekcji poznamy operator można powiedzieć odwrotny do operatora

0:04rest, który nazywa się spread i od razu przejdźmy sobie do

0:08kodu. Na początek oczywiście pokażę ci kilka przykładów z EcmaScript 5,

0:12które możemy po prostu ułatwić sobie, korzystając z tych nowości

0:17w ES6, więc będę chciał utworzyć sobie na początek taką tablice, która zawiera

0:21liczby i chciałbym teraz zwrócić z tej tablicy liczbę która jest największa.

0:26Moglibyśmy to zrobić metodą, która jest dostępna na obiekcie

0:30Math. Cały czas jesteśmy w EcmaScript5, to nie jest nic nowego i metoda

0:35nazywa się max i ona działa tak, że musimy i tutaj podać parametry czy

0:39argumenty w ten sposób. Po prostu musiałbym te wszystkie rzeczy wyciąć i podać

0:43je tutaj osobno. Ona wtedy zwróci mi największy z nich. Co jednak, gdy

0:48chciałbym je podać jako tablice, czyli mam je w tablicy i chciałbym je podać. Chciałbym

0:52tutaj podać po prostu numbers. Niestety, to nam nie zadziała. Z tego powodu, że

0:56ta funkcja oczekuje, że podamy poszczególne argumenty,

1:01a nie podane w formie tablicy. Da się to jednak obejść. Tak

1:05naprawdę metodą apply, czyli zróbmy sobie tutaj może console.log, żebyśmy

1:09to zobaczyli i odwołujemy się do math max i nie wywołuje tej funkcji standardowo,

1:13tylko tak jak do tej pory już widziałeś na przykład za pomocą call można wywołać

1:17jakąś metodę i możemy jej wtedy podać jako pierwszy

1:21tutaj parametr this, więc w tym przypadku niech

1:25to będzie math, bo odwołujemy się do math, to niech pod spodem this, to będzie math, a jako

1:30drugi w metodzie call i kolejne można podać poszczególne parametry, ale

1:34tutaj nic by mi to nie dało, bo musiałbym je wstawić w taki sposób, ale jeżeli metodę call

1:38zamienimy na apply, to ona działa dokładnie tak samo, ale jako drugi parametr

1:42pozwala podać tablice, więc podam numbers i metoda apply tak

1:46jakby bierze tą tablicę i rozstrzeliwuje poszczególne parametry do poszczególnych

1:51tutaj argumentów, więc dokładnie tak to będzie działać czyli

1:55metody apply być może już znałeś. Ona w ten sposób pozwoli nam po prostu wywołać

1:59dowolną funkcje, tak jak tutaj jest max. Natomiast pozwoli

2:03nam przekazać tablice, która zostanie wstawiona pod poszczególne argumenty.

2:08W ten sposób zobaczmy, wynik to 22 i mogliśmy sobie z tej

2:12metody math max skorzystać. Teraz natomiast pokażę

2:16ci operator spread, który pozwoli nam to zrobić w bardziej czytelny sposób. To

2:20co mamy tutaj wykomentuje i zrobimy raz jeszcze console.log'a, w którym będzie math

2:24max. Natomiast, żeby tutaj móc podać tablice, to

2:29skorzystamy z takiego zapisu. Trzy kropki numbers i zauważ, że

2:33jest to zapis identyczny jak w przypadku rest, ale używane w innym kontekście i

2:37tutaj trzeba to sobie rozróżnić, czyli tamten był używany przy definicji

2:41funkcji. Wtedy kiedy definiowaliśmy jakie parametry ona przyjmuje,

2:45a ten jest używany już w kontekście wykonania funkcji. Zaraz jeszcze

2:50zobaczysz inne przykłady, więc chociaż wygląda tak samo, to nie jest to operator rest, on

2:54nic tutaj nie zbierze, ale weźmie już coś co ma. W tym przypadku tablice

2:58numbers i rozstrzeli ją tutaj do metody max, czyli

3:02ten operator spread działa tak jak byśmy wzięli tą tablicę i każdy z jej elementów

3:06wstawili tutaj jako osobny, a tego oczekuje funkcja math max, więc

3:11zobaczmy jaki będzie wynik takiego działania. Jak widzisz

3:15jest to również 22, czyli poprawny wynik. Natomiast sam zapis jest

3:19dużo bardziej czytelny. Po prostu mówi nam on, że tutaj jest jakaś tablica

3:23i proszę ją rozstrzelić do poszczególnych argumentów tej funkcji. Ważne

3:29jest tutaj, aby zapamiętać, że ten operator spread nie działa tylko na tablicach,

3:33ale na przykład też na stringach i generalnie działa na wszystkim, co zawiera w sobie

3:37iterator, a czym jest iterator, jeszcze się w tym kursie dowiesz. Tak więc zapamiętaj,

3:41że musi być iterator wewnątrz takiej konstrukcji i wtedy będzie można ją rozstrzelić

3:46za pomocą operatora spread. Pokażę ci teraz jeszcze kilka innych kreatywnych

3:50sposobów na korzystanie z tego operatora spread, bo okazuje się, że nie

3:54tylko przy wywoływanie funkcji można z niego skorzystać. Generalnie

3:58co jeszcze jest ciekawe mógłbyś sobie tutaj podać jeszcze inne parametry,

4:02gdybyś chciał, mógłbyś podać sobie na przykład sto, a po przecinku coś takiego

4:06i ta funkcja dostałaby jakby sto i każdy inny parametr. Zobaczmy

4:10czy ona wtedy zwróci sto jako największy argument. Okazuje się, że tak, ale

4:15to ci jeszcze teraz pokażę na tablicach, więc chciałbym pod spodem utworzyć sobie tablicę,

4:19którą nazwę numbers2 i chciałbym, żeby to była

4:23tablica. Do nich wstawię sobie kilka liczb. Na przykład 2, 33

4:27i 10 i teraz chciałbym dodać poszczególne liczby, które

4:31znajdują się tutaj. Z EcmaScript 5 musiałbym skorzystać na tablicy z metody concat.

4:36W ten sposób, żeby połączyć z inną tablica i podać tutaj numbers. Zobaczmy

4:41console.log numbers 2. Jaki byłby tego efekt. Okazuje się,

4:45że faktycznie te dwie tablice zostały połączone. Natomiast nie muszę tego robić ES6,

4:49mogę sobie tutaj pobrać jakieś parametry czy w zasadzie jakieś elementy tablicy,

4:53które mnie interesują, po czym po przecinku podam trzy kropki numbers

4:58i znowu operator spread jakby wstawi wszystkie te poszczególne tutaj

5:03wartości do tej tablicy i efekt będzie dokładnie taki

5:07sam jak w przypadku konkatenacji tablic. Możesz to zobaczyć w tym miejscu. Co

5:11ciekawe mógłbym sobie tutaj na początku dodać jeszcze na przykład 1 i 75

5:16i w ten sposób utworzyłem sobie nową tablicę, która będzie zawierać wszystkie te liczby

5:21oraz w środku te które były pod numbers i zauważ, że faktycznie tak

5:25jest. Nie mamy tutaj żadnego błędu. Moglibyśmy nawet

5:29połączyć sobie kilka takich wywołań, to znaczy tutaj w konsoli gdybym chciał utworzyć

5:33tablice wiem, że numbers dwa jest tablicą, więc gdybym zrobił tak to utworze tablice

5:37w tablicy. Zobaczmy jak by to wyglądało. Widać rzeczywiście, że tak jest, ale

5:42jeżeli tutaj w środku zrobiłbym trzy kropki, to ja tym zapisem tworzę sobie nową

5:46tablicę, a wewnątrz tej tablicy roztrzeliwuje wszystko co było w numbers, więc

5:50generalnie będzie to działać dokładnie tak samo, czyli będzie to zwykła tablica, ale

5:54mogę tutaj po przecinku powiedzmy podać sobie jeszcze te numbers, które

5:58były u góry raz jeszcze. Mogę je sobie rozstrzelić i dodam

6:03sobie jeszcze na przykład sto. Zauważ, że w ten sposób znowu utworze tablice, w której

6:07będzie to co było w numbers 2, to co w numbers i dodatkowo jeszcze taki oto element.

6:11Jak widzisz, dokładnie tak to wygląda. Okazuje się tak

6:15jak wspomniałem, że można skorzystać z operatora spread na wszystkim, co zawiera w sobie iterator.

6:19Również na stringu. Natomiast co by się stało gdybym tutaj na stringu chciał zrobić

6:24taki operator i string byłby to Piotr. Okaże się, że mamy błąd, ale dlaczego?

6:29Dlatego, że skorzystaliśmy z tego operatora w niewłaściwym kontekście, czyli

6:33nie możemy sobie na przykład utworzyć zmiennej, jakiejś S i roztrzelić

6:37tam w stringu albo czegokolwiek innego. Spróbujemy tutaj sobie rozstrzelić numbers 2 czy 3

6:42taka operacja się powiedzie. Okazuje się, że nie no, bo co tutaj tak naprawdę

6:46miałoby zostać pod s podstawione. Nie ma to sensu, ale gdybym utworzył tablicę i powiedział

6:50do tej tablicy rozstrzel, wtedy jak widzisz nie ma z tym problemu. Podobnie

6:54będzie ze stringiem. Natomiast samo rozstrzeliwanie string'u będzie polegało na tym, że

6:58jego poszczególne elementy zostałyby wstawione na przykład do funkcji pod poszczególne

7:03argumenty. W zasadzie mogę ci to pokazać w tym miejscu i gdybyśmy zrobili

7:07tak. Trzy kropki przed string'iem i tutaj napisali Piotr,

7:11to w tej tablicy okaże się, że mamy wszystkie te liczby, a potem poszczególne

7:15litery z tego string'u. Natomiast zrobimy sobie to na trochę ciekawszym

7:20przykładzie. Wyobraź sobie, że chcielibyśmy stworzyć funkcję, która zamienia string na tablice

7:24znaków, więc stworzyłbym funkcje o nazwie string to array i

7:28ona by przyjmowała jakiś string. Chciałbym,

7:32żeby domyślnie była to wartość taka string'owa, żebyśmy nie mieli błędu kiedy będziemy

7:37za chwilę korzystać z tego operatora i na początek pokażę ci jak

7:41w ES5 można by było string zamienić na tablicę. Można byłoby się do niego odwołać

7:45i metodą split, która rozdziela taki string rozdzielić

7:49go na pustym ciągu znaków. Zróbmy sobie tutaj return i zróbmy pod spodem console.log Powiedzmy

7:55string to array niech to będzie moje imię. Zobaczymy

8:01jaki byłby efekt, jak widzisz mamy tablicę i w niej są rozstrzelone poszczególne znaki.

8:05Natomiast możemy to zrobić teraz w ES6 jeszcze bardziej eleganckim zapisem.

8:09Skoro chcę zamienić string na tablicę, to muszę zwrócić tablice, w tym

8:13momencie jest pusta, ale rostrzelmy sobie string na poszczególne jej indeksy, więc

8:17trzy kropki operator spread i następnie podany string. Dzięki

8:21temu, że mamy tutaj wartość domyślną, jeżeli ktoś niczego nie poda, to również nie będzie błędów

8:25i zauważ, że ta funkcja znowu zwraca nam poprawną tablice, czyli

8:29ważne jest tutaj to, że to jest tworzenie nowej, pustej tablicy, ale

8:34wewnątrz niej rozstrzeliwuję sobie taki Sting. No i teraz jeżeli ktoś, by nic nie

8:38podał, to zobaczymy, zostanie zwrócona pusta tablica, nie będzie błędu,

8:42a gdyby tego zabrakło, to mielibyśmy problem, bo na undefined nie

8:46możemy znaleźć, jak widzisz, tutaj czegoś co nazywa się symbol iterator i jeszcze

8:50o tym będziemy w tym kursie mówić. Z tej lekcji zapamiętaj tyle, że operator spread

8:54jest odwrotny do rest, czyli rest pozwolił nam, można powiedzieć zbierać

8:59wszystkie argumenty. Na przykład w przypadku funkcji do tablicy.

9:03Natomiast spread pozwala nam rozstrzelić na poszczególne indeksy,

9:07na poszczególne elementy coś, co może wyglądać jak tablica, ale tak naprawdę coś

9:12to zawiera w sobie iterator, o którym będziemy mówić jeszcze później. Jak zatem widzisz

9:16tutaj wiele jest sposobów na skorzystanie z operatora spread. No i myślę,

9:20że od razu widzisz, że jest to operator bardzo przydatny i będziemy jeszcze z niego

9:24w tym kursie wielokrotnie korzystać.