Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Obiekt Array

Email Drukuj PDF

Dostępność: od JavaScript 1.1 i JScript 2.0

Przeglądarki: IE4, FF, NN3, OP

Obiekt typu Array to nic innego, jak opisywana wcześniej tablica. Zatem tak naprawdę tablice nie należą do podstawowych typów danych, ale są obiektami typu Array. Oznacza to, że można się odwoływać do ich właściwości i metod.

Właściwości

Właściwość length

Dostępność: od JavaScript 1.1 i JScript 2.0

Przeglądarki: IE4, FF, NN3, OP7

Właściwość length określa aktualny rozmiar tablicy, czyli liczbę jej elementów. Należy pamiętać, że zliczane są również komórki puste o wartości null oraz że indeksowanie komórek zaczyna się od zera. Przykładowo po wykonaniu instrukcji:

var tablica = new Array();

tablica[9] = 100;

właściwość length tablicy tablica (tablica.length) będzie miała wartość 10. Dodanie nowego elementu na końcu istniejącej tablicy można natomiast przeprowadzić za pomocą schematycznej instrukcji:

tablica[tablica.length] = wartość;

Warto zwrócić uwagę na fakt, że dzięki temu, iż zawsze znamy rozmiar tablicy, do przejrzenia jej zawartości można zamiast pętli for...in użyć pętli for, np. tak, jak zostało to zaprezentowane na listingu 3.4.

Listing 3.4. Użycie właściwości length

<script type="text/javascript">

var tablica = Array(1, 2, 3, 4, 5, 6);

for(var i = 0; i < tablica.length; i++){

  document.write(tablica[i] + " ");

}

</script>

Metody

Metoda concat

Składnia: tablica1.concat(lista elementów)

Dostępność: od JavaScript 1.2 i JScript 3.0

Przeglądarki: IE4, FF, NN4, OP7

Metoda concat służy do łączenia dwóch tablic i działa w taki sposób, że na końcu tablicy tablica1 zostaną dodane elementy przekazane w postaci argumentu. Jako argumentu można użyć listy wartości oddzielonych od siebie znakami przecinka bądź też innej tablicy, a także listy tablic. Załóżmy przykładowo, że w kodzie znalazły sie trzy tablice w postaci:

var tab1 = [1, 2, 3];

var tab2 = [3, 4, 5];

var tab3 = [6, 7, 8];

Jeżeli wykonamy operację:

var tab4 = tab1.concat(tab2);

w wyniku otrzymamy tablicę tab4 o zawartości 1, 2, 3, 3, 4, 5.

Jeżeli wykonamy operację:

var tab4 = tab1.concat(tab3, tab2);

w wyniku otrzymamy tablicę tab4 o zawartości 1, 2, 3, 6, 7, 8, 3, 4, 5.

Jeżeli wykonamy operację:

var tab4 = tab1.concat(4, 5);

w wyniku otrzymamy tablicę tab4 o zawartości 1, 2, 3, 4, 5.

Jeżeli wykonamy operację:

var tab4 = tab1.concat(4, 5, tab3, 9);

w wyniku otrzymamy tablicę tab4 o zawartości 1, 2, 3, 4, 5, 6, 7, 8, 9.

Można to zilustrować za pomocą fragmentu kodu widocznego na listingu 3.5.

Listing 3.5. Różne sposoby łączenia tablic

<script type="text/javascript">

var tab1 = [1, 2, 3];

var tab2 = [3, 4, 5];

var tab3 = [6, 7, 8];

 

var tab4 = tab1.concat(tab2);

document.write("Operacja tab1.concat(tab2): <br />");

for(var i in tab4){

  document.write(tab4[i] + " ");

}

 

var tab5 = tab1.concat(tab3, tab2);

document.write("<br />Operacja tab1.concat(tab3, tab2): <br />");

for(var i in tab5){

  document.write(tab5[i] + " ");

}

 

var tab6 = tab1.concat(4, 5);

document.write("<br />Operacja tab1.concat(4, 5): <br />");

for(var i in tab6){

  document.write(tab6[i] + " ");

}

 

var tab7 = tab1.concat(4, 5, tab3, 9);

document.write("<br />Operacja tab1.concat(4, 5, tab3, 9): <br />");

for(var i in tab7){

  document.write(tab7[i] + " ");

}

</script>

Metoda indexOf

Składnia: tablica.indexOf(wartość)

Dostępność: od JavaScript 1.6

Przeglądarki: FF, NN3, OP7

Metoda indexOf zwraca indeks pierwszego wystąpienia w tablicy elementu określonego przez argument wartość. Jeżeli taki element nie występuje, zwracana jest wartość –1. Metoda nie jest dostępna w przeglądarkach z rodziny Internet Explorer. Przykładowo: jeśli dysponujemy tablicą w postaci:

var tablica = new Array(0, 1, 5, 2, 4, 3);

to wywołanie:

tablica.indexOf(5)

da w wyniku wartość 2, ponieważ element o wartości 5 znajduje się pod indeksem 2. Natomiast wywołanie:

tablica.indexOf("abc")

da w wyniku wartość –1, ponieważ element o wartości abc w tablicy nie występuje.

Metoda join

Składnia: tablica.join(separator)

Dostępność: od JavaScript 1.1 i JScript 3.0

Przeglądarki: IE4, FF, NN3, OP7

Ta metoda pozwala na złączenie (z ang. join — łączyć) wszystkich komórek tablicy w ciąg znaków, w którym poszczególne wartości oddzielone są znakami separatora. To najwygodniejszy sposób na wylistowanie zawartości tablicy w celu wyświetlania jej na ekranie lub też przekazania do dalszego przetwarzania innej aplikacji, przesłania do serwera itp. Metody join można użyć w sposób przedstawiony na listingu 3.6.

Listing 3.6. Ilustracja działania metody join

<script type="text/javascript">

var tablica = new Array(1, 2, 3);

var str = tablica.join(", ");

document.write(str);

</script>

Metoda lastIndexOf

Składnia: tablica.lastIndexOf(wartość)

Dostępność: od JavaScript 1.6

Przeglądarki: FF, NN3, OP7

Metoda lastIndexOf działa podobnie jak indexOf, czyli zwraca indeks wystąpienia w tablicy elementu określonego przez argument wartość. W tym jednak przypadku przeszukiwanie tablicy rozpoczyna się od końca — od ostatniego elementu. Jeżeli taki element nie występuje, zwracana jest wartość –1. Metoda nie jest dostępna w przeglądarkach z rodziny Internet Explorer. Przykładowo: jeśli dysponujemy tablicą w postaci:

var tablica = new Array(0, 1, 5, 2, 5, 3);

to wywołanie:

tablica.lastIndexOf(5)

da w wyniku wartość 4, ponieważ ostatnie wystąpienie elementu o wartości 5 znajduje się pod indeksem 4.

Metoda pop

Składnia: tablica.pop()

Dostępność: od JavaScript 1.2 i JScript 5.0

Przeglądarki: IE5.5, FF, NN4, OP7

Metoda pop pobiera z tablicy ostatni element i jednocześnie usuwa go (tym samym tablica zostaje skrócona o ostatni element). Przykładowe użycie metody pop zostało pokazane na listingu 3.7.

Listing 3.7. Ilustracja działania metody pop

<script type="text/javascript">

var tablica = new Array(1, 2, 3);

document.write("Zawartość tablicy przed wykonaniem metody pop: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

var element = tablica.pop();

document.write("<br />Zawartość tablicy po wykonaniu metody pop: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

</script>

Metoda push

Składnia: tablica.push(lista elementów)

Dostępność: od JavaScript 1.2 i JScript 5.5

Przeglądarki: IE5.5, FF, NN4, OP7

Metoda push jest przeciwieństwem metody pop i dodaje na końcu tablicy nowe elementy przekazane w postaci argumentów. Poszczególne dodawane elementy należy oddzielić od siebie znakami przecinka, schematycznie:

tablica.push(element1, element2,..., elementN);

Działanie metody push ilustruje skrypt z listingu 3.8.

Listing 3.8. Ilustracja działania metody push

<script type="text/javascript">

var tablica = new Array(1, 2, 3);

document.write("Zawartość tablicy przed wykonaniem metody push: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

var element = tablica.push(4, 5);

document.write("<br />Zawartość tablicy po wykonaniu metody push: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

</script>

Metoda reverse

Składnia: tablica.reverse()

Dostępność: od JavaScript 1.1 i JScript 3.0

Przeglądarki: IE4, FF, NN3, OP7

Metoda reverse pozwala na odwrócenie kolejności komórek tablicy, czyli komórka pierwsza staje się ostatnią, komórka druga — przedostatnią itd. Zostało to zilustrowane na listingu 3.9.

Listing 3.9. Ilustracja działania metody reverse

<script type="text/javascript">

var tablica = new Array(1, 2, 3);

document.write("Zawartość tablicy przed wykonaniem metody reverse: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

tablica.reverse();

document.write("<br />Zawartość tablicy po wykonaniu metody reverse: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

</script>

Metoda shift

Składnia: tablica.shift()

Dostępność: od JavaScript 1.2 i JScript 5.5

Przeglądarki: IE5.5, FF, NN4, OP7

Metoda shift pobiera i usuwa pierwszy element tablicy oraz zwraca wartość tego elementu. Wszystkie elementy zostaną też przenumerowane, czyli indeks każdego z nich zmniejszy się o jeden. Użycie metody shift ilustruje przykład z listingu 3.10.

Listing 3.10. Ilustracja działania metody shift

<script type="text/javascript">

var tablica = new Array(1, 2, 3);

document.write("Zawartość tablicy przed wykonaniem metody shift: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

var element = tablica.shift();

document.write("<br />Zawartość tablicy po wykonaniu metody shift: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

document.write("<br />Wartość pobranego elementu: " + element);

</script>

Metoda slice

Składnia: tablica.slice(start, [end])

Dostępność: od JavaScript 1.2 i JScript 3.0

Przeglądarki: IE4, FF, NN4, OP7

Metoda slice zwraca nową tablicę (zawartość oryginalnej pozostaje nienaruszona) zawierającą elementy tablicy tablica od indeksu start do indeksu end - 1. Jeżeli parametr end zostanie pominięty, metoda slice zachowa się tak, jakby miał on wartość tablica.lenght. Jeśli parametr end będzie ujemny, indeks końcowego znaku będzie liczony od końca ciągu. Oznacza to, że jeśli utworzymy tablicę tab1:

var tab1 = Array(1, 2, 3, 4, 5, 6, 7, 8);

to wykonanie instrukcji:

var tab2 = tab1.slice(0, 2);

var tab3 = tab1.slice(2, 5);

var tab4 = tab1.slice(1, -3);

var tab5 = tab1.slice(3);

spowoduje powstanie tablic:

  • tab2 o elementach 1, 2;

  • tab3 o elementach 3, 4, 5;

  • tab4 o elementach 2, 3, 4, 5;

  • tab5 o elementach 4, 5, 6, 7, 8.

Można się o tym przekonać, uruchamiając kod widoczny na listingu 3.11.

Listing 3.11. Ilustracja działania metody slice

<script type="text/javascript">

var tab1 = Array(1, 2, 3, 4, 5, 6, 7, 8);

document.write("Zawartość tablicy przed wykonaniem metody slice: <br />");

document.write(tab1.join());

 

var tab2 = tab1.slice(0, 2);

var tab3 = tab1.slice(2, 5);

var tab4 = tab1.slice(1, -3);

var tab5 = tab1.slice(3);

 

document.write("<br />Efekt wykonania tab1.slice(0, 2): <br />");

document.write(tab2.join());

document.write("<br />Efekt wykonania tab1.slice(2, 5): <br />");

document.write(tab3.join());

document.write("<br />Efekt wykonania tab1.slice(1, -3): <br />");

document.write(tab4.join());

document.write("<br />Efekt wykonania tab1.slice(3): <br />");

document.write(tab5.join());

</script>

Metoda sort

Składnia: tablica.sort([nazwa_funkcji])

Dostępność: od JavaScript 1.1 i JScript 3.0

Przeglądarki: IE4, FF, NN3, OP7

Metoda sort sortuje elementy tablicy (czyli ustawia w określonym porządku). Jeśli zostanie wywołana bez argumentu, zawartości wszystkich komórek zostaną potraktowane jako ciągi znaków i ustawione w porządku leksykograficznym rosnącym (inaczej mówiąc — alfabetycznie). Jeśli potrzebny jest inny rodzaj porządkowania elementów, to jako argument może także zostać dostarczona nazwa funkcji sortującej o ogólnej postaci:

function nazwa_funkcji(element1, element2)

{

  //treść funkcji

}

Jej zadaniem jest zwrócenie wartości ujemnej, jeśli element1 jest mniejszy od element2; wartości dodatniej, jeśli element1 jest większy od element2; lub też wartości 0, jeśli element1 i element2 są sobie równe. Gdyby zatem istniała konieczność posortowania tablicy liczb w porządku malejącym, można by zastosować kod z listingu 3.12.

Listing 3.12. Ilustracja działania metody sort

<script type="text/javascript">

function func(element1, element2)

{

  return element2 - element1;

}

var tablica = new Array(1, 5, 4, 2 ,3);

document.write("Zawartość tablicy przed wykonaniem metody sort: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

 

tablica.sort(func);

 

document.write("<br />Zawartość tablicy po wykonaniu metody sort: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

</script>

Metoda splice

Składnia: tablica.splice(indeks, ile, [wartość1, wartość2, ... , wartośćn])

Dostępność: od JavaScript 1.2 i JScript 5.5

Przeglądarki: IE5.5, FF, NN4, OP7

Metoda splice usuwa z tablicy, począwszy od indeksu indeks, liczbę elementów wskazywaną przez argument ile. W miejsce usuniętych elementów mogą zostać wstawione nowe, wskazywane przez argumenty wartość1, wartość2 itd. Przykładowo: jeśli istnieje tablica:

var tab1 = new Array("a", "b", 0, 0 , 0, "f", "g");

to wykonanie metody

tab1.splice(2, 3, "c", "d", "e");

spowoduje usunięcie 3 elementów, począwszy od indeksu 2 (czyli trzech 0), i wstawienie na ich miejsce elementów c, d, e. A zatem tablica wynikowa będzie zawierała elementy a, b, c, d, e, f, g. Ilustruje to kod z listingu 3.13.

Listing 3.13. Ilustracja działania metody splice

<script type="text/javascript">

var tablica = new Array("a", "b", 0, 0 , 0, "f", "g");

document.write("Zawartość tablicy przed wykonaniem metody splice: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

 

tablica.splice(2, 3, "c", "d", "e");

 

document.write("<br />Zawartość tablicy po wykonaniu metody splice: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

</script>

Metoda toLocaleString

Składnia: tablica.toLocaleString()

Dostępność: od JavaScript 1.3 i JScript 5.5

Przeglądarki: IE5.5, FF, NN6, OP7

Metoda toString zwraca ciąg znaków przedstawiający zawartość wszystkich komórek tablicy. Sposób przedstawiania wartości tablicy zależy od konkretnej przeglądarki, może mieć na to również wpływ wersja językowa przeglądarki i systemu operacyjnego. Przykładowo: jeśli mamy tablicę zdefiniowaną jako:

var tab = new Array(1, 2, 3, "a", "b", "c");

to wywołanie:

tab.toLocaleString()

da w wyniku ciąg:

  • 1,2,3,a,b,c — w przypadku Firefoksa 2, 3 i Opery 9, 10 (jest to równoznaczne z wywołaniem tab.join(","));

  • 1,00; 2,00; 3,00; a; b; c — w przypadku Internet Explorera 6, 7, 8.

Metoda toString

Składnia: tablica.toString()

Dostępność: od JavaScript 1.1 i JScript 3.0

Przeglądarki: IE4, FF, NN3, OP7

Metoda toString zwraca ciąg znaków przedstawiający zawartość wszystkich komórek tablicy. Poszczególne wartości oddzielone są znakami przecinka. Działanie tej metody jest identyczne z wywołaniem tablica.join(",").

Metoda unshift

Składnia: tablica.unshift(elementy)

Dostępność: od JavaScript 1.2 i JScript 5.5

Przeglądarki: IE5.5, FF, NN4, OP7

Metoda unshift wstawia element na początku tablicy, jest to zatem odwrotność metody Shift. Tablica zostanie odpowiednio przenumerowana. Wywołanie metody unshift ma schematyczną postać:

tablica.unshift(element1, element2,..., elementN);

Metoda zwraca nową liczbę elementów tablicy. Przykład użycia metody unshift znajduje się na listingu 3.14.

Listing 3.14. Ilustracja działania metody unshift

<script type="text/javascript">

var tablica = new Array(1, 2, 3);

document.write("Zawartość tablicy przed wykonaniem metody unshift: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

 

var count = tablica.unshift(0);

 

document.write("<br />Zawartość tablicy po wykonaniu metody unshift: <br />");

for(indeks in tablica){

  document.write(tablica[indeks] + " ");

}

document.write("<br />Nowa liczba elementów tablicy to: ");

document.write(count);

</script>

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15749040