JavaScript: Operator spread na tablicach

0:00W tej lekcji pokażę Ci jak działa operator spread na tablicach.

0:04Jest to również funkcja języka JavaScript dostępna od standardu ES6, a więc bez

0:08problemu możemy z niej korzystać w nowoczesnych przeglądarkach internetowych.

0:12Utworzę sobie tablicę arr1 i przypiszemy jej jakieś trzy liczby wewnątrz

0:19I teraz to co będziemy chcieli zrobić, to będziemy chcieli utworzyć drugą tablicę,

0:23gdzie połączymy tę tablicę z jeszcze jedną.

0:26Czyli chciała napisać arr2 i zrobilibyśmy tutaj arr1

0:31i na tablicach mamy metody.

0:33Jedną z metod jest concat, bo najpierw

0:35chcę Ci pokazać jak to zrobić z użyciem tej metody, a potem jak zrobić to z

0:38operatorem spread. Czyli możemy napisać concat

0:41a więc połącz tę tablicę z inną tablicą. No i tutaj możemy bezpośrednio wpisać tablicę

0:46albo przekazać jakąś zmienną, która ją przechowuje.

0:49Więc wpiszmy sobie tablicę, gdzie będzie 4, 5 i 6. I taki zapis sprawia, że ta pierwsza

0:54tablica w żaden sposób nie jest modyfikowana.

0:56Tutaj jest tworzona druga tablica, która będzie mieć w sobie jakby te dwie tablice.

1:01Zobaczmy sobie w konsoli co nam się tutaj pojawi.

1:04Jak widzisz dokładnie stało się tak jak

1:06powiedziałem, ale możemy z użyciem operatora spread

1:09sprawić, że nie będziemy korzystać z metody concat.

1:11No i to zależy od Ciebie, co dla Ciebie

1:13będzie bardziej wygodne czy bardziej czytelne.

1:16I można oczywiście z tego korzystać jeszcze w innych sytuacjach.

1:19O tym ja będę mówił potem w przypadku funkcji, ale jeżeli chodzi o tworzenie

1:23tablic, taką tablicę moglibyśmy z użyciem operatora spread stworzyć

1:26w ten sposób. Napisali byśmy arr2 i po prostu utworzyli byśmy pustą tablicę.

1:31Ale teraz do tej tablicy chciałbym rozstrzelić wszystkie elementy tej tablicy.

1:36Możemy tak o tym myśleć, że my chcemy je tam rozstrzelić, czyli tak jakby wstawić po

1:40kolei. I robi się to za pomocą tego operatora spread

1:44i są to po prostu trzy kropki. I teraz podajemy tablicę, więc podam arr1.

1:48Czyli jeżeli zrobię coś takiego,

1:50to wszystkie elementy tej tablicy po kolei zostaną wstawione tutaj.

1:54Gdybym zrobił tak, to utworzył bym nową

1:56tablicę, w której pod pierwszym indeksem, czyli pod zero jest cała ta tablica.

2:01Natomiast ja nie chcę mieć tablicy w tablicy, ale wszystkie jej elementy

2:05wstawić do nowej tablicy. A więc zrobimy to w ten sposób.

2:08I w tym momencie można powiedzieć, że mamy identyczną tablicę jak ta wcześniej.

2:12Ale jeżeli chciałbym tutaj dodać kolejną tablicę taką jak ta 4, 5, 6,

2:16to wystarczy, że tutaj po przecinku jako kolejny element podam znowu operator

2:21spread i albo podstawie zmienną, albo wpiszę bezpośrednio taką tablicę.

2:26Czyli mogłoby się wydawać, że ta nowa

2:27tablica będzie mieć tylko dwa elementy, bo to jest pierwszy i po przecinku drugi.

2:31Ale tak naprawdę będzie tutaj 6 elementów,

2:33bo pierwszą tablicę rozstrzelimy, czyli wstawimy wszystkie jej elementy tutaj i potem

2:38rozstrzelimy tę tablicę. I efekt będzie jak widzisz, dokładnie taki sam.

2:43Jak wspomniałem, operator spread jeszcze

2:45się może pojawiać w innych kontekstach w języku JavaScript,

2:48co jeszcze zobaczysz w tym kursie,

2:50natomiast w tej lekcji zapamiętaj, że

2:51właśnie w ten sposób można połączyć ze sobą np.

2:54kilka tablic.

2:55No i oczywiście nic nie stoi na przeszkodzie, żeby tutaj dodać kolejne

2:58elementy, gdybyśmy chcieli zrobić 7, 8, 9 itd.

3:03Więc jak najbardziej możesz to zrobić.