Kurs JavaScript - Tablice  

Autor: Bożena Jurczyk

Opublikowano: 2011-12-13

Zmienne w JavaScript można łączyć w pewną strukturę, nazywaną tablicą. Dzięki temu, że pozwalają one przechowywać więcej niż jeden element, Twój kod staje się bardziej zwięzły i czytelniejszy, a zarazem wygodniejszy w tworzeniu i prostszy w utrzymaniu.

Wykonanie zadań nie wymaga dodatkowej wiedzy.

Po wykonaniu zadań nauczysz się:

• jak używać tablic w JavaScript.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zobacz zagadnienie w encyklopedii pod hasłem Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, w jaki sposób posługiwać się tablicami w języku JavaScript.

Tablice

Podobnie jak zmienne w języku JavaScript, tak też tablice mogą przechowywać zmienne różnych typów. Oczywiście możesz utworzyć tablicę do przechowywania tylko liczb lub tylko zmiennych znakowych, jednak nic nie stoi na przeszkodzie, aby tablica przechowywała zarówno liczby jak i napisy.

1. Otwórz stronę internetową jTest.html, wciśnij przycisk F12 lub wybierz Tools­>F12 developer tools.
2. W oknie kliknij na zakładkę Script (oznaczoną 1 na Rys.1.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

var arrayNumber = new Array(3);
arrayNumber[0] = 11;
arrayNumber[1] = 23;
arrayNumber[2] = 5;

    document.write("0: "+ arrayNumber[0] + ", ");
    document.write("1: "+ arrayNumber[1] + ", ");
    document.write("2: "+ arrayNumber[2] + "<br />");

    var arrayMultiTypes = [12, "Ala ma kota", true, 10.5]
    document.write("0: "+ arrayMultiTypes[0] + " - " + typeof(arrayMultiTypes[0]) + ", ");
    document.write("1: "+ arrayMultiTypes[1] + " - " + typeof(arrayMultiTypes[0]) + ", ");
    document.write("2: "+ arrayMultiTypes[2] + " - " + typeof(arrayMultiTypes[0]) + "<br />");

Rys. 1. Narzędzia programistyczne do JavaScript w Internet Explorer 9.

3. Wciśnij Run script.
4. W oknie powinien pojawić się wynik jak na Rys. 2.

Rys. 2. Wynik wyświetlenia zawartości tablicy liczbowej i wielowartościowej.

Informacja

W przedstawionym zadaniu tablice zostały utworzone na dwa sposoby: poprzez stworzenie obiektu tablicy za pomocą new Array(3), gdzie wartość wewnątrz nawiasu jest rozmiarem tablicy, oraz za pomocą skróconej notacji, poprzez podanie elementów tablicy na etapie deklaracji. Tablica arrayNumber posiada elementy wyłącznie typu liczbowego, zaś elementy w tablicy arrayMultiTypes są różnego typu (nic nie stoi na przeszkodzie, aby elementem tablicy była kolejna tablica). Aby sprawdzić jakiego typu jest przechowywany element, możesz wykorzystać poznaną we wcześniejszym samouczku funkcję typeof().

Tablice asocjacyjne

Specyficznym rodzajem tablic są tablice asocjacyjne. W odróżnieniu od zwykłych tablic, gdzie indeksem są liczby naturalne, tu elementy dodawane są w postaci klucz-wartość, gdzie zarówno klucz i wartość mogą mieć dowolny typ.

1. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

var arrayAssoc = {"key1" : "item1", "key2" : 5, "key2" : new Array(2, 4, 5), 45 : 23}
    document.write("key1: "+ arrayAssoc["key1"] + "<br />");
    document.write("key2: "+ arrayAssoc["key2"] + "<br />");
    document.write("45: "+ arrayAssoc[45] + "<br />");

2. Wciśnij Enter.
3. W oknie powinien pojawić się wynik, jak na Rys. 3.

Rys. 3. Wynik wyświetlenia tablicy asocjacyjnej.

Informacja

Jednym ze sposobów na utworzenie tablicy asocjacyjnej jest podanie zbioru par klucz-wartość wewnątrz nawiasu "{...}". Kolejne elementy powinny być oddzielone przecinkami. Zwróć uwagę na to, iż wartości kluczy mogą być dowolnego typu, jednak nie mogą się powtarzać. Jeśli jednak to nastąpi, to element, pod istniejącym już kluczem, zostanie nadpisany przez nową wartość.

Operacje na tablicach

W JavaScript istnieją funkcje, które mogą ułatwić pracę z tablicami.

1. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:

var elems = "elem1, elem4, elem3, elem2";
var array1 = elems.split(", ") ;
var html = "Przed sortowaniem: " + array1.join(", ") + "<br/>";
var array2 = array1.sort();

html += "Po sortowaniu: " + array2.join(", ") + "<br/>";
html += "Kolejność odwrotna: " + array2.reverse().join(", ") + "<br/>";

html += "Liczba elementów: " + array2.length + "<br/>";
var list = '<ol><li>' + array2.join('</li><li>') + '</li></ol>'; 
html += list;
document.write(html);

2. Wciśnij Enter.
3. W oknie powinien pojawić się wynik, jak na Rys. 4.

Rys. 4. Wynik działania funkcji pomocniczych.

Informacja

Najważniejsze elementy w tym zadaniu: funkcja split()– pozwala na podzielenie ciągu znaków (względem podanego w nawiasie znaku/ów dzielącego/ych), w wyniku otrzymujesz tablicę, funkcja join()– działa odwrotnie do funkcji split, pozwala na połączenie elementów tablicy w jeden ciąg, łącząc elementy za pomocą łącznika, podanego jako argument funkcji, (domyślnie jest to ","), jak widać jest to dobry przykład na znaczne uproszczenie procesu wyświetlania elementów tablicy, funkcja sort() i reverse()– zwracają odpowiednio posortowaną tablicę lub tablicę z elementami w odwrotnej kolejności niż oryginalna, właściwość length –pozwala na sprawdzenie długości tablicy.

Podsumowanie

W tym samouczku nauczyłeś się operować na tablicach. Poznałeś kilka przydatnych funkcji, przyspieszających pracę z nimi oraz dowiedziałeś się, co to są tablice asocjacyjne.

W kolejnym samouczku nauczysz się, w jaki sposób tworzyć obiekty.

 

---