JavaScript: tablice, Array []

Tablica w języku JavaScript jest rodzajem globalnego obiektu, używanego do przechowywania danych. Tablice składają się z uporządkowanej kolekcji lub listy, zawierającej zero lub więcej typów danych, oraz używają numerowanych indeksów – począwszy od 0 – do uzyskiwania dostępu do określonych elementów.

Tablice są bardzo użyteczne z racji tego, że przechowują wiele wartości w jednej zmiennej, co może skrócić i zorganizować nasz kod, czyniąc go bardziej czytelnym i łatwiejszym w utrzymaniu. Tablice mogą przechowywać jakikolwiek typ danych: liczby, łańcuchy znaków i obiekty.

Dla przykładu przypiszemy pięć różnych planet naszej systemy do pojedynczych zmiennych.

// przypisujemy planety do rożnych zmiennych
const planeta1 = "Merkury";
const planeta2 = "Wenus";
const planeta3 = "Mars";
const planeta4 = "Jowisz";
const planeta5 = "Saturn";

Sposób ten może stać się trudny do utrzymywania i śledzenia bo generuje dużo zmiennych.

Możemy uprościć nasze dane, korzystając z tablic.

// przypisujemy planety
let planety = [
    "Merkury",
    "Wenus",
    "Mars",
    "Jowisz",
    "Saturn",
];

Zamiast tworzenia pięciu oddzielnych zmiennych, mamy teraz jedną zmienną, przechowującą wszystkie pięć elementów. Do stworzenia tablicy użyliśmy nawiasów kwadratowych – [].

Aby uzyskać dostęp do określonego elementu, dołącz jego indeks do zmiennej.

// wyświetlamy pierwszy element z tablicy planet
planety[0];

Merkury

Poniżej opiszemy, jak tworzyć tablice; jak są one indeksowane; w jaki sposób dodawać, modyfikować, usuwać oraz odwoływać się do elementów tablicy; oraz jak iterować po tablicach.

Tworzenie tablicy

Istnieją dwie metody tworzenia tablicy w języku JavaScript:

• literał tablicowy, wykorzystujący nawiasy kwadratowe,
• konstruktor tablicy, wykorzystujący słowo kluczowe new.

Zademonstrujmy teraz, jak utworzyć tablicę gatunków rekinów z wykorzystaniem literału tablicowego, która inicjalizowana jest przez [].

// inicjalizujemy tablicę żubrów 
let zubry = [
    "zubr nizinny",
    "zubr kaukaski",
    "zubr karpacki",
];

Poniżej znajdują się takie same dane stworzone z użyciem konstruktora tablicy – inicjalizowane przez new Array().

// inicjalizacja tablicy żubrów przy pomocy konstruktora tablicy
let zubry = new Array(
    "zubr nizinny",
    "zubr kaukaski",
    "zubr karpacki",
);

Obydwie metody utworzą tablicę, aczkolwiek metoda literału tablicowego (nawiasy kwadratowe) jest o wiele bardziej powszechna i częściej preferowana, podczas gdy metoda konstruktora new Array() może dawać niespójne i nieoczekiwane rezultaty. Warto być świadomym konstruktora tablicy na wypadek napotkania go w kodzie.

Możemy wyświetlić całą tablicę, która wyświetli się tak samo, jak nasze dane wejściowe.

// wyświetlamy wszystkich żubrów
zubry;

[ 'zubr nizinny', 'zubr kaukaski', 'zubr karpacki' ]

Tablice często bywają używane do grupowania list o podobnym typie danych, aczkolwiek formalnie mogą one przechowywać jakąkolwiek wartość lub mieszankę wartości, włączając w to inne tablice.

// inicjalizacja tablicy z mieszanymi typami danych
let mix = [
    "Ciag",
    null,
    7,
    [
        "jeszcze",
        "tablica",
    ],
];

Po utworzeniu tablicy możemy manipulować nimi na wiele sposobów, ale najpierw musimy zrozumieć, jak tablice są indeksowane.

Uwaga: Możesz napotkać ostatni element w tablicy z lub bez ostatniego przecinka. Znany jest on jako przecinek końcowy. Często zdarza się, że jest on pomijany, ale generalnie włączanie ich do kodu staje się preferowane z racji tego, że: zwiększa to czytelność zmian pomiędzy wersjami w systemie kontroli wersji, oraz ułatwia dodawanie i usuwanie elementów bez powodowania błędów. Zauważ, że przecinki końcowe nie są dozwolone w plikach JSON.

Indeksowanie tablic

Jeśli uczyłeś się o indeksowaniu i manipulowaniu łańcuchami znaków w JavaScript, to pojęcie indeksowania tablic może być już ci znane, jako że łańcuch znaków jest podobny do tablicy.

Tablice nie posiadają par nazwa/wartość. Zamiast tego, są one indeksowane liczbami całkowitymi, począwszy od 0. Poniżej znajduje się przykładowa tablica, przypisana do seaCreatures.

let programyNasa = [
    "Mercury",
    "Gemini",
    "Apollo",
    "Skylab",
    "Sojuz-Apollo",
];

Poniżej przedstawioną mamy analizę tego, w jaki sposób każdy element w tablicy programyNasa jest indeksowany.

Mercury	Gemini	Apollo	Skylab	Sojuz-Apollo
0	1	2	3	4

Pierwszym elementem w tablicy jest octopus, który indeksowany jest na 0. Ostatnim elementem jest starfish, który indeksowany jest na 4. Liczenie w indeksach rozpoczyna się od 0, co przeciwstawia się naszej intuicji rozpoczynania liczenia od 1, tak więc zapamiętanie tego (do momentu, w którym sposób ten staje się dla nas naturalny) wymaga specjalnej troski.

Możemy dowiedzieć się, jak wiele elementów znajduje się w tablicy, za pomocą właściwości length.

programyNasa.length;

5

Pomimo tego, że indeksy tablicy seaCreatures składają się z liczb od 0 do 4, to właściwość length zwróci faktyczną liczbę elementów w tablicy, rozpoczynając od 1.

Jeśli chcemy wyznaczyć numer indeksu określonego elementu w tablicy (takiego jak seahorse), możemy użyć metody indexOf().

programyNasa.indexOf("Skylab");

3

Jeśli numer indeksu nie został znaleziony (np. dla wartości która nie istnieje), wtedy konsola zwróci wartość -1.

programyNasa.indexOf("Shuttle-Mir");

-1

Dzięki numerom indeksu odpowiadającym elementom wewnątrz tablicy, jesteśmy w stanie uzyskać dostęp do każdego elementu w sposób dyskretny, aby pracować na tych elementach.

Odwoływanie się do elementów w tablicy

Element w tablicy JavaScript jest dostępny poprzez odwołanie się do numeru indeksu tego elementu w nawiasach kwadratowych.

programyNasa[1];

Gemini

Wiemy, że 0 zawsze wypisze pierwszy element w tablicy. Możemy również znaleźć ostatni element w tablicy poprzez wykonanie operacji na właściwości length i zastosowaniu tego jako nowego numeru indeksu.

const lastIndex = programyNasa.length - 1;

programyNasa[lastIndex];

Sojuz-Apollo

Próba uzyskania dostępu do elementu, który nie istnieje, zwróci wartość undefined.

programyNasa[10];

undefined

Aby odwołać się do elementów w tablicy zagnieżdżonej, powinieneś dodać kolejny numer indeksu, odnoszący się do wewnętrznej tablicy.

let zagniezTablica = [
    [
        "Polska",
        "Czechy",
    ],
    [
        "Francja",
        "Wlochy",
    ]
];

zagniezTablica[1][0];

Francja

W powyższym przykładzie odwołaliśmy się do tablicy na pozycji 1 zmiennej zagniezTablica, następnie do elementu na pozycji 0 w tablicy zagnieżdżonej.

Dodawanie elementu do tablicy

W naszej zmiennej urzedy znajdowało się pięć elementów, które składały się z indeksów od 0 do 4. Jeśli chcemy dodać nowy element do tablicy, możemy przypisać wartość do kolejnego indeksu.

urzedy[5] = "statystyczny";

urzedy;

[ 'miasta',
    'marszalkowski',
    'pracy',
    'skarbowy',
    'zus',
    'izba skarbowa' ]

Jeśli dodamy element i przypadkowo pominiemy indeks, wtedy utworzony zostanie niezdefiniowany element w tablicy.

urzedy[7] = "powiatowy pracy";

urzedy;

[ 'miasta',
    'marszalkowski',
    'pracy',
    'skarbowy',
    'zus',
    'izba skarbowa',
    ,
    'powiatowy pracy' ]

Próba uzyskania dostępu do tego dodatkowego elementu tablicy zwróci wartość undefined.

urzedy[6]

undefined

Problemów takich jak te można uniknąć, stosując metodę push(), która dodaje element na końcu tablicy.

// dodajemy element "wojewodzki pracy" do tablicy urzędów
urzedy.push("wojewodzki pracy");

urzedy;

[ 'miasta',
    'marszalkowski',
    'pracy',
    'skarbowy',
    'zus',
    ,
    'izba skarbowa',
    'powiatowy pracy',
    'wojewodzki pracy' ]

Z drugiej strony, metoda unshift() doda element na początku tablicy.

// dodajemy "zus inspektorat" na początku tablicy urzędów
urzedy.unshift("zus inspektorat");

urzedy;

[ 'zus inspektorat',
    'miasta',
    'marszalkowski',
    'pracy',
    'skarbowy',
    'zus',
    'izba skarbowa',
    ,
    'powiatowy pracy',
    'wojwodzki pracy' ]

Pomiędzy push() i unshift() będziesz mógł dodawać elementy na początku i na końcu tablicy.

Usuwanie elementu z tablicy

Gdy chcemy usunąć określony element z tablicy, wtedy korzystamy z metody splice(). W tablicy urzedy przypadkowo utworzyliśmy wcześniej niezdefiniowany element, więc usuńmy go teraz.

urzedy.splice(7, 1);

urzedy;

[ 'zus inspektorat',
    'miasta',
    'marszalkowski',
    'pracy',
    'skarbowy',
    'zus',
    'izba skarbowa',
    'powiatowy pracy',
    'wojwodzki pracy' ]

Pierwszy parametr w metodzie splice() oznacza numer indeksu do usunięcia (w tym przypadku 7), a drugi parametr określa, ile elementów powinno zostać usuniętych. Decydujemy się na 1, dając do zrozumienia, że tylko jeden element zostanie usunięty.

Metoda splice() zmodyfikuje oryginalną zmienną. Jeśli chciałbyś, aby oryginalna zmienna pozostała niezmieniona, zastosuj metodę slice() i przypisz rezultat do nowej zmiennej.

let newArray = slice(7, 1);

Metoda pop() usunie ostatni element w tablicy.

// usuwamy ostatni element tablicy urzedy
urzedy.pop();

urzedy;

[ 'zus inspektorat',
    'miasta',
    'marszalkowski',
    'pracy',
    'skarbowy',
    'zus',
    'izba skarbowa',
    'powiatowy pracy' ]

wojewodzki pracy został usunięty jako ostatni element w tablicy. Aby usunąć pierwszy element w tablicy, wykorzystamy metodę shift().

// usuwamy pierwszy element tablicy urzedy
urzedy.shift();

urzedy;

[ 'miasta',
    'marszalkowski',
    'pracy',
    'skarbowy',
    'zus',
    'izba skarbowa',
    'powiatowy pracy' ]

Używając metod pop() oraz shift(), możemy usuwać elementy na początku i na końcu tablic. Korzystanie z pop() jest preferowane zawsze, gdy jest możliwe z racji tego, że reszta elementów w tablicy zachowuje swoje oryginalne numery indeksów.

Modyfikowanie elementów w tablicach

Możemy nadpisać jakąkolwiek wartość w tablicy poprzez przypisanie nowej wartości z użyciem operatora przypisania, tak jak zrobilibyśmy to ze zwykłą zmienną.

// przypisujemy Szczecin do pierwszego elementu tablicy urzedy
urzedy[0] = "Szczecin";

urzedy;

[ 'Szczecin',
    'marszalkowski',
    'pracy',
    'skarbowy',
    'zus',
    'izba skarbowa',
    'powiatowy pracy' ]

Innym sposobem modyfikowania wartości jest wykorzystanie metody splice() z nowym parametrem. Jeśli chcielibyśmy zmienić wartość skarbowy, która jest elementem na indeksie 3, moglibyśmy usunąć go i dodać nowy element na jego miejscu.

// podmieniamy "skarbowy" przy pomocy funkcji splice
urzedy.splice(3, 1, "Wroclaw");

urzedy();

[ 'Szczecin',
    'marszalkowski',
    'pracy',
    'Wroclaw',
    'zus',
    'izba skarbowa',
    'powiatowy pracy' ]

W powyższym przykładzie usunęliśmy skarbowy z tablicy i dodaliśmy nową wartość na indeksie 3.

Iterowanie po tablicy

Możemy iterować po całości tablicy, używając słowa kluczowego for, wykorzystując do tego właściwość length. W tym przykładzie możemy utworzyć tablicę shellfish i wyświetlić do konsoli każdy numer indeksu, tak jak i każdą wartość.

// tworzymy tablicę samochodów
let samochody = [
    "fiat",
    "mercedes",
    "opel",
    "vw",
];

// przechodzimy przez każdy element istniejący tablicy 
for (let i = 0; i < samochody.length; i++) {
  console.log(i, samochody[i]);
}

0 'fiat'
1 'mercedes'
2 'opel'
3 'vw'

Możemy również wykorzystać pętlę for…of, jedną z nowszych możliwości języka JavaScript.

// tworzymy tablicę nieruchomości
let nieruchomosci = [
    "mieszkanie",
    "blok",
    "budynek",
];

// przechodzimy przez każdą nieruchomość
for (let nieruchomosc of nieruchomosci) {
    console.log(nieruchomosc);
}

mieszkanie
blok
budynek

Pętla for…of nie pobiera numeru indeksu elementów w tablicy, ale generalnie jest prostszą, bardziej zwięzłą metodą iterowania po tablicy.

Korzystanie z pętli jest niezwykle przydatne do wypisywania całej wartości tablicy, np. wyświetlania rekordów z bazy danych na stronie internetowej.