Podstawy Programowania: Tworzenie tablic

0:00Zobaczmy teraz jak tablice działają w praktyce. Więc pokażę Ci jak możemy

0:05utworzyć swą pierwszą tablicę. Stworzymy stałą bo potrzebujemy czegoś co na tą

0:10tablicę będzie przechowywać, nazwiemy ją numbers, pamiętaj cały czas, że te nazwy są

0:15dowolne i będziemy chcieli utworzyć tablicę.

0:18Przy takim zapisie otworzyliśmy właśnie

0:20pustą tablicę, która nie ma żadnych elementów ale ja będę chciał ją uzupełnić

0:24jakimiś liczbami bo nazwaliśmy ją numbers czyli w domyśle chcemy tutaj przechowywać

0:29jakieś liczby. I do tablicy wystawiamy poszczególne jej

0:33elementy po przecinku czyli mogę napisać 1, 3, 4, 5 i teraz co ważne

0:39przed przyciskiem to co się znajduje to jest jakaś wartość a przecinek to jest tak

0:42jakby oddzielenie takiej komórki. Możesz sobie wyobrazić, że to jest taka tabelka

0:47w pewnym sensie i ona tutaj ma powstawiane różne elementy, przecinek po prostu oddziela.

0:52Czyli mamy tutaj w tym przypadku cztery elementy.

0:54Pierwszy to jest 1, 3, 4 i 5.

0:58I co ważne tablica może przechowywać różne

1:00wartości jakie można reprezentować w języku JavaScript więc do tej pory

1:04widziałeś wartości liczbowe takie jak tutaj mamy np. 5

1:06ale widziałeś też tekst taki jak np.

1:10Jacek. To cały czas jest poprawny zapis. Po prostu

1:13w tej tablicy na początku mamy cyfrę 1, 3, 4 a potem mamy tekst

1:17Jacek, czyli wszystko w tablicy przechowywać można w różnej konfiguracji w

1:21różnej kolejności. Ale na razie zostawmy sobie tutaj tylko te liczby i będę chciał

1:26Ci pokazać jak można się do poszczególnych indeksów tej tablicy odwoływać.

1:30Dlatego, że tablice są indeksowane a to oznacza, że jeżeli wstawiliśmy tutaj

1:34cztery elementy to one zajmują swoje indeksy. I tablice są indeksowane od zera,

1:39to oznacza, że pod indeksem 0 w tej

1:42tablicy znajduje się jedynka pod indeksem 1 znajduje się trójka pod indeksem 2

1:48czwórka i pod indeksem 3 znajduje się piątka.

1:51Czyli zaczynamy po prostu od zera.

1:54Natomiast teraz żeby dostać się do tych

1:55poszczególnych indeksów to musimy się odwołać do tej tablicy no i żeby to

2:00wyświetlić oczywiście to skorzystamy z console.log ale ważne jest to co tutaj wstawimy.

2:04Napiszemy numbers czyli odwołujemy się do naszej stałej, ona kieruje na tablicę i za

2:09pomocą takiego zapisu podajemy indeks, który chcemy odczytać. Więc jak podamy 0

2:15to oznacza, że chcemy odczytać indeks zero. Czyli tak naprawdę pierwszy pod indeksem

2:20zero znajduje się jedynka. Tu już nam Quokka podpowiada, że będzie to 1 jeżeli

2:24zapisze faktycznie po wykonaniu tego programu jest to jedynka. Więc tu jest 0, 1,

2:292, 3 a więc jeżeli podamy indeks trzeci to pod nim znajduje się piątka.

2:34Jeżeli byśmy podali indeks czwarty a widzimy, że tutaj nic więcej w tej tablicy

2:38nie ma to zostanie nam zwrócona ta magiczna wartość and undefined.

2:42Ta sama, która była w przypadku zmiennej,

2:45którą jeżeli utworzyliśmy na przykład zmienna i nie podaliśmy jej żadnej wartości,

2:49ona też miała wartość undefined. Więc w ten

2:52sposób to wygląda. Natomiast pod indeksem trzecim znajduje się piątka,

2:56tutaj jest wszystko OK.

2:58Jeżeli natomiast chcielibyśmy sprawdzić ile jest elementów tablicy czyli np.

3:01czy tablica jest pusta czy nie, służy do tego specjalna właściwość length.

3:06Natomiast zanim to zrobimy policzmy sobie ile ta tablica ma elementów raz, dwa, trzy,

3:11cztery czyli ta tablica ma cztery elementy.

3:14Możemy to sprawdzić w kodzie żeby wiedzieć ile tablica ma elementów. Zróbmy sobie znowu

3:18console.log odwołujemy się do tej tablicy poprzez numbers.length.

3:23To jest odwołanie się do właściwości,

3:25więcej jeszcze o właściwościach powiemy w przypadku obiektów,

3:28natomiast to jest taka dynamiczna właściwość, która nam zwraca cyfrę w tym

3:33przypadku 4. Czyli operujemy tutaj ciągle na tych typach danych, o których mówiliśmy,

3:37że my możemy używać albo na przykład liczb, czyli to jest

3:42typ danych liczba albo możemy używać stringów itd.

3:45I co ciekawe również można powiedzieć, że język nam to zwraca w wielu miejscach. Jeżeli

3:49się odwiedzamy numbers.length to nam pokazało, że jest to czwórka

3:53ale gdybyśmy to przechwycili w zmiennej czyli byśmy napisali coś takiego np.

3:57const length= numbers.length to

4:01teraz pod zmienną length, w tym przypadku jest to stała, pod tą stałą length będziemy mieli

4:06czwórkę i na tej czwórce można wykonywać oczywiście takie same operacje jak na

4:10każdej innej wartości liczbowej. To tylko warto żebyś jakby zauważał tutaj, że to wszystko

4:14się ze sobą łączy, że kiedy pytamy ile elementów jest w tablicy otrzymujemy czwórkę ale ta

4:19czwórka, która jest zwrócona jest to po prostu wartość liczbowa,

4:22nie jest to jakiś tam tekst, który nas tylko

4:24informuje o tym ile tych elementów w tablicy jest.

4:28OK. Teraz jeszcze będę chciał Ci pokazać, że w

4:31tablicy możemy zapisywać również inne tablice.

4:34To jest coś co wygląda dziwnie ale już na początku wspomniałem, że w tej tablicy

4:38moglibyśmy zapisać jakieś cyfry i na przykład słowo Jacek. Czyli każda wartość,

4:42każdy typ danych, który w języku JavaScript jest reprezentowany można w takiej tablicy

4:46zapisać a to oznacza, że również inne tablice można tam zapisywać.

4:51Więc utworzyć taką tablicę, którą nazwiemy arrays, bo arry to oznacza tablica więc nazwijmy to

4:57tablice bo będziemy tam przechowywać kilka tablic.

5:00I teraz utworzyliśmy pustą tablicę.

5:02Swoją drogą jeżeli podejrzymy jej arrays.length

5:05czyli jej długość, zauważ, że zwraca nam 0 bo nic z tej tablicy nie ma.

5:10I teraz będę chciał do tej tablicy wstawić sobie jeszcze inne tablice.

5:14Czyli jeżeli zrobię coś takiego,

5:17znowu to może wyglądać dziwnie ale jest to poprawny zapis,

5:19to oznacza, że pierwszym elementem tej

5:22zewnętrznej tablicy jest inna pusta tablica.

5:25Jeżeli byśmy się odwołali do arrays 0,

5:28czyli mówimy pokaż mi jaki jest pierwszy element w tej tablicy,

5:32to nam pokazało, że jest to inna tablica.

5:35Ok.

5:36Więc uzupełniamy ją sobie i tutaj wpiszemy np.

5:401, 2, 3

5:42i zauważ, że ja tutaj mam też kolorowanie

5:44tych nawiasów więc dobrze to widać ale teraz zaznaczę to co zaznaczyłem jest to tablica,

5:49która znajduje się pod pierwszym indeksem tej drugiej tablicy.

5:53Następnie moglibyśmy sobie wstawić słowo Jacek.

5:55To by było pod indeksem drugim.

5:58Czyli tak naprawdę jeden bo pamiętaj, że to jest od zera czyli 0, 1

6:01a potem byśmy mogli wstawić jeszcze inną tablicę.

6:04Natomiast może zróbmy tak, że stworzymy tablicę, która ma jeden element Jacek

6:09a tutaj stworzymy jeszcze jedną tablicę, która będzie miała np.

6:145, 6, 7. Bardzo dziwnie to wygląda jestem tego świadom,

6:18natomiast cały czas jeżeli się temu

6:20przyjrzeć z bliska i rozbijać na czynniki pierwsze, nie ma tutaj nic skomplikowanego.

6:24Ta z żółtymi nawiasami to jest jedna tablica

6:27i ona ma trzy elementy. To jest pierwszy jej element, to jest drugi jej element,

6:31jest to też tablica, która ma w środku jeden element i to jest trzeci element

6:36więc jeżeli teraz byśmy się odwołali do arrays 0 to nam zwróci 1, 2, 4. Czyli to

6:43jest pierwsza rzecz, która się znajduje w tej tablicy.

6:46Jeżeli byśmy się teraz odwołali do

6:490 to zwróciło nam jedynkę i to już może być skomplikowane

6:53ale Ci to tłumaczę. Skoro ten zapis arrays 0

6:57i wróćmy może do niego, zwrócił nam pierwszy element tej

7:01głównej tablicy to skoro pierwszym elementem tej głównej

7:04tablicy jest taka tablica to na tej tablicy.

7:07Gdybyśmy się odwołali znowu takimi

7:09nawiasami i to właśnie robimy tutaj i powiedzieli zwróć mi to co jest w niej pod

7:13indeksem 0, no to tutaj jest jedynka. Dlatego nam pokazało 1.

7:17Jeżeli pod indeksem pierwszym czyli 0 1 to zwróci nam dwójkę.

7:23Myślę, że nie ma tutaj nic bardzo

7:24skomplikowanego ale na pierwszy rzut oka może to dziwnie wyglądać.

7:27Natomiast jeżeli tutaj na tej głównej

7:29tablicy arrays powiemy zwróci mi to co masz pod indeksem pierwszym to będzie to Jacek.

7:35Więc zobaczmy, zwróciło mi Jacek ale nie

7:38bezpośrednio wartość tylko tablicę, bo zapisałem to jako tablicę.

7:41Natomiast gdybym to zapisał jako wartość to byśmy bezpośrednio dostali Jacka.

7:46Więc to warto mieć na uwadze, że w takiej tablicy możesz przechowywać wszystko to co

7:50można przechowywać, to co można reprezentować w języku

7:53JavaScript. Może to być tak jak tutaj mogą to być cztery cyfry

7:56ale równie dobrze może to być jakaś inna tablica, kolejna tablica i kolejna tablica

8:01i do nich się właśnie w ten sposób odwołuje,

8:03że jeżeli arrays jeden zwróci mi

8:06taką tablicę Jacek to od tego momentu jak pisze takie

8:10nawiasem to zachowuję się tak jakbym się odwoływał już do tej tablicy Jacek i mogę

8:14powiedzieć, zwróć mi jej pierwszy element i zwróci mi to już wartość tekstową

8:19Jacek.

8:21Ok.To by było na tyle jeżeli chodzi o tablice.

8:22Jeszcze w tym kursie będziemy z nich korzystać.

8:25Tutaj pokazałem Ci w zasadzie wszystko co jest najistotniejsze.

8:28No i pamiętaj, że takie tablice dostępne są praktycznie w każdym języku programowania

8:32i będzie to tam działać podobnie aczkolwiek są takie języki programowania gdzie w tablicy

8:37można przechowywać tylko dane jednego typu a więc np.

8:40można stworzyć tablicę gdzie będą same

8:42liczby ale nie można do takiej tablicy wtedy dodać na przykład ciągu znaków albo

8:47można stworzyć tablicę gdzie będą same ciągi znaków itd.

8:50Więc to warto również mieć na uwadze. W języku JavaScript można w takiej tablicy

8:54przechowywać wszystko w dowolnej kolejności w dowolnej konfiguracji.