W JavaScript można deklarować tablice na kilka różnych sposobów. W przypadku tablic indeksowanych wyglądać to może następująco:
var table = ["zmienna tekstowa", 19, 23.56];
Jak widać przy okazji, tablica nie musi zawierać tylko jednego typu danych, może zawierać także obiekty klas, lub funkcje ale o tym będzie mowa przy innej okazji. Kolejnym sposobem deklarowania tablic jest użycie konstruktora:
var table = new Array();
Można również utworzyć tablicę asocjacyjną, (która tak na prawdę jest obiektem) w taki oto sposób:
var table = {"key1": "value1", "key2": "value2", "key3": "value3"};
Trzeba jednak mieć na uwadze, że tablica taka tak na prawdę jest obiektem i do jej pól można się odwołać np. w taki sposób:
table.key1 = "new value1";
Dodawanie elementów do tablicy
W przypadku tablicy indeksowanej można dodawać kolejne elementy w następujący sposób:
var table = new Array();
table[0] = 10;
table[1] = 20;
table[4] = 30; // tutaj jest celowy błąd, który polega na podaniu niepoprawnego indeksu
Jeżeli nie znasz liczby elementów tablicy, to nie musisz jej znać, aby do niej dodać nowy element, wystarczy posłużyć się metodą push w następujący sposób:
var table = new Array();
table.push(10);
table.push(3);
Z kolei dodawanie elementów do do obiektu wygląda następująco:
var table = new Array();
table["key1"] = "value1";
table["key2"] = "value2";
Sprawdzanie za pomocą operatora in, czy dany klucz istnieje w obiekcie
Sprawdzenie, czy dany klucz już znajduje się w obiekcie:
var table = {"key1": "value1", "key2": "value2", "key3": "value3"};
if ("key1" in table){
console.log("Klucz istnieje!");
}
Pozyskiwanie informacji o liczbie elementów tablicy za pomocą właściwości length
var table = [4, 8, 15, 16, 23, 42];
console.log(table.length);
Iterowanie po elementach tablicy indeksowanej
Po indeksowanej tablicy można iterować w dwojaki sposób. Pierwszy (klasyczny):
var table = [4, 8, 15, 16, 23, 42];
for(var i = 0; i < table.length; i++){
document.write("<p>table[" + i + "] = " + table[i] + "</p>");
}
Usuwanie, dodawanie i zastępowanie danego elementu tablicy za pomocą metody splice
Usunięcie elementu tablicy wygląda następująco:
var table = [4, 8, 15, 16, 23, 42];
console.log("tablica przed usuwaniem elementu: " + table.join());
table.splice(2, 1); // pozbywam się jednego elementu o indeksie 2
console.log("tablica po usunięciu elementu: " + table.join());
Można również dodawać element:
var table = [4, 8, 15, 16, 23, 42];
console.log("tablica przed: " + table.join());
table.splice(2, 0, 20, 30); // dodaję liczbę 20 i 30 zaczynając od pozycji o indeksie 2
console.log("tablica po: " + table.join()); // wyświetli 4, 8, 20, 30, 15, 16, 23, 42
Można połączyć usuwanie z dodawaniem nowych elementów np. tak:
var table = [4, 8, 15, 16, 23, 42];
console.log("tablica przed: " + table.join());
table.splice(2, 1, 20, 30); // dodaję liczbę 20 i 30 zaczynając od pozycji o indeksie 2 usuwając wcześniej jeden element tablicy pod indeksem 2
console.log("tablica po: " + table.join()); // wyświetli 4, 8, 20, 30, 16, 23, 42
Warto też zaznaczyć, że metoda splice zwraca tablicę usuniętych elementów.
Zdejmowanie ostatniego elementu tablicy za pomocą metody pop
Metoda pop zdejmuje ostatni element tablicy i zwraca go. Oto przykład:
Tablice mają wbudowaną metodę sortującą sort, która wykorzystuje algorytm sortowania bombelkowego. Niestety algorytm ten domyślnie sortuje w sposób leksykalny co oznacza, że np. liczby 1000 i 200 będą w nieprawidłowej kolejności ułożone po sortowaniu:
Metodzie concat można podać kilka tablic do połączenia.
Tworzenie kopii tablicy za pomocą metody slice
Metoda slice tworzy kopię całej tablicy, gdy nie zostały podane żadne argumenty. Możliwe jest również utworzenie kopii części tablicy poprzez podanie indeksu początkowego i końcowego. Oto przykład obrazujący różnicę pomiędzy zwykłym przepisaniem adresu do innej zmiennej a kopią tablicy:
var arr = [10, 20, 30];
var arr2 = arr; // to arr2 zostaje przypisany adres tablicy arr, co oznacza, że miana dowolnej wartości liczbowej w tablicy arr2 będzie miała wpływ na tablicę arr bo obie wskazują na ten sam adres
var arr3 = arr.slice(); // bez argumentów metoda slice zwraca kopię całej tablicy, i tu uwaga: kopiowanie dotyczy tylko wartości liczbowych i tekstowych, w przypadku obiektów kopiowane są ich adresy, innymi słowy obiekty nie są kopiowane a jedynie ich adres w pamięci
arr2[1] = 100;
console.log("arr2: " + arr2.join() +" arr: " + arr.join() + " arr3: " + arr3.join()); // wyświetli w konsoli: arr2: 10, 100, 30 arr: 10, 100, 230 arr3: [10 20 30]
Jak wspomniałem można również skopiować część tablicy (indeksowanie od 0):
var arr = [10, 20, 30, 40, 50, 60];
var arrCopy = arr.slice(1,2); // kopię [20, 30] z tablicy array
var arrCopy2 = arr.slice(-2); // a tera kopiuję wartość licząc od końca tablicy czyli [50, 60]
var arrCopy3 = arr.splie(1, -1); // a tera kopiuję od pierwszego do przedostatniego elementu tablicy czyli [20, 30, 40, 50]
