JavaScript: Tworzenie tablic

0:00Tablice są to takie konstrukcje, gdzie

0:02możemy jakby w jednym miejscu przechowywać wiele elementów. I

0:06w języku JavaScript w tablicy można przechowywać wszystkie typy danych, jakie

0:11tylko w języku JavaScript są reprezentowane.

0:13Więc na początek utwórzmy sobie tablicę, w

0:15której będą same liczby. Nazwę stałą numbers i tablicę w języku

0:20JavaScript tworzymy za pomocą pary takich nawiasów kwadratowych.

0:24W tym momencie utworzyłem pustą tablicę.

0:25Jest to jak najbardziej poprawny kod, natomiast chciałbym tę tablicę uzupełnić.

0:30Więc wpiszę sobie do środka jakieś elementy i oddzielamy je przecinkiem,

0:34więc podam sobie 1, 2, 3, 4.

0:37I teraz co jest ważne?

0:39Tutaj podałem po prostu pojedyncze wartości liczbowe, ale mógłbyś tutaj

0:43wstawić również odwołanie się do jakiejś zmiennej itd.

0:47Czyli jeżeli miałbym zmienną np.

0:48number, tu bym sobie zapisał 10 to mogę tę zmienną

0:52w tym wypadku jest to akurat stała wstawić tutaj.

0:55Czyli nie muszą być w tablicy literalnie wpisane wartości,

0:58można w dowolny sposób tutaj się do nich odwołać.

1:01I co ważne możesz w tablicy przechowywać obok siebie różne wartości.

1:05Ja tutaj wstawiłem same liczby, ale możemy tutaj również wstawić np.

1:09string,

1:10no i wszystko inne, co w języku JavaScript możesz przypisać do zmiennej.

1:15Teraz jak się odwoływać do poszczególnych elementów tablicy, bo skoro tablica jest taką

1:19konstrukcją, w której możemy wiele różnych elementów przechowywać, to przechowujemy

1:23je po to, żeby móc się też w jakiś sposób do nich odwołać.

1:26No i możemy się odwołać na przykład do tego

1:28drugiego elementu tablicy, odwołując się oczywiście do niej.

1:32Mamy ją pod stałą numbers

1:35i używając nawiasów kwadratowych i podając indeks, pod którym jest element, którego

1:40wartość chcemy zwrócić jako takie wyrażenie.

1:42I teraz tablice w języku JavaScript są indeksowane od zera.

1:45To oznacza, że pierwszy element w tablicy ma indeks 0

1:49czyli pod number mieliśmy jedynkę,

1:51to tak jak byśmy tutaj wstawili tą jedynkę i ona jest pod indeksem 0.

1:55Potem jest indeks pierwszy, drugi, trzeci.

1:58Czyli jeżeli chcemy się odwołać do tej

1:59dwójki to ona jest pod indeksem 1 bo 0 1 i dlatego tutaj podaję liczbę 1.

2:05Zauważ, że też podajemy tutaj to jako typ number.

2:08Mógłbyś również tą jedynkę mieć zapisaną w

2:11jakieś zmiennej i podstawić tutaj nazwę zmiennej.

2:13W ten sposób też byłoby ok.

2:15Chodzi o to, żeby podać liczbę reprezentującą indeks, który chcemy

2:18odczytać. Czyli całe takie wyrażenie numbers 1 zwróci nam dwójkę.

2:23Jeżeli tutaj byłoby 20, to by zwróciło 20, bo chodzi o to, że pod indeksem 1 w

2:29tablicy numbers znajduje się liczba 2, czyli całe to wyrażenie ewalouje do dwójki

2:33tak jakbyśmy ją tutaj po prostu ręcznie wpisali.

2:35Więc gdziekolwiek się w ten sposób odwołamy, będziemy mieli dwójkę.

2:40A więc możemy to również przekazać do console.log i zobaczyć w przeglądarce.

2:44I jak widzisz, oczywiście liczba 2 tutaj się pojawia.

2:47W tablicy oczywiście mogą być również

2:49dowolne wyrażenia, które najpierw będą ewaluowane,

2:52czyli jak tutaj mam dwójkę i wpisałbym 2 + 10

2:54to oczywiście najpierw to byłoby wyliczone,

2:58dałoby nam to 12, zostałoby zapisane pod

3:01tym pierwszym indeksem no i zobaczylibyśmy tutaj oczywiście 12, więc jak najbardziej

3:05można również w ten sposób z tego korzystać.

3:08Każde wyrażenie JavaScript może się w takiej tablicy znaleźć i ono po prostu

3:12jest najpierw wyliczane, dopiero później jest tworzona cała ta tablica.

3:15Skoro w tablicy może być wszystko, to

3:18oznacza, że w tablicy może być również druga tablica.

3:21Zatem utwórzmy sobie taką tablicę arrays,

3:24bo z angielskiego array to jest właśnie tablica,

3:27więc stworzyłem stałą, którą nazwałem tablice i stworzyłem tutaj pustą tablicę.

3:32I w niej, tak jak wspomniałem, może być wszystko, więc mogę utworzyć w niej drugą

3:36tablicę jak najbardziej, w której będą trzy elementy 2, 3, 4.

3:40Tutaj robię przecinek i tworzę kolejną tablicę, gdzie na

3:43przykład będzie 4, 2, 1, a tu mógłbym jeszcze mieć np.

3:48Piotr. W tym przykładzie oczywiście nie ma to

3:50jakiegoś większego zastosowania, ale cały czas jest to poprawny kod.

3:54Czyli jak się teraz temu przyjrzymy, to mamy tablicę zapisaną tutaj.

3:58I to jest ta tablica z tymi żółtymi nawiasami.

4:00Ona ma dwa elementy.

4:02Pierwszym jej elementem, czyli pod indeksem 0 znajduje się inna tablica, a

4:06pod indeksem 1, czyli jako drugi element znajduje się ta tablica.

4:10Dlatego teraz jeżeli bym zrobił console.log arrays 0, czyli mówię

4:15zwróć mi tutaj pierwszy element tej tablicy, to pierwszym elementem jest inna

4:19tablica i w konsoli zobaczymy taką tablicę 2, 3, 4.

4:23Z kolei jeżeli chciałbym się odwołać np.

4:25do tej dwójki, albo może do trójki, to muszę mieć odwołanie do tej tablicy.

4:30Zatem jeżeli arrays 0 zwraca mi tą tablicę to mogę następnie zrobić coś takiego i

4:36powiedzieć 1 i indeks 1 jest już wyszukiwany na tej tablicy.

4:41Bo tutaj trzeba cały czas patrzeć na to co się dzieje.

4:43Jeżeli arrays 0 zwraca mi tą tablicę

4:46to jest tak jakbym sobie ją tutaj podstawił

4:48i na niej się odwołuje do pierwszego indeksu, czyli zwróci mi to trójkę.

4:52Zobaczmy. Dokładnie tak też się stało.

4:55I na koniec pokażę Ci jeszcze, że tablica

4:58jest pewnego rodzaju obiektem, o obiektach jeszcze będziemy mówić,

5:01I ma ona właściwość length, która mówi nam ile jest elementów w tablicy.

5:06Czyli jeżeli wyświetli byśmy sobie może tutaj wyżej to zrobimy z tej

5:09pierwszej tablicy console.log numbers kropka length,

5:13czyli odwołujemy się do takiej właściwości

5:14tablicy jak length, to zwróci nam to właśnie ile jest elementów w tablicy.

5:19Tutaj jest jeden element, to będzie drugi element jako 12,

5:22trzeci i czwarty. Czyli numbers length zwróci nam liczbę 4. Po prostu.

5:28Zobaczmy, dokładnie tak tutaj tą czwórkę widzimy.

5:31Jest to zwracane jako typ number, czyli

5:33jak byśmy sobie to gdzieś przechwycili do jakiejś zmiennej, tutaj do stałej nazwałbym to length,

5:39można to nazwać dowolnie numbers.length,

5:42to po prostu tutaj będę miał czwórkę dokładnie w taki sam sposób jak bym sobie

5:46utworzył stałą i przypisał jej 4. Ale to może usunę i zostawię to w taki sposób.

5:52Czyli w języku JavaScript tablice tworzymy za pomocą pary takich nawiasów

5:55kwadratowych i jej poszczególne elementy oddzielamy przecinkiem.

5:59Mogą się tam znajdować wyrażenia, które najpierw będą wyliczone i ich wynik

6:03zostanie tutaj podstawiony, no i w tablicy mogą znajdować się inne

6:06tablice i w zasadzie wszystko, co możesz reprezentować w języku JavaScript

6:10do takiej tablicy możesz wstawić.