EcmaScript 6: Operator spread na iteratorach

0:00W tej lekcji kontynuujemy jeszcze poznawanie iteratorów dlatego, że chciałbym ci

0:04pokazać, co jeszcze z nimi się wiąże. Zobaczyłeś już, że po pierwsze możemy korzystać na

0:08przykład ich metody next, ale rzadko będziemy to robić ręcznie. Zatem zobaczyłeś,

0:13że pętla for of potrafi wykorzystać wewnętrzny iterator i jest

0:17to już dużo bardziej przyjemne w użyciu. Natomiast okazuje się, że również znany już

0:21ci operator spread korzysta z iterables, czyli

0:25on może być użyty na wszystkim, co zawiera w sobie iterator. Teraz ci pokażę jak to

0:29może wyglądać, przypomnę ci tylko, że na tablicy numbers

0:34już to w tym kursie przerabialiśmy, która ma w sobie wewnętrzny iterator, mogliśmy

0:39wykonać operator spread. Być może pamiętasz, mieliśmy tam taką

0:43metodę, ja tym jak Math.max i do niej trzeba przekazać

0:47poszczególne parametry, więc żeby to zrobić mogliśmy operatorem spread rozstrzelić

0:51tablice numbers i to nam zwróciło najwyższą liczbę, czyli 22.

0:56Zauważ, że mamy tutaj iterator z naszego powszedniego przykładu, który ręcznie utworzyliśmy,

1:00ale pod specjalnym kluczem symbol iterator i to sprawia,

1:04że on poprawnie działa i teraz pytanie, co by było gdybyśmy chcieli zamiast

1:09Math.max numbers zrobić Math.max id czyli

1:13nasz custom'owy obiekt, który sami stworzyliśmy. Pytanie czy operator spread nim

1:17zadziała. Zobaczmy. Okazuje się, że tak i piątka została zwrócona, czyli

1:22podobnie jak pętla for of, ten operator wie, jak długo ma wywoływać

1:26jakby wewnętrzną metodę next, dopóki ona nie zwróci done równa się true,

1:30więc zauważ, że wszystkie te liczby zostały zwrócone. Co ciekawe moglibyśmy

1:35tutaj oczywiście podać sobie jeszcze wartość 100, oprócz naszych liczb i ona

1:39też do Math.max byłaby przekazana i wtedy wynik byłby taki jak tutaj widzisz,

1:43więc zauważ, że to jest super ciekawe, że do dowolnego obiektu możemy dodać iterator

1:48i wtedy nie tylko pętla for of potrafi nam nim działać, ale również operator

1:52spread. Być może się domyślasz, co jeszcze moglibyśmy zrobić z takim

1:56naszym obiektem. Gdybym chciał z niego utworzyć tablice, to mógłbym sobie w końcu napisać

2:00tablica, to jest pusta tablica i do niej rozstrzelić wszystko, co jest w naszym obiekcie

2:04it. W ten sposób utworze tablice z poszczególnymi elementami, które są tutaj. Tutaj

2:09co prawda też była to tablica, ale one są pojedynczo zwracane. Niemniej jednak, to

2:13wcale nie musi być tablica jeszcze się o tym tym kursie przekonasz, ale myślę że i

2:17tak widać, że możesz zwrócić tutaj, co tylko chcesz, a gdybym chciał z tego utworzyć tablice,

2:21mogę skorzystać z takiego zapisu i mam prawdziwą normalną tablice, na

2:25której wszystkie metody będą dostępne. Wspominałem ci, że również string

2:29jest iterables. Można na nim iterować, więc gdybym chciał utworzyć tablice, która

2:33zawiera w sobie poszczególne litery stringu, mógłbym z kolei string rozstrzelić

2:37w taki sposób i znowu będziemy mieli tablice z poszczególnymi literami. Na

2:42koniec pokażę ci jeszcze jedną fajną rzecz. Jak można korzystać z tego operatora i

2:46wiąże się to z tworzeniem tablic. Otóż mieliśmy przykład w 31,

2:51tutaj taki gdzie pobieraliśmy sobie wszystkie

2:56elementy li i mówiłem ci, że od jakiegoś czasu specyfikacja

3:00HTML do takiego konstruktora NodeList dodała metodę

3:04for each, która była normalnie tylko na tablicach w JavaScripcie, więc można z niej

3:08skorzystać, ale co gdybym chciał skorzystać na przykład z metody filter, która jest dostępna na

3:12tablicach. Już ona tutaj nie będzie dostępna. No i w zasadzie możemy to sprawdzić,

3:16nawet tylko próbując się do niej odwołać. Chociaż nie musimy odwołać, bo będzie inaczej undefined

3:21i widzimy, że to nie jest funkcja. Jak zatem na czymś, co

3:25ma w sobie iterator, ale nie jest prawdziwą tablicą, tak jak na przykład obiekt NodeList

3:29wykonać metody dostępne na tablicach. Mam nadzieję, że już się domyślasz. Pokazałem

3:34ci wyżej, że jeżeli utworze tablica i rozstrzelę sobie dowolne elementy,

3:38które mają w sobie iterator, to będę miał tablicę poszczególnymi

3:42elementami. Skoro jest to tablica, to na niej mogę skorzystać z dowolnej metody,

3:46więc skorzystam z metody filter, zaraz będziemy korzystać jeszcze z jednej,

3:50więc sformatuję to w ten sposób, bo można tak zrobić i metoda filter

3:54działa tak, że jeżeli zwrócimy z niej true, to w nowej tablicy się znajdzie dany

3:58element, jeżeli false, to nie. Tutaj możemy sobie przekazać znaną nam już arrow

4:02function, która będzie przyjmować jeden konkretny element li. Pamiętaj,

4:06że tak dokładnie działa funkcja filter na tablicach i będziemy chcieli z tego

4:10zwrócić true lub false na podstawie li text content, czyli w tym

4:14momencie text content to jest pobieranie właściwości tekstowej tego

4:18konkretnego elementu już w obiektowy modelu dokumentu, czyli pobiorę sobie taki

4:22string i będę chciał sprawdzić czy w tym stringu jest dwójka. Jeżeli tak, to zwrócę ten element.

4:26Jeżeli nie, to nie, więc text content zwróci mi string i pokazywałem ci

4:30już w tym kursie, że mamy metodę includes, nowa metoda na stringach, która

4:35pozwoli nam określić czy dany string zawiera jakiś inny podciąg, a

4:39więc chciałbym zapytać czy text content tego li zawiera dwójkę.

4:43Jeżeli tak, to zostanie zwrócone true, dla wszystkich innych elementów będzie to false, więc

4:47filter zwróci mi nową tablicę, dlatego mogę połączyć tutaj kolejne

4:52wywołanie, na tej zwróconej tablicy i tym razem zrobię sobie for each. Znowu

4:56zrobię sobie tutaj funkcję typu arrow, będę miał wszystkie poszczególne li. Będzie

5:01tylko jedno, bo tylko jedno spełniło ten warunek i będę chciał się do niego odwołać i

5:05za pomocą style przypisać mu font-weight na

5:10wartość bold. Jeżeli sobie to odświeżymy, to na stronie okaże się, jak

5:14widzisz, że ten element, który miał dwójkę, od teraz ma przypisaną font-weight

5:18bold, no i zresztą widać, że jest pogrubione. Jak zatem widzisz, genialne

5:22jest to, że operator spread może być wykorzystywany na wszystkim, co zawiera w sobie iterator i jeżeli

5:27chcemy korzystać na przykład z metod tablic, to dany obiekt nie musi zawierać tych metod

5:31takich jak filter czy for each, ale wystarczy, że utworzymy w locie tablice do której

5:35z spread'em rozstrzelimy wszystkie poszczególne elementy właśnie z tego iterable

5:40i następnie możemy bez problemu korzystać z wszystkich metod dostępny na tablicach.