Tablice w JavaScript

Tablice w JavaScript, to specjalny typ danych, który pozwala w jednej zmiennej przechowywać wiele wartości.

Typ ten udostępnia wiele metod, które ułatwiają porządkowanie tych danych. Tablica jest obiektem.

Spis treści

• Deklaracja tablicy
• Uzyskiwanie dostępu do elementów tablicy
• Tablice asocjacyjne
• Tablice wielowymiarowe
• Tablica dwuwymiarowa
• Tablica trójwymiarowa
• Pętla po tablicy
• Właściwości i metody
• Przydatne skrypty

Deklaracje tablicy

Deklaracje tablicy realizujemy w następujący sposób:

Deklarację tablicy możemy także zrealizować za pomocą konstruktora, co nie jest zalecane, między innymi ze względu na wydajność. Ta deklaracja jednak daje nam możliwość deklaracji pustych tablic o zadanej wielkości. Jeżeli w nawiasach kwadratowych nie podamy żadnych wartości JavaScript utworzy pustą tablicę.

Zobaczmy to na przykładzie.

Przykład 1 - tworzenie tablicy

W niniejszym przykładzie tworzymy pięć tablic. Pierwsza z nich ma nazwę imiona i zawiera 5 elementów - imiona, będące danymi typu tekstowego, druga nazywa się liczby_pierwsze i zawiera 9 elementów - liczby pierwsze (mamy tu typ liczbowy elementów tablicy). Trzecia tablica (osoba) zawiera mieszane dane. Czwarta tablica jest pusta. Piąta deklaracja (nie jest zalecana) tworzy nam pustą tablicę złożona ze 100 elementów.

<script>
 var imiona = ["Jan", "Paweł", "Krzysztof", "Jacek", "Adam"];
 var liczby_pierwsze = [2, 3, 5, 7, 11, 13, 17, 19, 23];
 var osoba = ["Krzysztof", "Nowak", 32];
 var pusta = [];

 var tab = new Array(100);  //należy unikać takich deklaracji
</script>

Uzyskiwanie dostępu do elementów tablic

Aby dostać się konkretnego elementu tablicy stosujemy notację:

Ważne: nr_indeksu (indeks) jest to kolejny numer wartości danej przechowywanej w tablicy, licząc od 0. To oznacza, że aby odczytać trzeci element tablicy tab, użyjemy zapisu tab[2].

Przykład 2 - odczyt elementu tablicy po indeksie

<script>
var osoba = ["Krzysztof", "Nowak", 32];

alert(osoba[0]);
alert(osoba[1]);
alert(osoba[2]);
</script>

Tablice asocjacyjne

W wielu językach programowania występują tablice asocjacyjne, czyli takie, których indeksy są rozpoznawane po nazwach. JavaScript nie wspiera takich tablic. Obiekt Array może być indeksowany tylko za pomocą liczb naturalnych z zerem. Aby zaimplementować przybliżony mechanizm tablic asocjacyjnych należy używać w JavaScript obiektów, ale nie będą na nich działały metody i właściwości związane z tablicami.

Tablice wielowymiarowe

W JavaScript możemy deklarować tablice dwuwymiarowe i tablice o większej liczbie wymiarów (tablice wielowymiarowe). Zobaczmy to na przykładzie.

Przykład 3 - tablica dwuwymiarowa

Poniższy przykład pokazuje dwa sposoby deklaracji i przypisywania wartości do tablicy dwuwymiarowej.

<script>
var osoba = [ ["Krzysztof", "Nowak"], ["Jan", "Kowalski"] ];
alert("Imię i nazwisko: " + osoba[0][0] + " " + osoba[0][1]);
alert("Imię i nazwisko: " + osoba[1][0] + " " + osoba[1][1]);

var autor = []
autor[0] = ["Stanisław", "Lem"];
autor[1] =["Adam", "Mickiewicz"];

alert("Autor: Imię i nazwisko : " + autor[0][0] + " " + autor[0][1]);
</script>

Przykład 4 - tablica trójwymiarowa

Poniższy przykład pokazuje jak utworzyć tablicę trójwymiarową. Pierwszy poziom indeksów odpowiada w naszej tablicy za przynależność do królestwa zwierząt [0] lub roślin [1], drugi poziom indeksu odpowiada za przynależność do ssaków [0][0] lub ptaków [0][1] oraz kwiatów [1][0] lub drzew [1][1], a trzeci poziom indeksów odpowiada za kolejne nazwy gatunków. Tablica została zadeklarowana według schematu: var tab = [ [ [lista] , [lista] ], [ [lista], [lista] ] ].

<script>
var tab = [ [ ["koń", "słoń"] , ["gil", "sikora"] ], [ ["róża", "tulipan"], ["dąb", "lipa"] ] ]

alert("Zwierzę - ssak pierwszy z listy: " + tab[0][0][0]);
alert("Zwierzę - Ptak drugi z listy: " + tab[0][1][1]);

alert("Roślina - kwiat drugi z listy: " + tab[1][0][1]);
alert("Roślina - drzewo pierwsze z listy: " + tab[1][1][0]);
</script>

Tablica trójwymiarowa jest już dość skomplikowana, natomiast tablice o większej liczbie wymiarów są trudne do wyobrażenia sobie ich struktury (wszak przyzwyczajeni jesteśmy do trzech wymiarów) i są raczej rzadko stosowane. Osobiście nie stosowałem nigdy tablic o wymiarze większym niż trzy.

Pętla po tablicy

Pętla idealnie nadaje się do wyświetlania elementów tablic. Stosujemy najczęściej dwa rodzaje pętli:

Przykład 5 - tablica i pętla for

Wykorzystujemy tutaj właściwość tablicy length, która przechowuje rozmiar tablicy.

<script>
var ptaki = ["kos","gil","czyżyk"];
 for (var i=0; i<ptaki.length; i++) {
   alert(ptaki[i]);
 }
</script>

Przykład 6 - tablica i pętla forEach

Wykorzystujemy tutaj właściwość tablicy length, która przechowuje rozmiar tablicy.

widać tutaj dwie metody wywołania funkcji w metodzie forEach: klasyczne wywołanie funkcji o nazwie wyswietl i wywołanie funkcji anonimowej.

<script>
function wyswietl(nazwa) {
   alert(nazwa);
}
var ptaki = ["kos","gil","czyżyk"];

ptaki.forEach(wyswietl);
ptaki.forEach(function(nazwa){alert(nazwa);});
</script>

Właściwości i metody tablic

W poniższej tabeli zawarto wszystkie właściwości obiektu tablicy Array wraz z odnośnikami do ich bardziej szczegółowego opisu z przykładami stosowania.

Aby skorzystać z właściwości lub metody stosujemy notację kropkowa, czyli zapis nazwa_tablicy.nazwa_metody();

Czcionka pogrubiona zaznaczono najczęściej wykorzystywane metody i właściwosci.

W poniższej tablicy zawarto wszystkie metody obiektu tablicy array wraz z odnośnikami do ich bardziej szczegółowego opisu z przykładami stosowania.

Przydatne skrypty

Oto kilka funkcji przydatnych podczas pracy z tablicami.

Inne zagadnienia z tej lekcji

© medianauka.pl, 2016-11-01, A-3264