Tablice i obiekty

Tablice i obiekty są złożonymi strukturami danych. Oznacza to że wewnątrz nich można przechowywać więcej niż jedną wartość. Jest to przydatne gdyż pomaga napisać bardziej zwięzły kod, który jest również bardziej czytelny i łatwiejszy w utrzymaniu.

Jeżeli znasz już tablice i obiekty z innych języków programowania, możesz być nieco zdziwiony dlaczego zdecydowałem się połączyć ich opis razem. Zrobiłem to dlatego gdyż JavaScript pozwala odwoływać się do obiektu tak jak do tablicy, i odwrotnie – więcej szczegółów znajdziesz poniżej.

Obiekty

Obiekty w programowaniu służą do reprezentowania pewnych obiektów pochodzących ze świata rzeczywistego (np. drzwi), bądź też pewnych pojęć wirtualnych które istnieją tylko w pamięci komputera, takich jak np. ciąg znaków (String). Obiekt najłatwiej sobie można wyobrazić jako „pojemnik”, wewnątrz którego umieszczone są zmienne i funkcje. Zarówno do jednych i drugich można się odwołać podobnie jak do „zwykłych” zmiennych i funkcji, trzeba tylko przed ich nazwą umieścić obiekt którego są elementami (czyli np. zmienną która przechowuje dany obiekt) i kropkę.

W połączeniu z obiektami często występuje także nazwa „klasa”. Klasa jest do definicja danego obiektu (czyli informacja co on ma robić, itd.), natomiast obiekt jest to konkretny egzemplarz klasy. Możesz także traktować klasy jako „plan” na podstawie którego są produkowane obiekty.

Zmienne umieszczone wewnątrz obiektu zwykle nazywa się polami obiektu lub zmiennymi składowymi (ang. Member Variables). W JavaScript są one też nazywane właściwościami obiektu (ang. Properties). Co prawda w innych językach programowania nazwa „właściwości” jest zarezerwowana dla nieco innych składowych obiektów niż zmienne, no ale skoro twórcy języka JavaScript użyli tej nazwy, to ja nie będę się z nimi spierać której nazwy należy używać 🙂

Właściwości obiektu reprezentują pewne jego cechy (np. wysokość i szerokość drzwi, czy też długość ciągu znaków), bądź też pozwalają sprawdzić stan obiektu (np. czy drzwi są zamknięte). Przykładowo tak można się odwołać do właściwości określającej ilość znaków w stringu, czyli jego długość:

var napis = "Hello World!";
document.write("Ilość znaków w napisie: " + napis.length);

Poza właściwościami obiekt może zawierać też funkcje. Nazywane są one funkcjami składowymi (ang. Member Functions), lub częściej metodami (ang. Methods). Służą one do wykonywania różnych operacji na obiekcie, i tym się zazwyczaj różnią od „zwykłych” funkcji do których należy przekazać np. jako parametr pewne wartości na których funkcja ma wykonać jakieś operacje. Z kolei wywołanie metody obiektu można zwykle porównać do naciśnięcia przycisku na pilocie, czyli sama operacja wykona się automatycznie (czyli np. naciskasz przycisk na pilocie i drzwi się same otworzą).

Metody obiektów wywołuje się podobnie jak zyskuje się dostęp do właściwości obiektu – podaje się obiekt na rzecz którego metoda ma być wykonana, kropkę, nazwę metody i listę parametrów w nawiasie. Przykładem może być np. wywołanie metody document.write() z przykładu powyżej.

Tablice

Tablice w JavaScript są obsługiwane przez klasę Array. Obiekt tej klasy można utworzyć na trzy sposoby, poprzez wywołanie odpowiedniego konstruktora:

1. utworzenie pustej tablicy:

   var tablica = new Array();

2. utworzenie tablicy i podanie jej rozmiaru (np. 10 elementów):

   var tablica = new Array(10);

3. utworzenie tablicy i podanie listy elementów które mają się w niej znaleźć:

   var tablica = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

Zwróć uwagę że niemożliwe jest stworzenie w ten sposób tablicy która zawiera jeden element o określonej wartości, gdyż odpowiednia wersja konstruktora jest zarezerwowana do tworzenia tablic o określonej liczbie elementów. Oczywiście możliwe jest stworzenie pustej tablicy i zapisanie do niej tego elementu który chcesz żeby tam się znalazł.

Istnieje też możliwość utworzenia tablicy poprzez umieszczenie kolejnych jej elementów jako listy w nawiasach kwadratowych. Ta metoda ma tą zaletę że za jej pomocą można też tworzyć tablice jednoelementowe. Można tez utworzyć tablicę pustą:

• utworzenie pustej tablicy:

  var tablica = [ ];

• utworzenie tablicy zawierającej jeden element:

  var tablica = [ 10 ];

• utworzenie tablicy zawierającej więcej elementów:

  var tablica = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

Każdy element w tablicy posiada przypisaną pozycję (indeks w tablicy). Numeracja indeksów zaczyna się od zera. Do każdego elementu w tablicy można się odwołać podając w nawiasach kwadratowych indeks elementu.

Poniższy przykład pokazuje jak stworzyć tablicę, wypisać jedną z wartości która jest w niej zapisana, zmodyfikować ją i wypisać jeszcze raz:

var tablica = new Array(1, 2, 3);
document.write(tablica[1] . "<br>");
tablica[1] = 123;
document.write(tablica[1] . "<br>");

Powyższy przykład powinien wypisać kolejno liczby 2 i 123.

W powyższym przykładzie użyłem liczb jako wartości zapisywanych do tablicy, ale język JavaScript nie narzuca takiego ograniczenia – w tablicy można umieścić wartość dowolnego typu (także inne tablice):

var tablica = new Array(
    123,
    "Ala ma kota",
    new Array(1, 2, 3)
);

Obiekt Array posiada także właściwość length, która zwraca indeks ostatniego elementu tablicy powiększony o 1 (czyli zwykle ilość elementów w tablicy). Można użyć tej właściwości do wypisania kolejnych elementów tablicy:

var tablica = new Array(1, 2, 3, 4, 5);
for (var n = 0; n < tablica.length; ++n)
    document.write(tablica[n] + "<br>");

Drugim sposobem na wypisanie wszystkich elementów tablicy jest użycie pętli for...in:

var tablica = new Array(1, 2, 3, 4, 5);
for (var v in tablica)
    document.write(v + "<br>");

Tablice w JavaScript są tak naprawdę „rzadkie”, co oznacza że tablica przydziela pamięć tylko dla elementów które są do niej zapisane. W poniższym przykładzie pamięć zostanie przydzielona tylko dla trzech elementów tablicy, i tylko te trzy elementy zostaną wypisane w pętli for...in:

var tablica = new Array();
tablica[1] = 1;
tablica[1000] = 2;
tablica[1000000] = 3;
for (var v in tablica)
    document.write(v + "<br>");

W przypadku wykorzystania tablic w taki sposób warto pamiętać że właściwość length będzie zawierać indeks ostatniego elementu powiększoną o jeden, czyli w powyższym przykładzie będzie to 1000001.

Tablice asocjacyjne

Obiekty w JavaScript mają ciekawą cechę: przypisanie wartości do nieistniejącej właściwości obiektu nie skończy się błędem jak w innych językach programowania, ale w ten sposób zostanie utworzona nowa właściwość obiektu i przypisana zostanie do niej wartość. Korzystając z tej cechy języka można wykorzystać dowolny obiekt jako tablicę asocjacyjną (zwaną też tablicą haszującą, ang. Hash Table):

var tablica = new Object();
tablica["Ala"] = "kot";
tablica["Pi"] = 3.1415;
document.write(tablica["Ala"] + "<br>" + tablica["Pi"]);

Na takiej tablicy można też wygodnie operować za pomocą pętli for...in:

var tablica = new Object();
tablica["Ala"] = "kot";
tablica["Pi"] = 3.1415;
for (var klucz in tablica)
    document.write(klucz + ": " + tablica[klucz] + "<br>");

Powyższy przykład będzie także działał jeżeli zamiast klasy Object zostanie użyta klasa Array. Ponieważ jednak wartości są zapisywane jako właściwości obiektu, zatem właściwość length będzie równa zero.

Istnieje także sposób na utworzenie tablicy asocjacyjnej z użyciem innej składni, podobnej do pokazanej powyżej innej składni tworzenia tablic. Różni się ona jednak tym że zamiast nawiasów kwadratowych trzeba zastosować nawiasy klamrowe, i zamiast pojedynczych wartości należy podać pary kluczy i ich wartości (klucz od wartości ma być oddzielony dwukropkiem). Oto przerobiona wersja powyższego przykładu:

var tablica = { "Ala" : "kot", "Pi" : 3.1415 };
for (var klucz in tablica)
    document.write(klucz + ": " + tablica[klucz] + "<br>");