Tablice w JavaScript

Stronę tą wyświetlono już: 209 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:

Listing 1
  1. 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:

Listing 2
  1. var table = new Array();

Można również utworzyć tablicę asocjacyjną w taki oto sposób:

Listing 3
  1. var table = {"key1": "value1", "key2": "value2", "key3": "value3"};

Dodawanie elementów do tablicy

W przypadku tablicy indeksowanej można dodawać kolejne elementy w następujący sposób:

Listing 4
  1. var table = new Array();
  2. table[0] = 10;
  3. table[1] = 20;
  4. 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:

Listing 5
  1. var table = new Array();
  2. table.push(10);
  3. table.push(3);

Z kolei dodawanie elementów do tablicy asocjacyjnej wygląda następująco:

Listing 6
  1. var table = new Array();
  2. table["key1"] = "value1";
  3. table["key2"] = "value2";

Sprawdzanie za pomocą operatora in, czy dany klucz tablicy asocjacyjnej istnieje

Sprawdzenie, czy dany klucz już znajduje się w tablicy asocjacyjnej:

Listing 7
  1. var table = {"key1": "value1", "key2": "value2", "key3": "value3"};
  2. if( "key1" in table){
  3. console.log("Klucz istnieje!");
  4. }

Pozyskiwanie informacji o liczbie elementów tablicy za pomocą właściwości length

Listing 8
  1. var table = [4, 8, 15, 16, 23, 42];
  2. console.log(table.length);

Iterowanie po elementach tablicy indeksowanej

Po indeksowanej tablicy można iterować w dwojaki sposób. Pierwszy (klasyczny):

Listing 9
  1. var table = [4, 8, 15, 16, 23, 42];
  2. for(var i = 0; i < table.length; i++){
  3. document.write("<p>table[" + i + "] = " + table[i] + "</p>");
  4. }

lub też z wykorzystaniem metody forEach:

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

Iterowanie po elementach tablicy asocjacyjnej w JavaScript

Iterowanie po elementach tablicy asocjacyjnej wygląda następująco:

Listing 11
  1. var table = {"key1": "value1", "key2": "value2", "key3": "value3"};
  2. for(var key in table){
  3. document.write("<p>Klucz: " + key + "; Wartość: " + table[key] + ";</p>");
  4. }

Usuwanie, dodawanie i zastępowanie danego elementu tablicy za pomocą metody splice

Usunięcie elementu tablicy wygląda następująco:

Listing 12
  1. var table = [4, 8, 15, 16, 23, 42];
  2. console.log("tablica przed usuwaniem elementu: " + table.join());
  3. table.splice(2, 1); // pozbywam się jednego elementu o indeksie 2
  4. console.log("tablica po usunięciu elementu: " + table.join());

Można również dodawać element:

Listing 13
  1. var table = [4, 8, 15, 16, 23, 42];
  2. console.log("tablica przed: " + table.join());
  3. table.splice(2, 0, 20, 30); // dodaję liczbę 20 i 30 zaczynając od pozycji o indeksie 2
  4. 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:

Listing 14
  1. var table = [4, 8, 15, 16, 23, 42];
  2. console.log("tablica przed: " + table.join());
  3. 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
  4. 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:

Listing 15
  1. var table = [4, 8, 15, 16, 23, 42];
  2. 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:

Listing 16
  1. var table = [4, 8, 15, 16, 23, 42];
  2. 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:

Listing 17
  1. var table = ["Marian","1","Maciej",100];
  2. console.log(table.join()); // wypisze Marian,1,Maciej,100
  3. 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:

Listing 18
  1. var table = [1000,200,400,800,100];
  2. 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:

  • ujemne, gdy pierwszy argument podany na wejście funkcji jest mniejszy od drugiego;
  • zero, gdy oba argumenty podane na wejście funkcji są równe;
  • dodatnie, gdy pierwszy argument podany na wejście funkcji jest większy od drugiego

Przykład użycia:

Listing 19
  1. var table = [1000,200,400,800,100];
  2. console.log(table.sort(
  3. function(a, b){
  4. return a - b;
  5. }
  6. )); // 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:

Listing 20
  1. var table = [1000,200,400,800,100];
  2. console.log("Przed " + table); // Wyświetli: Przed 1000,200,400,800,100
  3. table.reverse();
  4. 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:

Listing 21
  1. var values = [100,200,300,400];
  2. var names = ["Marian", "Helena", "August", "Aga"];
  3. 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:

Listing 22
  1. var arr = [10, 20, 30];
  2. 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
  3. 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
  4. arr2[1] = 100;
  5. 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):

Listing 23
  1. var arr = [10, 20, 30, 40, 50, 60];
  2. var arrCopy = arr.slice(1,2); // kopiję [20, 30] z tablicy array
  3. var arrCopy2 = arr.slice(-2); // a tera kopiuję wartość licząc od końca tablicy czyli [50, 60]
  4. 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

Komentarze