JavaScript: Destructuring tablic

0:00W tej lekcji pokażę Ci coś, co nazywa się Destructuring i działa na tablicach

0:05i jest to taka funkcja języka JavaScript dostępna od standardu ES6, więc jest

0:09również bardzo dobrze wspierana we wszystkich przeglądarkach internetowych.

0:13Wyobraźmy sobie, że mamy taką tablicę,

0:15gdzie będziemy mieli zapisane jakieś pozycje myszy, czyli takie jak X i Y.

0:20To jest tylko przykład teoretyczny.

0:22Nazwiemy to mousePosition i powiedzmy, że mamy tam dwie takie liczby.

0:27Oczywiście w takiej tablicy może być cokolwiek i to, co Ci pokażę ma

0:30zastosowanie do absolutnie każdej tablicy, bez względu na to, co ona przechowuje.

0:34I teraz wyobraź sobie, że chcielibyśmy sobie

0:36utworzyć dwie stałe x i y, które przechowują te wartości.

0:39Taką tablicę moglibyśmy skądś otrzymać,

0:42to nie ma większego znaczenia, więc zróbmy sobie x i odwołali byśmy się

0:47oczywiście do mousePosition i następnie zero, czyli do pierwszego elementu tej tablicy. I

0:52będziemy mieli zapisane 100 w tej stałej x

0:56i to samo byśmy zrobili z y, mousePosition i tutaj przepisali byśmy 1.

1:01I teraz chcę Ci pokazać jak za pomocą

1:03Destructuringu możemy taki zapis skrócić do jednej linijki.

1:06Muszę go wykomentować, żebyśmy nie mieli błędu.

1:09I robimy to w ten sposób, że tworzymy

1:11sobie po tej stronie coś, co wygląda jak tablica,

1:14ale to nie jest tablica, to jest tylko

1:15taki zapis i piszemy sobie x, y i po tej stronie przestawiamy tablicę.

1:21Czyli mousePosition.

1:22Tutaj możesz podstawić stałą, która przechowuje tablice, stałą lub zmienną albo

1:26oczywiście bezpośrednio wstawić tutaj tablicę.

1:28Czyli taki zapis moglibyśmy wyciąć i wkleić w to miejsce.

1:31To nie ma znaczenia.

1:32Natomiast co tutaj się dzieje?

1:34Można powiedzieć, że po lewej stronie tego przypisania podstawiamy jakby szablon, na

1:39bazie którego chcemy utworzyć dwie stałe o nazwie x i y.

1:43Te nazwy oczywiście dowolne, takie same jak przy nazywaniu dowolnej zmiennej.

1:47Czyli jakbyśmy ten szablon sobie wzięli i tak go nałożyli na tę tablicę, to by się okazało,

1:52że x nałoży się na 100, a y nałoży się na 200.

1:55No i dokładnie to się stanie, jeżeli byśmy sobie wyświetlił te dwie zmienne w console.log.

2:01Zauważ, że do console,log można przekazywać wiele parametrów i one zostaną wyświetlone

2:05tutaj wtedy to mamy dokładnie pod x 100 i pod y 200.

2:09Czyli w ten sposób możesz dokonać tak zwanego Destructuringu tablicy.

2:13I na koniec to co jest ważne to ta tablica

2:15mogła by zawierać oczywiście więcej elementów, a Ty możesz wyciągnąć np.

2:19tylko te dwa,

2:20nie musisz robić nic z trzecim elementem, albo możesz wyciągnąć wszystkie elementy.

2:25To już zależy od Ciebie i jest to taki

2:26zapis, który po prostu sprawia, że nasz kod jest trochę krótszy

2:30i jeżeli ten zapis znasz, to ten kod jest również bardziej czytelny.