EcmaScript 6: Domyślne wartości i operator rest

0:00Cały czas pozostajemy jeszcze w tematyce destructuring'u. Natomiast teraz będę

0:04chciał ci pokazać, jak znany ci już operator rest wykorzystać w przypadku

0:08dekompozycji tablic oraz jak możemy korzystać domyślnych

0:12wartości, więc przejdźmy sobie od razu do kodu i utworzę sobie taką tablice, w

0:17której mamy liczby i będziemy chcieli kilka z nich sobie wyciągnąć do zmiennych.

0:21Powiedzmy, że chciałbym utworzyć zmienną, która się nazywała first,

0:25second i one będą miały tutaj 10 oraz 20,

0:29więc napiszemy numbers i tutaj napiszę również, że gdyby numbers to nie była tablica,

0:33to podaję taki tutaj parametr. Oczywiście ten operator nie

0:37sprawdzi czy jest to tablica, po prostu gdyby to była wartość fałszywa, na przykład null czy undefined.

0:41Warto sobie go zawsze podać. No i wiemy teraz, że pod tymi wartościami first

0:45i second mamy

0:50te wartości oczywiście można to sprawdzić. Natomiast teraz skorzystamy sobie z operatora

0:54rest, które pozwoli w formie tablicy zebrać nam pozostałe wartości. Pamiętasz

0:59jak na funkcjach z niego staliśmy, przy parametrach funkcji. Mogłem powiedzieć, że

1:03pierwszy nazywał się type, a wszystkie pozostałe mają być pod zmienną

1:07o nazwie args. Być może pamiętasz. Jeżeli nie, to wrócę do tej lekcji

1:11i ona była tablica, więc tutaj również mogę skorzystać z operatora

1:15rest pisząc trzy kropki i nazwę zmiennej, którą chcę utworzyć nazwijmy

1:19ją po prostu rest, aczkolwiek jest to dowolne i to oznacza, że first

1:24ma mieć wartość 10, second wartość 20, a pod rest mają

1:28być wszystkie pozostałe rzeczy z tej tablicy. Zebrane również w formie tablicy,

1:32więc jeżeli bym tutaj napisał sobie raz bo to będzie nazwa naszej zmiennej

1:37to zobaczymy, że mamy tutaj na początku 10, 20, a później tablice

1:41w której jest wszystko, co było dalej, czyli wszystkie pozostałe wartości. Gdybyśmy

1:45jedną chcieli pominąć, to znowu tutaj postawiony przecinek, czyli 30 w tym momencie

1:49jest ignorowane, a 40 i 50 będzie zapisane pod

1:53tablicą rest. Pamiętaj jednak, że ten operator zawsze zwraca tablice,

1:57czyli pod zmienną, którą nazwałem sobie rest mam normalną tablice

2:01zawierającą w tym przypadku 40 oraz 50. Tutaj również

2:05ważne jest to, że po tym operatorze nie możemy sobie podać jakieś innej

2:10zmiennej, którą chcielibyśmy nazwać, bo to również wygeneruje błąd. Rest

2:14musi być tak jak w przypadku funkcji zawsze na końcu. Teraz utwórzmy

2:19sobie jeszcze troszeczkę inną tablicę, bo będę chciał ci pokazać jak pracować z domyślnymi wartościami.

2:23Napiszmy znowu numbers i będzie to tablica, która ma wyłącznie dziesiątkę

2:28i teraz chciałbym sobie utworzyć zmienną first i zmienną

2:34second i przypiszę tutaj tablica numbers i żeby

2:38zawsze pamiętać przypiszmy jakiś pusty, również obiekt, pustą tablicę. No

2:42i sprawmy sobie, co będzie pod first i co będzie pod second. Domyślasz się pewnie, że pod

2:46second jest udefined. Natomiast co gdybym chciał zdefiniować domyślną wartość,

2:50jeżeli tutaj będzie undefined. Okazuje się, że podobnie jak w przypadku wartości

2:55domyślnych w funkcjach, tutaj można od razu napisać sobie równa się na przykład

2:592 i to oznacza, że jeżeli w tej tablicy nie będzie niczego pod

3:04drugim indeksem, bo tutaj mamy 01, czyli jeden to jest drugi indeks, druga

3:08wartość. No to wtedy będzie domyślnie 2. Zauważ, że tak też się stało. Natomiast

3:13pytanie czy chodzi tutaj tylko o undefined, czy o wszystkie wartości

3:17fałszywe. Gdyby tutaj podstawił zero, zero jest wartością fałszywą to

3:22czy będzie tutaj domyślny parametr domyślna wartość czy nie, okazuje

3:26się, że nie, czyli tutaj chodzi wyłącznie o przypadek, kiedy tam w środku będzie undefined.

3:31Nawet gdyby tutaj było null to null zostanie mi normalnie zwrócone,

3:35więc wyłącznie jeżeli tutaj byłoby wpisane undefined albo jeżeli po prostu

3:39w tej tablicy nic takiego nie ma, gdybym wpisał undefined, upewnijmy

3:43się również, domyślny parametr czyli dwójka został wzięty pod uwagę. W ten zatem

3:47sposób możesz przypisywać do dowolnych zmiennych, które tutaj tworzysz, od razu domyślny

3:52parametr i tutaj również mamy zjawisko lazy evaluation, o którym ci już mówiłem, w

3:56przypadku funkcji. Gdybyśmy tutaj wywoływali jakąś funkcję, na przykład getValue,

4:00to ona się wywoła wyłącznie wtedy, jeżeli rzeczywiście

4:05będzie taka potrzeba, czyli drugi element w tablicy nie będzie podany. Zostawmy

4:09sobie to jednak z dwójką i teraz pokażę ci jak korzystać z domyślnych wartości przypadku

4:14destructuring'u obiektów. Wkleję sobie tutaj obiekt, taki

4:18jak już widzieliśmy. Ten

4:22console.log może wykomentujemy i będę chciał zrobić prosty destructuring, czyli let

4:26i tutaj napiszemy sobie firstName, lastName

4:30i chciałbym wyciągnąć sobie jeszcze może job, w ten

4:35sposób i przypiszemy do tego person i warto pamiętać, znowu o domyślne

4:40wartości. No i teraz oczywiście zrobimy console.log firstName,

4:44lastName i job. No i nie powinno tutaj być żadnych niespodzianek. Jest

4:48to księgowy, ale napiszmy, że domyślną wartością i to robimy w tym przypadku, w

4:52ten sposób. Jest programista. Ona nie

4:56będzie znowu wzięta pod uwagę, zauważ, ale gdyby tutaj nie było księgowego, to

5:00wtedy programista będzie domyślną wartością. No i teraz jeszcze, żeby

5:05ci pokazać wizualnie jak to inaczej mogłoby wyglądać, gdybym chciał nazwać

5:09swoją zmienną nie job, tylko na przykład position to

5:13pamiętasz, że robiliśmy to w ten sposób i gdybym chciał jej przypisać

5:17domyślną wartość, wyglądałoby to dokładnie tak. Czyli teraz tutaj będziemy mieli zmienną position,

5:21zobaczmy, jest to programista, czyli pokazałem ci tak naprawdę już wszystko

5:26jak to może wizualnie wyglądać. W poprzedniej lekcji widziałeś zagnieżdżone struktury,

5:30a tutaj widzisz dodatkowo jeszcze, jak wyglądają wartości domyślne. No

5:34i tak by to wyglądało, jeżeli byśmy chcieli mieć nazwy zmiennej inną,

5:38niż nazwa właściwości i dodatkowo jeszcze domyślną wartość.