EcmaScript 6: Tworzenie generatorów

0:00Wiesz już naprawdę dobrze, jak działają iteratory i jakie są z nich korzyści. Przede

0:04wszystkim to, że możemy wykorzystywać na nich operator spread, a także pętle

0:08for of. Natomiast tworzenie iteratorów, jak widziałaś może być dosyć

0:13takie skomplikowane, bo musimy stworzyć tam metodę next, która nam to wszystko zwraca i

0:17tak dalej. Dlatego teraz poznasz generatory, a są to funkcje,

0:21które zwracają iterator i pozwalają nam zupełnie inny sposób w tym wszystkim

0:25pracować. Natomiast wiedząc już, że każdy taki obiekt zwracany z

0:29next musi mieć done i value, zobaczysz, że generatory działają dokładnie

0:33w taki sam sposób. Przejdziemy sobie od razu do kodu i utworzymy sobie swój pierwszy

0:37generator. Tworzymy go normalnie tak jak każdą funkcje, ale od razu powiem

0:42ci, że nie może być utworzony z funkcją strzałkową, czyli z arrow function, więc

0:46musi to być taka zwykła funkcja albo w obiekcie ten skrócony zapis funkcji. I teraz

0:50tutaj normalnie mielibyśmy nazwę na przykład it, to przed nazwą stawiamy gwiazdkę,

0:54tutaj. I teraz gwiazdka może być postawiona w ten sposób, w ten

0:59sposób, w ten sposób lub w ten sposób, nie ma znaczenia. Między function, a

1:03nazwą powinna być gwiazdka, chyba że będzie to funkcja anonimowa, to wtedy

1:07wygląda to mniej więcej tak, tak też powinno działać. Nasza nazywa

1:11się it jak iterator i w ten sposób sobie ją utworzymy. I to

1:16co jest niesłychanie ważne, teraz jeżeli wywołam tę funkcje, to ona mi zwróci iterator,

1:21czyli zobaczmy, napiszę sobie let iterator równa

1:26się it i ją po prostu wywołam. Natomiast to być może nam wygeneruje

1:30błąd, okej, tak się nie stało, dlatego że ta funkcja powinna w sobie zawierać

1:35specjalne słowo yield, ale o tym za moment. Jednak co się stało? Co

1:39jest pod zmienną iterator? Zobaczmy. Zobaczymy,

1:43jest to jakiś obiekt it, który ma w sobie generator status suspended. Nie

1:48ma to dla nas do końca teraz znaczenia, ale ważne jest to, że kiedy masz funkcję generatora,

1:52taką z gwiazdką i raz ją wywołasz, to on zwróci iterator. To

1:56znaczy, że ten obiekt iterator zawiera w sobie metodę next, którą wcześniej

2:00musieliśmy tworzyć sami. Taka metoda tutaj być powinna i spróbujemy ją wywołać. Nie

2:05ma żadnego błędu, więc zobaczmy co ona do console log'a nam mogła zwrócić. Jak

2:11widzisz, zwraca obiekt, który ma value undefined i done true. To jest dokładnie

2:15to, co my ręcznie zwracaliśmy, bo tego oczekuje zawsze iterator, czy w

2:19zasadzie coś co korzysta z iteratora, na przykład pętla for of. Ona korzysta

2:23z takiego obiektu, wyciągając sobie value i sprawdzając czy done

2:28ma też już wartość true, czyli na przykład czy zakończy iteracje. Podobnie z resztą operator

2:32spread. Dlaczego tutaj jest done true? Dlatego, że nic w tej

2:36funkcji nie zwróciliśmy i teraz to co jest ważne, funkcje generatora korzystają

2:41ze specjalnego słowa, które tylko w takiej funkcji jest dostępne, jest

2:45to yield. Wygląda to tak i działa troszeczkę tak jak

2:49return. Jeżeli napisze yield jeden. Zobaczmy, co się stanie. To

2:54ten obiekt teraz ma value 1 i done jest to false, więc

2:58teraz jeżeli raz jeszcze byśmy wykonali, to się okaże, że value to już jest undefined

3:02i done to jest wartość true. Takich yield'ów może być w generatorze więcej. Tutaj

3:06może być dwa, trzy i powiedzmy tyle sobie i zostawimy

3:11i to skopiuj jeszcze kilkukrotnie i zauważ, że każde kolejne użycie next zwraca

3:15nam kolejną wartość z yield właśnie w takim obiekcie, pod kluczem value,

3:19a kiedy nie ma już kolejnego yield'a, to jest zwrócone undefined i done ustala nam

3:24wartość true. Wiem, że to wygląda dziwnie, ale jest jedna bardzo ważna rzecz,

3:28jeżeli chodzi o funkcję generatorów. Otóż one są pauzowane, to znaczy,

3:32że ta funkcja robi pierwszy yield kiedy użyjemy tutaj iterator next. Zobaczmy,

3:37zwróci nam tą jedynkę i ona nie przejdzie do kolejnej linijki wykonywania,

3:41aż do tego czasu, aż do czasu aż nie wykonamy iterator next, czyli ta funkcja potrafi

3:45się zapauzować i nie przechodzi do kolejnej linijki. Co ciekawe, w tej funkcji, oczywiście

3:50może być wszystko, tworzenie zmiennych i różne inne operacje, nie tylko same yield'y. Więc

3:54można taką funkcję zapauzować, w ten sposób, że nie wykonujemy kolejnego

3:59next'a i ona wtedy nie wykona kolejnego kodu. I nie chodzi do końca o linijkę,

4:03bo jeżeli zrobie sobie yield i później tutaj będzie kilka

4:07jakichś linijek, to kiedy wykonamy next, to kilka linijek zaraz będzie wykonanych. Chodzi

4:11o to, że ona pauzuje od jednego yield'a do drugiego, więc teraz sobie to

4:15wykomentujmy i pokażę ci inny przykład. W środku takiej funkcji zrobimy sobie

4:19pętle for of i napiszemy let i równa

4:25się 0. W zasadzie będzie to pętla normalna, nie for of,

4:29i jest mniejsze lub równe 50, może od jedynki sobie zróbmyi i

4:34plus plus i zrobimy sobie tutaj wewnątrz yield

4:38i. I wydawałoby się, że ta pętla się wykona 50

4:42razy, ale zobaczmy czy tak będzie. Okazuje się, że nie, że wyłącznie raz, czyli

4:46dopiero, kiedy następnym razem zrobimy iterator next i next, to ona wykona

4:51kolejne iteracje, czyli potrafi nawet zapauzować pętlę, która jest w jej

4:55wnętrzu i tutaj znowu nie będziemy sobie wykonywać next ręcznie,

4:59bo nie jesteś to zbyt użyteczne, ale pamiętasz, że takie next może

5:03za nas wykonać czy to operator spread czy na przykład pętla for of, więc

5:08spróbujmy taką pętle sobie zrobić, for i napiszemy sobie let, na

5:12przykład, value of iterator, console.log value. Od

5:17razu z tego obiektu kropka value będzie wyjęte, oczywiście nazwa tej zmiennej,

5:21nie ma z tym nic wspólnego i zauważ, że teraz od 1 do 50, wszystkie

5:25wartości zostały wyświetlone dlatego, że właśnie ta pętla będzie wykonywać

5:29iterator next tak długo, aż nie zostanie zwrócony obiekt, w którym done ma wartość

5:34false. A to zostanie zrobione automatycznie. Oczywiście

5:38chodzi o done wartość true, a nie false. To zostanie zrobione automatycznie, kiedy nie ma już kolejnego yield'a,

5:43bo ta pętla się zatrzymała. Zapewniam cię, że jeżeli jeszcze nie

5:47widzisz konkretnych zastosowań, to w kolejnych lekcjach je zobaczysz, ale chciałbym ci teraz pokazać kolejną

5:51rzecz. Otóż jak do naszego własnego obiektu moglibyśmy sobie dodać

5:56iterator, nie tworząc tej metody, którą mieliśmy wcześniej czy nie, konkretnie metody

6:00next. Może zróbmy sobie to w tym miejscu, będziemy mieli

6:04jakiś obiekt, który nazwę it i wewnątrz, pamiętasz, pod symbol kropka

6:08iterator dodawaliśmy sobie iterator,

6:13tylko, że on musiał zwrócić obiekt, w który ma metodę next i tak

6:17dalej. Natomiast, jeżeli teraz na początku takiej wyliczonej właściwości napiszemy gwiazdkę,

6:21tutaj jest ona na początku, jak widzisz, a nie gdzieś tutaj pomiędzy, to cały

6:25ten symbol iterator będzie funkcją generatora, czyli kiedy na przykład taka

6:29pętla for of będzie szukała iteratora, to go znajdzie, ale

6:33dodatkowo będzie to generator. Skoro jest to generator, to może korzystać z yield'ów i

6:37on automatycznie zadba o to, żeby zwracać ten obiekt, który ma value i done, więc

6:43utwórzmy my sobie tutaj tablicę numbers i niech

6:47nie będzie jeden, dwa, trzy, cztery i pięć i pamiętasz, jeżeli

6:51nie, to wróć do poprzednich przykładów, gdzie ja to zwracałem taką metodą next, którą sami

6:55napisaliśmy. Teraz nie musimy tego robić, wiemy, że ta tablica ma

7:00w sobie iterator, więc można na niej wykonać pętle for of. Czyli

7:04napiszmy sobie, na przykład, number of numbers i będziemy

7:09chcieli robić yield, number. Znowu

7:13ta pętla będzie pauzowana, więc będzie musiało być wykonany znowu iterator next i

7:17tak dalej, i tak dalej. Natomiast zrobi to za nas już interpreter JavaScript'u,

7:22odpowiednio to wszystko wywoła, więc teraz napiszmy sobie for let value

7:26of i podam nasz obiekt it. Tylko zobaczmy czy to wystarczy. Jak

7:31widzisz, jak najbardziej, czyli nie muszę już, tak jak ci pokazywałem wcześniej, tutaj

7:35wywoływać sobie tej funkcji iteratora czy funkcji generującej, żeby mi zwróciła

7:39iterator. Teraz, jeżeli on jest dodany w formie właśnie generatora,

7:44pod symbol kropka iterator, to jeżeli na takim obiekcie wywołam sobie

7:48metodę it czy w zasadzie przepraszam. Jeżeli wywołam sobie pętle

7:52for of, na tym obiekcie, to automatycznie zostanie w środku znaleziony

7:56generator, pod symbol kropka iterator. On zostanie wywołany,

8:00on nam zwróci obiekt, który będzie miał metodę next. No i ta metoda

8:04będzie wykonywana aż do skutku. Gdybym tutaj dodał oczywiście jeszcze szóstkę, zapiszmy,

8:09to ona się tutaj pojawi. Więc jest to rzeczywiście nowa koncepcja.

8:13Jeżeli do tej pory nie widziałeś, w innych językach programowania czegoś

8:17takiego. Natomiast bardzo fajnie, że zawitała do JavaScript'u, bo ma jeszcze wiele innych ciekawych

8:22zastosowań, o których dowiesz się później. Na końcu pokażę ci jeszcze jeden ciekawy

8:26przykład, który moglibyśmy sobie tutaj wykonać. Gdybym chciał stworzyć taką konstrukcję jak range. W

8:31niektórych językach jest dostępna, w języku JavaScript jej nie mamy, to utwórzmy sobie

8:35funkcję generatora, czyli z gwiazdką, którą nazwiemy range i tutaj będzie from

8:39to, czyli od do. Chciałbym móc podawać na przykład od 2 do 10,

8:43coś w tym stylu i zróbmy sobie coś takiego, let i równa

8:49się from, czyli na początku będzie to taka wartość i wykonamy sobie pętle while i

8:54tak długo jak i jest mniejsze lub równe to, czyli do, to

8:58będę chciał robić yield, i plus plus, czyli

9:02najpierw zostanie zwrócona wartość i, a potem zwiększona o 1. W ten sposób będziemy

9:06tutaj jakby taką pętle wykonywać, tak długo aż nie osiągniemy tej wartości, która

9:11jest w tym miejscu, okej i teraz sobie w pętli for of będziemy

9:16mogli z tego skorzystać. Napiszmy sobie let value of i zobacz,

9:20wykonamy sobie range, podając 2 i na przykład 13

9:25i teraz przejdźmy dalej i wyświetli my sobie value. Zobaczmy

9:29raz jeszcze, co tutaj się stanie. Na początek interpreter wywoła

9:34sobie funkcję range, a mówiłem ci, że kiedy wywołujemy sobie funkcje generatora,

9:39to ona zwraca iterator, więc w tym miejscu oczekiwany jest iterator i on

9:43tutaj zostanie podstawiony. Mógłbym tu zapisać zmienne i podać tutaj zmienną, ale nie muszę. No

9:47i będzie to iterator i wiemy, że ten iterator będzie działał tak, że będzie zwracał

9:51nam wartość i, tak długo w tej pętli, która będzie pauzowania i uruchamiana

9:56poprzez to wewnętrzne użycie next, tak długo aż nie osiągniemy wartości 13.

10:00Sprawdźmy. Wartości od 2 do 13. Nie stworzyliśmy sobie taką

10:04konstrukcji jak range, która działa na generatorach i zwraca oczywiście iterator. Zauważ,

10:09że tutaj musieliśmy ten generator wywołać i on zwrócił iterator. Natomiast na przykład wyżej

10:14na it nie musieliśmy tego wywoływać w żaden sposób, bo jeżeli jest to dodane

10:18wewnętrznie poprzez symbol iterator, to interpreter sam sobie to wywoła i

10:22zwróci sobie ten wewnętrzny iterator. Oczywiście zadziałałoby to podobnie gdybyśmy

10:26tutaj zrobili it, symbol iterator i wywołali

10:31sobie właśnie tę metodę. Sprawdźmy na koniec czy rzeczywiście by

10:35to zadziałało i widzimy, że wartości są takie same. Po prostu nie musimy tego robić,

10:39więc ja po prostu cofnę to do tej postaci i na tym sobie zakończymy

10:43tą lekcję, a w kolejnej będziemy kontynuować poznawanie generatorów.