EcmaScript 6: Dekompozycja zagnieżdżonych struktur

0:00W tej lekcji kontynuujemy sobie jeszcze temat destructuring'u i pokażę ci jak

0:04możemy wyciągać dane z bardziej zaawansowanych zagnieżdżonych struktur, co

0:08wizualnie przynajmniej w kodzie na początku będzie wyglądać strasznie, ale jeżeli

0:12na spokojnie sobie to przerobisz na pewno to zrozumiesz i dodatkowo pokażę ci,

0:16że możemy łączyć destructuring obiektów oraz tablic. Nie ma z tym najmniejszego problemu,

0:20więc przejdźmy do kodu i mamy taki obiekt, który jest już nieco bardziej zaawansowane.

0:25Z tego powodu, jeżeli byśmy chcieli sobie tworzyć zmienne i wyciągać do nich

0:29poszczególne właściwości czy wartości z tego obiektu, no to musielibyśmy sporo

0:33zmiennych utworzyć i też one odwoływałyby się do tych struktur bardziej zagnieżdżonych.

0:37Dlatego dobrze, że możemy za pomocą destructuring'u w łatwiejszy sposób się do

0:41nich dobrać. Powiedzmy, że chciałbym wyciągnąć firstName, lastName, ale i na

0:45przykład experience, która jest tutaj albo na przykład nazwę zawodu,

0:50czyli programista. Już będę chciał ci pokazać jak to zrobić. Na

0:54początku wyciągniemy sobie firstName i age. Otworzę sobie znowu za pomocą let

0:58zmienne. One będą tutaj w przypadku jakby w takim obiekcie,

1:02czyli pamiętasz, że po tej stronie przy piszemy person lub jeszcze ten

1:06domyślny obiekt. Warto to zrobić, okej i teraz

1:11tutaj będziemy chcieli zrobić zmienną firstName, to już widziałeś, ale chciałbym utworzyć zmienną

1:15tak naprawdę o nazwie fName, a tutaj to pisze po to, żeby ci przypomnieć, czyli

1:20tak naprawdę lokalną zmienną z użyciem LED utworze o nazwie fName, która będzie miała wartości

1:24w tym przypadku Jan. Dodatkowo chcę wyciągnąć age i w konsoli

1:28sobie napiszę fName i age, tak aby się upewnić, że wszystko działa jak należy. Jest

1:33okej i teraz będziemy sobie chcieli wyciągnąć kolejną rzecz i w

1:37tym przypadku będzie to nazwa tego zawodu, czyli programista,

1:41więc chciałbym utworzyć zmienną, która bezpośrednio będzie przechowywała tę wartość.

1:45Zmienną tę chciałbym nazwać jobName, czyli chciałbym

1:49ją tutaj sobie mógł od razu podstawić i ona ma przechowywać programista, no

1:53i tutaj zaczynają się schody, można by było powiedzieć. W jaki sposób to mamy zrobić? Otóż

1:58po age postawię sobie przecinek i napiszę job i chociaż

2:02to wygląda dziwnie, to ja nie będę tworzył zmiennej o nazwie job, tylko tutaj muszę

2:07jakby odwołać się do tego, co jest obiekcie. Pamiętaj, że to co tutaj pokazujemy,

2:11to jest tak naprawdę jakby wzorzec, czyli innymi słowy gdybym to zapisał

2:15w ładny sformatowany sposób, to myślę, że miałoby to sens, bo zauważ jeszcze, jeśli

2:19to job usunę, co by się tutaj działo. Można to tak zapisać. Mamy

2:23obiekt firstName i tutaj napisałam fName, to znaczy, że chcę utworzyć zmienną

2:27fName, która przechowuje wartość, która dokładnie znajduje się w tym miejscu, age będzie

2:33miała wartość, która jest tutaj. Normalnie wyglądałoby to tak, ale że w obiektach już

2:37ci to pokazywałem, jeżeli coś się powtarza dwa razy, nie musimy tego pisać, ale gdyby

2:41się powtórzyło, to zauważ, że też ma to sens, mamy age, więc chce utworzyć

2:45zmienną o tej nazwie, która przechowuje tę wartość. Tak by to wyglądało. No,

2:49ale nie muszę tego pisać, jeżeli nazwa jest taka sama, dlatego tutaj mogę napisać job,

2:54bo chcę jakby wejść do tego obiektu i muszę go tak jakby otworzyć,

2:58bo tutaj pisze ten wzorzec i w tym miejscu jest zmienna name, więc muszę ją

3:02napisać i nazwa mojej zmiennej, chcę żeby przechowywała

3:06to co jest tutaj, więc dopiero wpisuje ją w tym miejscu, czyli jobName. Oczywiście

3:11jeżeli byśmy to zapisali w jednej linijce, byłoby to mniej czytelne, ale mam nadzieję, że teraz

3:15nabiera to sensu i zauważ, że okazuje się, że poprawna wartość została

3:19do tej zmiennej przypisana. Teraz, jeżeli chciałbym utworzyć zmienną jobExperience,

3:23tutaj sobie ją też wpiszemy, to

3:27pewnie już wiesz, że łatwo ją tutaj podać, mogę to zrobić w ten sposób wpisując

3:32tutaj, tak jak jest w obiekcie experience i jobExperience. Oczywiście,

3:38gdybym chciał nazwać zmienną tylko experience, to mógłbym tutaj napisać experience

3:42równa się ekspiriens albo tylko tak to zostawić. Dokładnie tak samo jak wyżej w przypadku

3:46age, ale sprawdźmy czy też ma to sens, jak najbardziej wszystko działa jak

3:50należy, czyli widzisz, że tutaj tak naprawdę tworzymy wzorzec, który ma być dopasowany

3:55do tego. Wyobraź sobie, że ten obiekt tutaj chociaż nie do końca jest to obiekt, nałożylibyśmy

4:00tutaj, bo przez taką kalkę, można powiedzieć, na górę tego obiektu i to,

4:04co by się pokryło, czyli na przykład jobName, w tym miejscu z tym. Wyciągamy

4:08sobie do nazwy takiej zmiennej. Wspominałem wcześniej, że możemy jeszcze

4:13łączyć sobie destructuring obiektów i tablic, więc powiedzmy, że chciałbym

4:17wyciągnąć sobie drugi ulubiony, drugą ulubioną liczbę. Tutaj mam

4:21coś takiego jak ulubione liczby. Jest to lista i chciałbym wyciągnąć drugą, czyli chcę mieć zmienną,

4:25która będzie się nazywała na przykład second i chciałbym,

4:29żeby w niej była ta wartość, więc znowu tutaj musimy sobie napisać coś co wygląda

4:34jak wzorzec. Odwołamy się zatem do for favNumbers. Jest

4:39to obiekt, następnie list. Musimy to napisać. Jest to tablica i

4:43skoro to, co ja teraz napiszę tutaj. Zostanie przyłożone jakby

4:47do tej tablicy, to tutaj mogę napisać to, co było w lekcji poprzedniej, czyli wzorzec destructuring'u

4:51ten tablic. Chcę pominąć pierwszy element, więc piszę przecinek, a drugi

4:56chcę zapisać pod zmienną second, czyli pamiętasz, że gdybyśmy to całkowicie sobie

5:00wyjęli i tutaj bym napisał let, a tutaj przyłożył taką tablice to pod

5:06zmienną second miałbym to, co jest tutaj, czyli 7, więc dokładnie tak samo będzie to działać

5:10w tym miejscu. Chociaż znowu wygląda może na początek nieco dziwnie, to

5:14zadziała poprawnie jeżeli tutaj bym napisał secund, to powinniśmy mieć

5:18wartość 7 i taka wartość też się pojawiła. Jak zatem widzisz,

5:22możemy tworzyć takie bardziej zaawansowane wzorce, które pozwolą nam wszystko wyciągnąć

5:27i chociaż na pierwszy rzut oka mogłoby się wydawać, że nie wiadomo jakie zmienne tworzymy,

5:31to tak naprawdę utworzyliśmy tutaj wyłącznie te zmienne, które ja w tym miejscu wypisałem.

5:35Żadnej innej zmiennej nie ma tutaj, takiej jak na przykład favNumbers w naszym zakresie. Kiedy

5:41nabierzesz już doświadczenia to to wszystko co jest tutaj, będziesz mógł zapisać w jednej linijce. Będzie

5:46to nieco dłuższe, ale oczywiście będzie działać dokładnie tak samo. Poćwicz sobie troszeczkę

5:50z tym zapisem. No i mam nadzieję, że już widzisz, że jest on bardzo przydatny. Nie

5:55zawsze jednak będziesz korzystał z takich zagnieżdżonych struktur, ale jeżeli przyjdzie taka potrzeba, to

5:59bez trudu zrób z nich wyciągniesz odpowiadające ci dane i z tymi danymi będziesz

6:04już mógł na podstawie zmiennej później pracować.