Logo 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
constructorZwraca funkcję, która utworzyła obiekt Array
lengthZwraca ostatni indeks tablicy (przechowuje informacje o rozmiarze tablicy).
prototypeOdpowiada 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 tablicyW przygotowaniu.
Wyznaczanie średniej wartości wszystkich elementów tablicyW przygotowaniu.
Najmniejsza i największa wartość w tablicyW przygotowaniu.


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





Inne zagadnienia z tej lekcji

Instrukcje warunkowe w JavaScriptInstrukcje warunkowe w JavaScript
instrukcje warunkowe w JavaScript. JavaScript udostępnia kilka instrukcji warunkowych, czyli takich, które w zależności od wartości wyrażenia sterują przebiegiem programu.
Pętle w JavaScriptPętle w JavaScript
Pętle for, while, do ... while w JavaScript. Pętle to specjalny fragment kodu, który odpowiada za powtarzanie poleceń zawartych wewnątrz pętli taką ilość razy, jaka w pętli zostanie zdefiniowana poprzez odpowiednie warunki.
Funkcje w JavaScriptFunkcje w JavaScript
Funkcje w JavaScript - jak stosować, co to jest funkcja anonimowa? Funkcje to w JavaScript bardzo wygodny sposób na wielokrotne wykorzystanie tego samego kodu i to w sposób sparametryzowany.
Math - JavaScriptMath - JavaScript
Opis obiektu Math w JavaScript. Dzięki niemu możemy w JavaScript odwoływać się do stałych matematycznych i dokonywać obliczeń. Wykaz metod, które służą do obliczania wartości funkcji matematycznych.
Random w JavaScriptRandom w JavaScript
liczby losowe w JavaScript - opis metody random(). Za generowanie liczb losowych odpowiada metoda Random obiektu Math. Metoda ta generuje losowo liczbę z zakresu od 0 (włącznie) do 1 (bez jedynki).
Okna dialogowe w JavaScriptOkna dialogowe w JavaScript
Rodzaje i stosowanie okienek dialogowych w Javascript. W JavaScript mamy do wyboru trzy rodzaje okienek dialogowych, wyzwalanych przez metody alert(), confirm() i prompt().
String - tekst w JavaScriptString - tekst w JavaScript
Opis obiektu String w JavaScript. Dzięki temu obiektowi możemy w JavaScript przechowywać i przetwarzać wszelkie teksty. Znaki w tekście są indeksowane od liczby 0.
Wyrażenia regularneWyrażenia regularne
Wyrażenia regularne w JavaScript. Wyrażenie regularne to szablon tekstowy, wzorzec, który opisuje pewien zestaw znaków. Artykuł zawiera wykaz metaznaków wraz z przykładami ich stosowania.
Obiekt date() - data i czas w JavaScriptObiekt date() - data i czas w JavaScript
Obsługa dat i czasu w JavaScript. W JavaScript mamy do dyspozycji obiekt date(), który daje nam możliwość dostępu do dat i manipulowania datami oraz czasem.



© Media Nauka 2008-2018 r.