Czym jest tablica?

Tablica (ang. array) to struktura danych, która pozwala przechować wiele wartości w jednej zmiennej. Można ją traktować jak listę elementów ułożonych w określonej kolejności. Każdy element ma swój indeks (pozycję w tablicy), dzięki czemu możemy się do niego odwołać.

Tworzenie tablicy

W JavaScript tablicę definiujemy za pomocą nawiasów kwadratowych []. Przykład:

let zakupy = ["chleb", "masło", "mleko", "jajka"];

Powyżej utworzyliśmy tablicę o nazwie zakupy, zawierającą 4 elementy (łańcuchy znaków). Elementy są ponumerowane od 0. To oznacza:

• zakupy[0] // "chleb" (pierwszy element)

• zakupy[1] // "masło"

• zakupy[3] // "jajka" (czwarty element; pamiętaj, że liczenie zaczynamy od zera, więc ostatni indeks to 3)

Możemy odczytywać elementy tablicy używając tych indeksów lub zmieniać wartości pod danymi indeksami, np.:

zakupy[2] = "mleko 2%";

Powyższa instrukcja zmieni trzeci element na inną wartość.

Właściwość length

Każda tablica ma właściwość .length, która zwraca liczbę elementów w tablicy. Dla powyższego przykładu zakupy.length będzie wynosić 4. To użyteczne np. gdy chcemy przejść pętlą przez całą tablicę albo sprawdzić, ile danych przechowujemy.

Dodawanie i usuwanie elementów

JavaScript udostępnia wiele metod do manipulowania tablicami. Na razie poznamy dwie podstawowe:

• array.push(element) – dodaje nowy element na końcu tablicy.
• array.pop() – usuwa ostatni element z tablicy i zwraca go.

Posługując się nadal tablicą zakupy:

zakupy.push("cukier");
// Teraz tablica zakupy to ["chleb", "masło", "mleko", "jajka", "cukier"]

let ostatni = zakupy.pop();
// Metoda pop usunęła ostatni element ("cukier") i przypisała go do zmiennej 'ostatni'.
// Teraz tablica zakupy wróciła do poprzedniego stanu (4 elementy), a zmienna ostatni zawiera wartość "cukier".

Iteracja po tablicy

Często chcemy wykonać jakąś operację dla każdego elementu tablicy – np. wyświetlić je wszystkie. Do tego wykorzystujemy pętlę for. Używając właściwości length możemy napisać pętlę, która przejdzie przez indeksy od 0 do array.length - 1:

for (let i = 0; i < zakupy.length; i++) {
    console.log("Element " + i + ": " + zakupy[i]);
}

Jeśli zakupy = ["chleb", "masło", "mleko", "jajka"], powyższa pętla wypisze kolejno: "Element 0: chleb", "Element 1: masło", "Element 2: mleko", "Element 3: jajka". Dzięki temu w łatwy sposób przetwarzamy całą listę danych.

Oczywiście tablice mogą przechowywać nie tylko stringi, ale też liczby czy wartości logiczne, a nawet mieszankę różnych typów. Zazwyczaj jednak używamy tablic, by trzymać wiele powiązanych ze sobą danych tego samego rodzaju (np. lista ocen ucznia, lista produktów w sklepie itp.).

Ćwiczenia

1. Stwórz tablicę filmy zawierającą tytuły kilku Twoich ulubionych filmów (napisy). Następnie:
2. Wyświetl w konsoli, ile elementów ma ta tablica (użyj filmy.length).
3. Wypisz pierwszy i ostatni tytuł z tablicy (pamiętaj o indeksowaniu od 0; ostatni element ma indeks length - 1).
4. Do tablicy filmy dodaj na końcu jeszcze jeden film (metodą push), a następnie usuń ostatni element (metodą pop). Po każdej operacji wypisz całą tablicę w konsoli, aby zobaczyć, jak się zmieniła.
5. Napisz pętlę for, która przejdzie przez całą tablicę filmy i wypisze każdy tytuł na osobnej linii.
6. (Dla chętnych) Stwórz tablicę z kilkoma liczbami. Następnie użyj pętli, aby obliczyć sumę wszystkich liczb w tablicy. Wskazówka: zacznij od zmiennej suma = 0 i w pętli dodawaj kolejno każdy element tablicy do suma.