EcmaScript 6: Tworzenie iteratorów

0:00W tej lekcji dowiesz się czym są iteratory w EcmaScript 6, ale także

0:04jak taki iterator stworzyć z użyciem zapisu ES5. Będę chciał ci to pokazać

0:08po to, abyś zrozumiał w jaki sposób działają iteratory. Dlatego, że w kolejnych lekcjach

0:12pokażę ci z kolei jak z nich korzystać i jakie są ich ogromne zalety.

0:16Tak więc moim zdaniem bardzo ważne jest, aby rozumieć jak taki działa i potrafić

0:21go napisać również, można powiedzieć ręcznie. Generalnie

0:25iteratory są to takie konstrukcje, które będą nam ułatwiać iterację, czyli

0:30będziemy je mogli wykorzystywać na przykład w pętlach i one można powiedzieć,

0:34że w wielu sytuacjach eliminują zbyt zagnieżdżone pętle, które są po prostu zbyt

0:38skomplikowane do, chociażby, przeczytania w kodzie czy później

0:42do jakiegoś modyfikowania i tak dalej, więc przejdźmy sobie od razu do kodu i ja po

0:46prostu pokażę ci jak stworzyć taki iterator. No i jak będziemy przez ten proces

0:50przechodzić, to pewne koncepcję wytłumaczę. Generalnie

0:54iterator jest taki obiekt, który ma metodę next i kiedy ją wywołujemy,

0:59to ma być zwrócona kolejna wartość, czyli chciałbym sobie utworzyć iterator. Zaraz

1:04będziemy musieli go otworzyć, ale najpierw chciałbym utworzyć tak jak gdyby jego instancję. Chciałbym móc napisać

1:08iterator, ale oczywiście przejdźmy sobie do odpowiedniego pliku. Będzie to

1:1230 i tutaj start scripts. Napiszemy sobie let

1:16iterator i chciałbym wywołać jakąś funkcję it, która mi go zwróci. Zaraz

1:20ją sobie napiszemy, możemy tutaj od razu u góry to zrobić. Mogę to

1:24zrobić za pomocą słowa function lub jako stałą na przykład, więc można

1:28również tak to zrobić, it to się równa function, czyli to co one

1:32zwróci będziemy mieli później tutaj. Natomiast samo użycie jak wspomniałem wygląda tak,

1:36że na iteratorze powinniśmy mieć metodę next i ją możemy

1:40wielokrotnie wywoływać i ona nam powinna za każdym razem zwracać taki oto obiekt,

1:45który będzie miał value i tutaj będzie dowolna wartość, na przykład 1. To może

1:49być obiekt, jakakolwiek wartość, a drugi klucz, to będzie done

1:53i tutaj będzie true lub false, czyli jeżeli będzie false to znaczy, że powinniśmy

1:57kolejny raz napisać iterator kropka next i dostaniemy kolejną wartość w takim

2:02obiekcie, a jeżeli tutaj mi się pojawiło true, wtedy tutaj już nie będzie

2:06wartości, tylko będzie wartość undefined albo w ogóle ten klucz nie będzie podany czyli

2:10też będzie miał wartość undefined i wtedy wiemy, że musimy zakończyć iterację, więc

2:14musimy sobie teraz napisać taki iterator tutaj po to, żeby metoda next za

2:18każdym razem zwracała na taki oto obiekt z value oraz z done. No

2:23i jak byśmy to mogli zrobić. Tutaj w ogóle to iterator next będę chciał

2:27zrobić w console.log'u i za moment będziemy widzieli w konsoli co tam zostaje zwrócone. Na

2:31razie, oczywiście, byłby błąd bo taka metoda next nie istnieje na tym co mamy

2:35tutaj, więc skoro po kropce się odwołujemy do iterator next, to

2:39znaczy, że tutaj powinien być jakiś obiekt, a więc zwróćmy sobie z tej funkcji obiekt

2:44i fajnie gdyby on miał metodę next. Możemy ją zapisać tak. Możemy

2:49również w tym skróconym syntax'ie, no ale powiedzmy, że jesteśmy w EcmaScript 5, więc

2:53napiszemy normalną funkcję i ona coś tam będziesz zwracać, czyli mam nadzieję,

2:57że na razie to widzisz. Za po pierwszym wywołaniu it, czyli tej funkcji, zostanie

3:02zwrócony obiekt, właśnie tutaj, który będzie w sobie zawierał metodę

3:06next. Ta metoda jest tutaj i ona za pomocą domknięcia zrobimy tak,

3:10żeby miała dostęp do tej zmiennej tutaj, którą zaraz utworze, bo skoro

3:14funkcja jest zdefiniowana w tym miejscu, to ma dostęp do zmiennych, które są w

3:18tym zakresie widoczne i właśnie dlatego te dane będą ukryte, ale

3:22za pomocą metody next będziemy sobie mogli je pobierać i chciałbym tutaj mieć

3:26tablice numbers, w której będziemy mieli 1, 2, 3, 4 oraz

3:305 i jeszcze sobie utworzymy drugą zmienną, która nam będzie konieczna, będzie

3:34to index i będzie miał wartość 0. To znaczy, że chciałbym zacząć w

3:38tej iteracji od zera i teraz ta metoda next, pokazywałem

3:43ci przed momentem, że musi zwrócić obiekt, który ma value oraz done. No,

3:47więc nie wystarczyło napisać return, ma zwrócić obiekt, więc to jest obiekt. Tutaj

3:52sobie to średniki dajmy, tutaj gdzie mi edytor podpowiada i zwracamy

3:56obiekt i teraz tak, value, co to będzie. Chciałbym, żeby to było na początku, ta

4:00wartość, później ta, później ta i tak dalej, po kolei z tej tablicy numbers. Napiszemy

4:06sobie zatem numbers i tutaj podstawimy index, czyli

4:11wiemy, że na początku będzie numbers 0, a więc zwróci jedynkę, ale ten index musimy zwiększać, więc

4:15napiszę tutaj plus, plus. Operator takiej post dekrementacji działa tak, że

4:19najpierw tutaj zostanie podstawione 0, a dopiero później zwiększona wartość, więc przy kolejnym

4:23użyciu metody next tutaj będziemy mieli jeden i tam zwróci dwójkę i tak dalej. Mam

4:28nadzieję, że to widzisz, natomiast jeszcze musimy sobie zwrócić czy done ma wartość

4:32true lub false, czyli przeliterowaliśmy przez całą tą tablicę, więc

4:36napiszmy sobie tutaj done, no i true lub false, sprawdzimy to na takiej zasadzie, że

4:40jeżeli index jest równe numbers length, czyli długości

4:45tej tablicy, to będę chciał zwrócić true, czyli już zakończyliśmy wtedy, doszliśmy

4:49do ostatniej, do ostatniego elementu. Jeżeli nie, to zwrócimy false.

4:53W razie czego, na spokojnie sobie to zapauzuj i zobacz, co tutaj się dzieje. Natomiast

4:58nie ma żadnych czarów i teraz jeżeli raz wykonałem metodę iterator next. Zobaczmy. Otworzę

5:03konsole, to będziemy mieli tutaj obiekt, w którym jest done, false

5:07i value 1, więc teraz będziemy chcieli ją jeszcze kilkukrotnie wywołać. Za

5:11drugim razem otrzymamy obiekt, w którym znowu done to jest false, ale value

5:16to jest 2. No, więc teraz powinniśmy mieć 3, 4 i 5.

5:20Zobaczmy. Ostatni powinien mieć wartość 5 i value i

5:25done nadal jest to w false. Tak działają iteratory, że to cały czas jeszcze będzie false. Natomiast

5:29dopiero kiedy kolejny raz skorzystamy z iterator next to value

5:33już będzie miało wartość undefined i done będzie to true, czyli teraz

5:37byśmy mogli napisać pętle, która będzie mogła sobie to sprawdzać i wyświetlać wszystkie

5:41wartości tak długo, aż done nie będzie miało wartości true. No

5:46więc możemy sobie taką pętle zrobić, ja tutaj to wykomentuje, żeby nam tych wartości

5:50nie zmieniło i napisz my sobie pętle for. Napiszmy

5:55sobie zatem for i stworzymy tutaj może zmienną let. Nazwę ją

5:59o i do niej będę chciał przypisać to, co ona na początku zwróci

6:03iterator. Napiszę zatem iterator next i wiesz,

6:08że to nam na początku zwróci już ten obiekt, gdzie value, to będzie jeden, a done to będzie false. Następnie

6:13za każdym, za każdą iteracją chciałbym sprawdzać czy o done

6:17nie jest równe true i na końcu będziemy sobie

6:21robili o równa się iterator next, czyli

6:25nadpisujemy tę wartość i sprawdzamy od nowa. No i w tym momencie pod o będziemy mieli ten wspomniany

6:30obiekt, więc zróbmy console.log o. Jak widzisz, taka pętla nam się wykonała,

6:34ale gdybyśmy się chcieli wgryść tylko do value, to napiszmy sobie o value,

6:38okej. I w ten sposób mamy wszystkie wartości z naszego iteratora. W ten sposób

6:42można byłoby go zrobić za pomocą ES5. Teraz chciałem ci

6:47jednak pokazać jak możemy za pomocą ES6 stworzyć iterator, w jaki sposób

6:51się dodaje iterator do dowolnego obiektu. Wykomentuje

6:55sobie zatem to, co mamy tutaj i poniżej

6:59utworze normalny obiekt, który nazwę it. Jest

7:04to, jak widzisz, zwykły taki literał obiektu i wewnątrz za pomocą takich wyliczonych

7:08właściwości, czyli computed properties, możemy odwołać się do symbol iterator. Pamiętasz

7:13jak mówiłem o symbolach, opowiedziałem ci jak działają Wszystkie z nich. Kilka nawet pokazałem i wspomniałem,

7:17że iterator jest najciekawszy i będziemy z niego często korzystać, więc za pomocą

7:21takiego symbolu dodamy sobie funkcję. Ona będzie właśnie o nazwie, nie

7:26wiemy jakiej, ale możemy się do niej dostać pod symbol iterator. I ta

7:30funkcja, chciałbym, żeby w zasadzie robiła dokładnie to, co widzieliśmy tutaj. Wiem, że na razie

7:35to dziwnie wygląda, ale zapewniam cię, że zobaczysz jak te iteratory prościej

7:39tworzyć jeszcze w późniejszych lekcjach. Natomiast na razie chciałbym abyś zrozumiał koncepcję.

7:43Czyli teraz do zwyczajnego obiektu dodałem sobie iterator w taki sposób. Teraz,

7:48żeby to działało tak samo jak u góry, to tutaj muszę się odwołać do tego it i nie mogę

7:52bezpośrednio wywołać, bo it to jest obiekt, a nie funkcja, dlatego muszę się tutaj odwołać

7:56do symbol iterator i to wywoła tę funkcje. No

8:00i ona zwróci dokładnie to samo, więc wszystko powinno działać tak jak wcześniej i widzisz,

8:05że dokładnie tak jest. Natomiast zapewniam cię, że to co jest ciekawe, to silnik

8:09języka JavaScript, czyli interpreter JavaScriptu będzie potrafił w takim

8:13naszym obiekcie sam znaleźć coś takiego jak symbol iterator i o tym

8:17będziemy sobie jeszcze rozmawiać w kolejnych lekcjach. Mam nadzieję, że na razie tylko zrozumiałeś

8:21koncepcję na czym polega iterator. Otóż, jest jakiś obiekt, na którym wielokrotnie

8:26można wywoływać metodę next i ona powinna zwracać obiekt, w którym jest value oraz

8:30done, value dowolne, a done to jest true lub false i kiedy dona ma

8:34wartość true, wiemy że iteracja powinna się zakończyć i wtedy możemy

8:38zakończyć również pętle. Jeżeli chodzi o te pętle, również będzie to można zrobić w

8:42prostrzy sposób, o czym już niebawem.