Tablice
Do przechowywania wielu zmiennych w JavaScript służą tablice. Mamy następujące trzy zmienne:
var fruit1 = "ananas";
var fruit2 = "brzoskwinia";
var fruit3 = "arbuz";równie dobrze możemy je umieścić w tablicy:
var fruitsArray = ["ananas", "brzoskwinia", "arbuz"];Do elementów tablicy dostajemy się poprzez podanie indeksu (pozycji). Ananas znajdzie się na pozycji o indeksie 0, a więc aby się do niego dostać, to korzystamy ze składni:
fruitsArray[0]; //indeks podajemy w nawiasach kwadratowychSiłą JavaScriptowych tablic są ich wbudowane metody. Jedna z nich .length była już wcześniej wspomniana.
Oto lista najczęściej używanych metod tablicowych:
| Tablica | Metoda | Działanie | Co zwraca |
|---|---|---|---|
| [a,b,c,d] | .length | Zwraca długość tablicy | 4 |
| [1,15,22,-1] | .sort() | Zwraca posortowaną tablicę | [-1,1,15,22] |
| ["ananas","brzoskwinia","arbuz"] | .push("kokos") | Doda na koniec tablicy nową wartość | ["ananas","brzoskwinia", "arbuz","kokos"] |
| ["ananas","brzoskwinia","arbuz"] | .pop() | Usuwa ostatni element tablicy | ["ananas","brzoskwinia"] |
| ["ananas","brzoskwinia","arbuz"] | .shift() | Usuwa pierwszy element tablicy | ["brzoskwinia","arbuz"] |
| ["ananas","brzoskwinia","arbuz"] | .unshift("kokos") | Dodaje jako pierwszy element tablicy | ["kokos","ananas","brzoskwinia","arbuz"] |
| ["ananas","brzoskwinia","arbuz"] | .reverse() | Odwraca kolejność elementów tablicy | ["arbuz","brzoskwinia","ananas"] |
Oto przykład użycia metody push:
Zadania
Zadanie 1
Do zadeklarowanej zmiennej spróbuj przypisać tablicę z ulubionymi serialami, tak by wyświetliła się poniżej.
Przejdź do pierwszego zadania:
Wskazówka: Pamiętaj, że tablica musi znajdować się w nawiasach kwadratowych, a jej wartości oddzielane są przecinkami.
Zadanie 2
W pliku JavaScriptowym do zadania 2 znajdziesz tablicę z latami oraz dwoma zmiennymi pomocniczymi. Zadeklaruj te zmienne, skorzystaj z odpowiednich elementów tablicy (nie wpisuj wartości liczbowych ręcznie), tak aby pod spodem prawidłowo wyświetlał się zakres wiekowy, w którym jesteś.
Przejdź do drugiego zadania:
Wskazówka: Konkretne wartości tablicy można przypisać do zmiennej w ten sposób.
var zmienna = tablica[index];
// albo
var zmienna2 = tablica[4];
Zadanie 3
W trzecim zadaniu wyznacz długość tablicy.
Przejdź do trzeciego zadania:
Wskazówka: Metod tablicowych używa się przez podanie nazwy tablicy i po kropce nazwy metody oraz, jeżeli wymaga tego metoda, podania wartości w nawiasach.
someNumbers.sort(); //teraz pod zmienną someNumbers znajduje się tablica
[2,5,9]
Zadanie 4
W pliku JavaScript znajdziesz tablicę z warzywami oraz drugą zmienną, która jest wyświetlana poniżej. Użyj odpowiednich metod, aby dodać na początku i na końcu, jakieś nowe warzywo.
Przejdź do czwartego zadania:
Wskazówka: Jeżeli nie wiesz, jakich metod użyć, wróć do tabeli z metodami tablicowymi.
Zadanie 5
Nic nie stoi na przeszkodzie, aby do tablicy wstawić inne tablice. Nazywa się to tablicami wielowymiarowymi a wyglądają tak:
Aby dostać się do wartości wewnątrz wewnętrznej tablicy należy najpierw podać indeks, na którym znajduje się sama tablica, a potem indeks wartości wewnątrz. Aby dostać się do wartości 29 należy użyć takiej konstrukcji:
Najpierw wybieramy nazwę tablicy, następnie indeks, na którym znajduje się tablica wewnętrzna ([2]), a na koniec indeks interesującej nas wartości wewnątrz drugiej tablicy ([3]).
W kodzie do zadania znajduje się tam wielowymiarowa tablica z markami i modelami samochodów, spróbuj przypisać do zmiennej poniżej wartość "Juke". Tak by wyświetlała się poprawnie.
Przejdź do piątego zadania:
Czy wiesz o co chodzi? Spróbuj wewnątrz tablicy z modelami samochodów zagnieździć jeszcze jedną tablicę (np. z datą produkcji) tak, aby zyskały kolejny wymiar. Następnie zmodyfikuj zmienną tak, żeby wyświetlała którąś z wpisanych przez Ciebie wartość.
Wskazówka: wartość zmiennej będzie wtedy wyglądać mniej więcej tak: array[x][y][z].
