Tablice w JavaScript

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 19424 razy

Różne sposoby deklarowania tablic w JavaScript

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>"); }

lub też z wykorzystaniem metody forEach:

var table = [4, 8, 15, 16, 23, 42]; table.forEach(function(item, index){ document.write("<p>table[" + index + "] = " + item + "</p>"); });

lub skrócona najnowsza wersja:

var table = [4, 8, 15, 16, 23, 42]; table.forEach((item, index) => document.write("<p>table[" + index + "] = " + item + "</p>"));

Iterowanie po elementach obiektu w JavaScript

Iterowanie po elementach obiektu wygląda następująco:

var table = {"key1": "value1", "key2": "value2", "key3": "value3"}; for(var key in table){ document.write("<p>Klucz: " + key + "; Wartość: " + table[key] + ";</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:

var table = [4, 8, 15, 16, 23, 42]; console.log("Zrzucony element: " + table.pop() + " tablica: " + table.toString());

Zdejmowanie pierwszego elementu tablicy za pomocą metody shift

Metoda shift zdejmuje pierwszy element tablicy i zwraca go. Oto przykład:

var table = [4, 8, 15, 16, 23, 42]; console.log("Zrzucony element: " + table.shift() + " tablica: " + table.toString());

Łączenie elementów tablicy za pomocą metody join

W bardzo prosty sposób można przekształcić tablicę na tekst za pomocą metody join, co wygląda następująco:

var table = ["Marian","1","Maciej",100]; console.log(table.join()); // wypisze Marian,1,Maciej,100 console.log(table.join("/"); // wypisze Marian/1/Maciej/100

Sortowanie tablicy za pomocą metody sort

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:

var table = [1000,200,400,800,100]; console.log(table.sort()); // wyświetli Array [ 100, 1000, 200, 400, 800 ]

powyższemu przypadkowi można zapobiec korzystając z własnej funkcji sortującej. Ważne aby zrozumieć, że funkcja sortująca powinna zwracać wartości:

Przykład użycia:

var table = [1000,200,400,800,100]; console.log(table.sort( function(a, b){ return a - b; } )); // Wyświetli: Array [ 100, 200, 400, 800, 1000 ]

Odwracanie kolejności elementów w tablicy za pomocą metody reverse

Metoda reverse odwraca kolejność wyświetlania danych, oto przykład:

var table = [1000,200,400,800,100]; console.log("Przed " + table); // Wyświetli: Przed 1000,200,400,800,100 table.reverse(); console.log("Po " + table); // Wyświetli: Po 100,800,400,200,1000

Łączenie tablic za pomocą metody concat

Metoda concat umożliwia łączenie dwóch lub kilku tablic w jedną w następujący sposób:

var values = [100,200,300,400]; var names = ["Marian", "Helena", "August", "Aga"]; console.log(values.concat(names)); // wyświetli: Array [ 100, 200, 300, 400, "Marian", "Helena", "August", "Aga" ]

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]
Strony powiązane
strony powiązane
  1. developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array - MDN - dokumentacja dotycząca obiektów Array
Propozycje książek