EcmaScript 6: Pętla for...of

0:00W tej lekcji poznasz nową pętlę dostępną w EcmaScript 6 i jest

0:04to pętla for of, a służy ona do iterowania po obiektach, które zawierają

0:08w sobie iterator i takie obiekty z angielskiego nazywa się iterables. Jeżeli

0:12mają sobie iterator, to taka jest ich nazwa. Dowiedziałeś się już jak tworzyć iteratory, ale

0:16to jeszcze nie koniec naszej przygody z nimi, bo zobaczysz później, że to wszystko będzie znacznie

0:21ułatwione. Ja natomiast pokazuje ci wszystko krok po kroku, abyś dobrze zrozumiał

0:25koncepcję, a później będziesz mógł korzystać z prostszych zapisów, ale

0:29będziesz miał już w głowie jak tak naprawdę to wszystko działa, więc teraz przyjrzymy się temu, jak

0:34działa taka pętla. Mamy przykład z lekcji poprzedniej, gdzie do zwykłego obiektu dodaliśmy sobie

0:38iterator i pokazałem ci jak przeliterować pętlą for,

0:42taką zwykłą, po całym tym iteratorze. Teraz pokażę ci nowy zapis,

0:46jest to pętla for of i ona znacząco będzie ułatwiona, więc tą pętle for sobie

0:50wykomentujemy i napiszę for i ta pętla wygląda tak, że tworzymy

0:54sobie zmienną na przykład value, ale tutaj to, co jest ważne piszemy of i podajemy

0:59jakiś obiekt, który ma w sobie iterator, czyli w tym przypadku, musimy

1:03sobie podać, zobaczmy, iterator,

1:08okej i zrobimy console.log value. Zaraz

1:12wrócę do tego, co dokładnie tutaj się dzieje, otwórzmy sobie konsole i jak widzisz pojawił

1:16nam się błąd. Czyli nie muszę, tak jak wcześniej, wywoływać już tego wewnętrznego

1:20iteratora, ale wspominałem ci już wcześniej, że interpreter JavaScript'u

1:25będzie szukał po symbol kropka iterator takiej funkcji, dlatego to wykomentujemy

1:29i teraz będziemy iterować bezpośrednio na tym obiekcie it, czyli wystarczy,

1:33że jakiś obiekt dowolny będzie miał sobie symbol kropka iterator i będzie

1:37to funkcja, która właśnie zwraca nam obiekt z metodą next, czyli musi się

1:41zachowywać tak jak ci pokazałem, to wtedy ta pętla potrafi po tym przeiterować. Zobaczmy

1:46czy teraz to zadziała i okazuje się, że tak. Wszystko działa poprawnie, natomiast

1:50jest to tutaj jedna ciekawa rzecz. Zauważ, że pod zmienną value mam od razu wartość,

1:55a tutaj wcześniej ten nasz iterator zwracał nam obiekt, taki jak tutaj, gdzie

1:59mieliśmy done i value i dopiero po kropce musieliśmy się odwołać tutaj do o value.

2:03Jak zatem widzisz, pętla for of robi to za nas, czyli od razu do

2:07tej zmiennej przypisze nam to, co będzie w zwróconym obiekcie pod kropka value, a

2:11kiedy ona zakończy iterację. Otóż wtedy, kiedy done będzie miało wartość true. Tutaj

2:16sprawdzałem to ręcznie, natomiast pętla for of wie kiedy ma zakończyć, bo w tym zwróconym

2:21obiekcie właśnie widzi, że done to jest true. No i wtedy wyskakujemy z

2:25tej pętli i przechodzimy do wykonywania kodu, który jest poniżej. To co

2:29jest ważne, ta pętla potrafi iterować po każdym obiekcie, który zawiera w sobie iterator, gdybyśmy

2:34sobie tutaj chcieli zrobić string czy przeiterować po stringu, to mogę zrobić

2:38pętle for of i napiszemy sobie let ch, jak character

2:42of Piotr. String też

2:46zawiera w sobie iterator, dlatego mogę wyświetlić console.log ch i zobaczymy

2:51poszczególne literki wybrane właśnie z tego słowa, więc

2:55jest to o tyle istotne tutaj, że wszystko co jest iteratorem może być

2:59użyte na pętli for of i jeszcze to zobaczysz w tym kursie. Natomiast

3:04na koniec chciałbym ci pokazać jeszcze jeden ciekawy przykład, który nie płynie bezpośrednio ze specyfikacji

3:08EcmaScript 6, ale tym razem ze specyfikacji HTML. Chodzi o

3:12to, że jeżeli na stronie i tutaj dołączyłem sobie takie elementy li, widzimy

3:17je tutaj i jeżeli sobie tych elementów wyszukamy za pomocą takiego

3:21zapisu. Może ja napiszę lis document querySelectorAll.

3:28No i wyszukamy sobie tutaj tych elementów. One się znajdują tak naprawdę po wstawieniu

3:32w tym miejscu w takim div'ie edu-content, z taką

3:36klasą. Więc wyszukajmy to sobie. Mam nadzieję, że znasz taką metodę, ona

3:40nie jest w JavaScripcie, tylko w obiektowym modelu dokumentu. Wyszukajmy wszystkich

3:44elementów li i zobaczymy w przeglądarce czym jest właśnie ta zmienna

3:49lis. Może to co mieliśmy wcześniej wykomentujemy, żeby nam tutaj było

3:53to wszystko lepiej widoczne i ja sobie jeszcze odznacze tę opcje, żeby nam się komunikaty nie pojawiały

3:58i zobaczymy co to jest lis. Wygląda tak jak tablica, ale tak naprawdę jeśli

4:02byśmy napisali lis constructor, to zobaczymy, że jest to tak zwany notice,

4:06czyli taka jest jakby klasa tego zwróconego obiektu i to co

4:10jest ciekawe, to w w specyfikacja HTML5 dodała do tej klasy iterator,

4:15dlatego można iterować po elementach notice, czyli takich zwróconych na

4:19przykład z document query SelectorAll za pomocą pętli for of i teraz

4:24będę chciał ci to pokazać tutaj. Normalnie musielibyśmy po nich iterować za pomocą

4:28na przykład zwykłej pętli for, gdzie robiliśmy var i na przykład równa się 0

4:32i jest mniejsze od lis length i tak

4:36dalej. Natomiast od jakiegoś czasu również metoda z tablic jest tutaj na nich dostępna,

4:41więc mógłbym napisać lis for each. No i tutaj skorzystać

4:45z takiej metody, też jest dostępna, aczkolwiek inne metody tablic, jak map nie

4:49są dostępne, ale zobacz o ile to można uprościć, od kiedy wiemy, że taki

4:53obiekt NodeList zawiera w sobie iterator. Możemy napisać for

4:57i tutaj napiszemy sobie let, powiedzmy li of

5:01lis i tyle wystarczy i za każdą iteracją pod li będę miał

5:05jeden wybrany obiekt i to co jest też fajne z użyciem let, pamiętasz, tutaj

5:10poniżej to li nie będzie już dostępne, więc naprawdę można tutaj nie oplatać z tego

5:14żadną funkcją, a bardzo wygodnie pracować i tworzyć sobie na przykład lokalne zmienne,

5:18dlatego odwołam się do każdego li, następnie do style. To jest

5:22z obiektowego modelu dokumentu możliwość przypisywania styli i napiszemy sobie

5:26kolor, będę chciał go ustawić na wartość red, czyli na czerwony kolor. Zobaczmy. Po

5:31odświeżeniu tej strony wszystkie li powinny mieć czerwony kolor. Tak

5:35się nie stało, więc tutaj prawdopodobnie jakiś błąd nam się pojawił. Zobaczmy

5:40czy poprawnie wyszukałem tych wszystkich elementów. Wydaje się, że tak Zresztą przed

5:44momentem widzieliśmy je w konsoli. Ale jak tutaj widzę błędem

5:48jest to, że nie podałem poprawnego koloru, zabrakło jednego zera. Teraz po odświeżeniu każdy z tych

5:52elementów otrzymał to co można sprawdzić tutaj, kolor. Przeglądarka zamieniła go na

5:56notacji RGB, ale nie ma to żadnego znaczenia. Jak zatem widzisz pętla for

6:00of jest bardzo wygodna i pozwala nam iterować na wszystkich obiektach,

6:04które zawierają sobie iterator i jako ciekawostka wiesz już, że nawet niektóre wbudowane

6:08typy w obiektowym modelu dokumentu, takie jak NodeList, zawierają w sobie iterator.

6:13Dzięki czemu możemy bardzo wygodny sposób po nich iterować.