Logo Serwisu Media Nauka


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

Deklaracje tablicy

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

var nazwa_tablicy = [wartość1, wartość2, wartość 3, ...]

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ę.

var nazwa_tablicy = new Array(n)

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ę:

nazwa_tablicy [ numer_indeksu ]

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>
Lupa

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>
Lupa

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>
Lupa

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>
Lupa

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>
Lupa

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łaściwość Krótki opis
constructor Zwraca funkcję, która utworzyła obiekt Array
length Zwraca ostatni indeks tablicy (przechowuje informacje o rozmiarze tablicy).
prototype Odpowiada za dodawanie właściwości i metod do obiektu Array.

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

Właściwość Krótki opis
concat() Metoda ta umożliwia łączenie elementów dwóch lub większej liczby tablic. Jako parametr podajemy nazwę tablicy, której elementy chcemy dołączyć do tablicy, dla której metoda jest wywoływana.
copyWithin() Brak opisu.
every() Brak opisu.
fill() Wypełnia wszystkie elementy tablicy stałą wartością podaną jako parametr.
filter() Brak opisu.
find() Brak opisu.
findIndex() Brak opisu.
forEach() Umożliwia wykonanie pętli po wszystkich wyrazach tablicy.
indexOf() Przeszukuje tablicę dla elementu podanego jako parametr i zwraca jego pozycję.
isArray() Sprawdza, czy obiekt jest tablicą.
join() Metoda ta służy do łączenia elementów tablicy w jeden tekst. Jako parametr możemy podać separator, który oddziela poszczególne elementy.
lastIndexOf() Przeszukuje tablicę dla elementu podanego jako parametr, zaczynając od końca i zwraca jego pozycję.
map() Brak opisu.
pop() Usuwa ostatni element tablicy i zwraca jego wartość.
push() Metoda pozwala wstawić elementy na końcu tablicy. Przykład: zwierzaki.push("kot","pies") spowoduje dodanie do tablicy zwierzaki dwóch elementów o wartościach "kot" i "pies".
reduce() Brak opisu.
reduceRight() Brak opisu.
reverse() Metoda ta służy do odwrócenia kolejności występowania elementów tablicy.
shift() Metoda ta usuwa pierwszy element tablicy i go zwraca.
slice() Metoda ta umożliwia usuwania elementów tablicy od indeksu a do indeksu b, podawanych jako parametry - tablica.slice(1,3) usunie elementy o indeksach od 1 do 3.
some() Brak opisu.
sort() Metora sort() umożliwia sortowanie tablicy (metodą bąbelkową). Jako parametr możemy podać własną funkcję sortująca elementy tablicy. Domyślnie przyjmowane jest sortowanie leksykalne (jak w słowniku).
splice() Metoda ta umożliwia usunięcie elementów tablicy od indeksu a, który podajemy jako parametr. Drugim parametrem jest liczba elementów do wycięcia. Jeżeli podamy kolejne parametry, to będą to wartości jakie powinny zastąpić usuwane elementy tablicy. Np. tablica.splice(2,1,"kot") usunie 1 element o indeksie 2 i zastąpi go elementem "kot". Uwaga, jeżeli drugi parametr jest równy zeru, to metoda pozwala wstawić element tablicy w dowolnym miejscu, bez usuwania czegokolwiek.
toString() Konwertuje tablicę na tekst (string) i zwraca jego wartość.
unshift() Metoda ta wstawia nowe elementy tablicy podane jako parametry metody i zwraca nową długość tablicy.
valueOf() Brak opisu.

Przydatne skrypty

Oto kilka funkcji przydatnych podczas pracy z tablicami.

Zagadnienie Krótki opis
Mieszanie elementów tablicy W przygotowaniu.
Wyznaczanie średniej wartości wszystkich elementów tablicy W przygotowaniu.
Najmniejsza i największa wartość w tablicy W przygotowaniu.


© Media Nauka, 2016-11-01, ART-3264






Polecamy