EcmaScript 6: Dodawanie iteratora do klasy

0:00W tej lekcji pokażę ci, jak możemy dodać iterator do klasy, czyli klasy możemy traktować jako

0:04swój nowy typ w JavaScripcie. Możemy sobie jakiś swój własny typ utworzyć, on

0:08ma własne metody, jakieś właściwości i pokażę ci teraz jak możemy iterator do

0:12tego dodać i również jak jest z tego będą korzyści. Ja już otworzyłem trochę kodu,

0:16nie przestrasz się, bo nie jest on skomplikowany. Zobacz że będziemy mieli pewnego rodzaju klasę

0:21model, która w konstruktorze przyjmuje jakiś obiekt, czyli tutaj dowolny obiekt możemy

0:25przekazać, który ma powiedzmy firstName, lastName i tak dalej, co tylko chcemy i zostanie

0:29to zapisane pod this data, a następnie każdy taki nowoutworzony obiekt, jeżeli z

0:33new model go utworzymy, będzie miał metodę get, która pozwoli nam wybrać

0:37jakieś dane. Jeżeli napiszemy kropka get firstName, no to z tego data to zwrócimy, a set

0:42pozwoli nam to ustawić, czyli tutaj nie ma nic skomplikowanego w razie czego na spokojnie sobie

0:46to przejrzyj i zrobiłem drugą klasę Collection, troszkę bardziej skomplikowaną,

0:50ale też nie jest jakaś trudna. Otóż, jeżeli stworzymy sobie new Collection to

0:54będziemy mogli przekazać od razu jakieś modele, tutaj do konstruktora, utworzymy

0:59w tym new Collection pustą tablicę i następnie sprawdzimy czy te przekazane modelem

1:03mają iterator. Przejdziemy zaraz do tego. Jeżeli mają iterator, to przekażemy

1:07je do metody populate, a ta metoda, zauważ, że pętla

1:12for of, która wymaga iteratora, dlatego sprawdziłem czy te modele mają iterator, pętlą

1:16for of przeiteruje po wszystkich przekazanych modelach i każdy

1:21z nich doda do tablicy models, tworząc z niego po prostu nowy model, czyli

1:25new model i tutaj przekażę jeden taki obiekt, jakiego tutaj oczekuje. Natomiast

1:29stworzyłem sobie metodę has iterator. Zauważ, że jest to metoda statyczna,

1:33o czym też się już uczyłeś, dostępna na Collection i jeżeli przekażę

1:37dowolną rzecz, to chcę sprawdzić czy ta rzecz zawiera iterator, więc łatwo to sprawdzić, po

1:41pierwsze sprawdzam czy w ogóle coś zostało przekazane i jeżeli tak to sprawdzam czy typeof

1:46tego obiektu, symbol iterator czy to jest funkcja, czyli

1:50czy pod symbol kropka iterator znajduje się funkcja. Jeżeli tak, to znaczy, że dany obiekt

1:54ma iterator. No i taką właśnie metodę sobie utworzyłem i jeszcze

1:58jedna rzecz, którą tutaj mamy. Jest to stała users i tutaj odwołujemy

2:03się do windows, window users. Zauważ, że tutaj w pliku HTML dodałem

2:07sobie skrypt właśnie windows users i mamy od razu jakiś użytkowników i zrobiłem

2:11tutaj żeby nie zaśmiecać naszego kodu JavaScript'owego, więc pod users

2:16będziemy mieli jakiś użytkowników i możemy to podejrzeć konsoli, wpisując

2:20po prostu users i zauważ, mamy jakieś obiekty. Teraz zatem

2:25będę chciał utworzyć sobie nową kolekcję i napiszemy sobie let

2:29users równa się new Collection i przekażę tam users. Oczywiście

2:35mogę tutaj od razu napisać kropka, window kropka users, ale sobie to zapisałam jeszcze

2:40w stałej, żeby mi nikt tego nie nadpisał. Prześledźmy zatem, co się

2:44stanie. Otóż do new Collection przekazuje users. Wiemy, że jest to tablica, która

2:48nam się tutaj wyświetliła z różnymi obiektami, więc wywołuje się konstruktor i sprawdza

2:52czy te przekazane users jest to tablica czy zawiera w sobie iterator. Zawiera,

2:57więc wywołajmy metodę this populate, przekazując tam wszystkie te modele.

3:01Czyli tak naprawdę te dane, tą tablicę. Metoda populate, pętla

3:06for of, przeiteruje przez każdy z tych elementów i na podstawie

3:10każdego pojedynczego takiego modelu, takiego na przykład obiektu, zobacz,

3:14on ma tutaj różne właściwości, utworzy nowy model, czyli zrobieni new Model i

3:18zwróci nam z takiej klasy model. Zapiszemy sobie to tutaj, więc będziemy to mieli

3:22w kolekcji. No i teraz chciałbym móc, na tym twoim typie, jak jakim

3:26jest kolekcja, korzystać i z pętli for of i z iteratora. Zobaczmy

3:30czy jest to możliwe, gdybym chciał sobie napisać w konsoli users. Zwróci

3:36mi całą naszą kolekcję, natomiast gdybym chciał napisać coś w tym

3:40stylu, utworzył nową tablicę i chce rozstrzelić users. Będziemy mieli błąd

3:44dlatego, że nasza klasa nie zawiera w sobie symbol iterator, co tutaj widać,

3:48dlatego możemy teraz dodać do klasy na prototypie iterator. Jest

3:53to bardzo proste, zrobimy to w tym miejscu. Ja go od razu wkleję. Zauważ,

3:57że możemy w klasie, już ci to pokazywałem, tworzyć sobie wyliczone właściwości. Czyli

4:01możemy je nazwać, jak chcemy. Stąd też możemy, tak jak i w obiektach, dodać tutaj symbol

4:06kropka iterator i taki iterator będzie dodany na prototypie takiej klasy. I

4:10tutaj już nie ma nic, czego byś nie znał. Mieliśmy już ten przykład, tylko że mieliśmy

4:14na sztywno wpisane numbers, a ja to zamieniłem na this models, this models

4:18jest tablicą. No i tutaj sobie sprawdzam, po prostu, models i models. Innymi

4:23słowy stworzyliśmy iterator, który będzie po kolei zwracał wszystkie modele z this kropka

4:27models. Jeżeli teraz to napisze i spróbuję w przeglądarce utworzyć

4:31nową tablicę z obiektu users. Okaże się, że nie ma problemu, będziemy mieli tablicę,

4:36w której jest 10 obiektów model. Jak widzisz, wszystko

4:40działa, jak należy i dodaliśmy sobie do swojej klasy iterator. Jeżeli wydaje ci to zbyt

4:44skomplikowane, bo już na początku dałem tutaj dużo kodu, to proszę na spokojnie sobie to przejrzyj,

4:48bo tutaj nie ma nic naprawdę skomplikowanego, a zrobiliśmy już jakieś

4:52podwaliny pod jakiś framework, gdzie można tworzyć nowe modele i kolekcje

4:56i można do tych modeli dodawać metody. Więc teraz chciałbym z jakiejś z tych

5:00metod skorzystać. Chciałbym zatem przeiterować sobie po wszystkich

5:04modelach w users i odfiltrować te, których email kończy się na kropka

5:09biz. Zauważ, że te modele tutaj są i każdy z nich ma data i środku

5:13na przykład ma email i nie które kończą się na biz. Jak się

5:17dobrać do tego email. Otóż na każdym modelu zrobiłem sobie, pamiętasz, metodę

5:21get, której mogę podać, na przykład, email i zwróci mi to co jest w tym miejscu,

5:25a zauważ, że tutaj jest napisane model model model, bo są to obiekty właśnie

5:30z tej klasy utworzone. Więc będziemy mogli, tak jak w lekcji poprzedniej, na naszej

5:34kolekcji skorzystać z metody filter, która jest dostępna tylko na tablicach, tworząc

5:38nową tablicę operatorem spread, rozstrzelając czy rozstrzeliwując

5:43users, bo dodaliśmy iterator i następnie metodą filter już

5:47mogę sobie filtrować. Zrobimy sobie tutaj też arrow function. Jeden

5:51user będziemy mieli i gdybyśmy zrobili console.log, to pamiętaj, że będzie

5:56to taki obiekt utworzony z models. Widzimy, że tak jest, więc każdy

6:00z tego obiektu, czyli user zawiera metodę get, którą na samej

6:04górze utworzyłem. Zatem chcemy sobie pobrać user get email. Będzie

6:09to string i znasz już metody na stringach, takie jak na przykład EndsWith,

6:13więc chciałbym sprawdzić czy ten string email, kończy się na biz. Jeżeli tak,

6:18to zwrócimy ten element do nowej tablicy. Jeżeli nie, to nie. W ten

6:22sposób odfiltruje tylko te, które mają biz i gdybym tutaj napisał biz.

6:26No to oczywiście, moglibyśmy sobie to podejrzeć, wpiszemy

6:30biz i będziemy mieli trzy modele, gdzie każdy z nich ma dokładnie taki email.

6:35Okej, więc skoro sobie je odfiltrowaliśmy, to

6:39teraz chciałbym im zamienić ten email na kropka org. Zatem

6:43na tej zwróconej tablicy metodą for each znowu sobie wykonam arrow function. Będę

6:48miał jednego użytkownika w formie właśnie klasy model i na górze gdybyś

6:52zerknął utworzyłem dla każdego z nich na prototypie również metodę set. Jako

6:56pierwszy parametr podajemy klucz, czyli email, a jako drugi wartość, więc

7:00chcę, żeby tą wartością było dokładnie to samo co tutaj, czyli chcę pobrać email,

7:04ale metodą replace, na string'u, zamienić kropka biz

7:09na kropka org. Mam nadzieję, że nie jest to zbyt skomplikowane, więc

7:13zobaczymy i może faktycznie zapiszmy sobie tutaj w biz, okej.

7:18I teraz odświeżmy tutaj i zróbmy

7:22biz, żeby to sprawdzić, okej. Tam

7:27się pojawiła wartość undefined, bo for each nam nie zwraca już

7:31tablicy, na której operowało, więc musimy to zostawić takiej formie, ale będziemy mogli sobie

7:35teraz powiedzmy pętla for of, która też już na naszej kolekcji będzie działać. Zrobimy

7:39let user of users i każdemu

7:45z nich będziemy chcieli wyświetlić user get email, okej.

7:49Zróbmy sobie to w ten sposób, to wszystko już będzie działać i zauważ, że teraz żaden z nich nie ma

7:53emaila, który się kończy na kropka biz. Jest to taki prosty przykład, ale

7:58pokazałem ci, że możesz stworzyć sobie dowolną klasę i dodać do niej iterator. To

8:02co jest tutaj, jeszcze będzie można uprościć, w przypadku generatorów, o czym powiemy sobie później.

8:06Niemniej jednak, już widzisz, że dodanie symbol kropka iterator sprawia,

8:10że możemy na naszym typie, który utworzyliśmy później z takiej kasy na

8:14users korzystać z operatora spread czy na przykład z operatora czy w

8:18zasadzie z pętli for of, a dodatkowo jeżeli chcemy wypożyczyć sobie metody

8:23tablic, to możemy w locie utworzyć tablice, gdzie wstawimy całe, cały

8:28nasz obiekt oraz rozstrzelimy operatorem spread i wtedy wszystko działa jak należy, a nie

8:32musimy dziedziczyć z array po to, żeby mieć metody tablic.