.

Tablice w JavaScript

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

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 ];

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.

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

Tworzenie nowej tablicy

Nic trudnego. Wystarczy skorzystać z poniższej instrukcji:

var NazwaTablicy = new Array()
//lub
var NazwaTablicy = []

I tyle. Nie było to zbyt skomplikowane. Jeżeli między nawiasami podamy jakąś liczbę, to utworzymy w ten sposób tablicę z n pustymi elementami np.

var Tablica = new Array(10)

Możemy też utworzyć tablicę, od razu wstawiając do niej wartości:

var NazwaTablicy = new Array('Marcin','Ania','Agnieszka')
//lub
var NazwaTablicy = ['Marcin','Ania','Agnieszka']

Teraz aby uzyskać dostęp do 2 elementu tablicy skorzystamy z instrukcji:

document.write(NazwaTablicy[1]) //wypisz się Ania

Zwróć uwagę, że tablice są indeksowane od 0, tak więc pierwszy element tablicy ma index - 0, drugi - 1, trzeci - 2 itd.

Aby dodać nową wartość do tablicy po prostu ustawiamy nową wartość w odpowiednim indeksie tablicy:

var Tablica = new Array('Marcin','Ania','Agnieszka')
Tablica[3] = "Piotrek";
Tablica[4] = "Grzegorz";
document.write(Tablica[3] + ' i ' + Tablica[4]) //wypisze się "Piotrek i Grzegorz"

Właściwość length

Każda tablica udostępnia nam właściwość length dzięki której możemy określić długość tej talicy (ilość elementów). Dzięki temu możemy poznać index ostatniego elementu oraz w łatwy sposób przeprowadzać pętlę po wszystkich elementach naszej tablicy.

var Tablica = new Array('Marcin','Ania','Agnieszka','Piotrek','Grześ','Magda')
for (x=0; x<Tablica.length; x++)
  document.write(Tablica[x] + "<BR>");

Efekt powyższego skryptu widać poniżej:

Marcin
Ania
Agnieszka
Piotrek
Grześ
Magda

Aby odwołać się do ostatniego elementu musimy odjąć 1 od liczby elementów (bo indexowanie jest od 0):

document.write( Tablica[Tablica.length-1] ); //wypisze się Magda

Tablice wielowymiarowe

Możemy też tworzyć tablice wielowymiarowe - czyli tablice w tablicach. Do czego może się to przydać?
Powiedzmy że chcemy manipulować na rekordach dotyczących osób. Możemy wtedy stworzyć tablicę, w której w każdym indeksie będzie rekord (w formie tablicy) zawierająca dane osoby:

var Tablica = new Array()
Tablica[0] = Array('Marcin','183')
Tablica[1] = Array('Ania','173')
Tablica[2] = Array('Agnieszka,'170')
...

document.write('imie: ' + Tablica[0][0] + ', wzrost: ' + Tablica[0][1]); //wypisze się "imie: Marcin, wzrost: 182"
document.write('imie: ' + Tablica[1][0] + ', wzrost: ' + Tablica[1][1]); //wypisze się "imie: Ania, wzrost: 173"
document.write('imie: ' + Tablica[2][0] + ', wzrost: ' + Tablica[2][1]); //wypisze się "imie: Agnieszka, wzrost: 170"

Łączenie elementów tablicy przy pomocy metody join()

Metoda join() słuzy do łączenia kolejnych elementów w jeden tekst. Opcjonalnym parametrem tej metody jest znak, który będzie oddzialał kolejne elementy w utworzonym tekście. Jeżeli go nie podamy będzie użyty domyślny znak przecinka:

var tablica = new Array("Marcin", "Ania", "Agnieszka")
document.write(tablica.join() + "<BR>") //wypisze się "Marcin,Ania,Agnieszka"
document.write(tablica.join(" - ") +"<BR>") //wypisze się "Marcin - Ania - Agnieszka"
document.write(tablica.join(" + ") +"<BR>") //wypisze się "Marcin + Ania + Agnieszka"

Rezultat powyższego skryptu:

Marcin,Ania,Agnieszka
Marcin - Ania - Agnieszka
Marcin + Ania + Agnieszka

Odwracanie kolejności elementów tablicy przy pomocy metody reverse()

Dzięki metodzie reverse() możemy odwrócić elementy naszej tablicy:

var tablica = new Array("numer 1", "numer 2", "numer 3", "numer 4")

document.write('<strong>Przed:</strong> ' + tablica.join() + '<BR>');
tablica.reverse()
document.write('<strong>Po:</strong> ' + tablica.join() );

Przed: numer 1,numer 2,numer 3,numer 4
Po: numer 4,numer 3,numer 2,numer 1

Sortowanie tablic za pomocą metody sort()

Metoda sort() służy do sortowania tablic metodą "bombelkową". Powiedzmy, że mamy tablicę z niepoukładanymi wartościami, i chcemy ją posortować:

var Tablica = new Array('Marcin','Ania','Piotrek','Grześ')
Tablica.sort()
document.write( Tablica.join() ); //wypisze się "Ania,Grześ,Marcin,Piotrek"

Standardowo Javascript segreguje tablice leksykalnie (czyli tak jak w książce telefonicznej). Powoduje to w niektórych przypadkach nieoczekiwane rezultaty - na przykład 1200 będzie mniejsze od 300 (bo liczy się pierwsza cyfra) itp.
Aby móc posegregować naszą tablicę według własnych kryteriów, musimy skorzystać z dodatkowego parametru, który metoda sort() może opcjonalnie przyjmować. Parametr ten jest nazwą naszej funkcji sortującej. Pisząc taką funkcję musimy pamiętać o 3 sprawach:

• Jeżeli funkcja(a, b) zwróci wartosć mniejszą od 0, to wartość a będzie miała mniejszy index od b

• Jeżeli funkcja(a, b) zwróci 0, to indexy wartości a i b pozostaną bez zmian

• Jeżeli funkcja(a, b) zwróci wartość większą od 0, to wartość a będzie miała większy index od b

Tak więc ogólna postać funkcji sortującej wygląda tak:

function porownaj(A, B) {
if (A jest mniejsze od B wedle kryteriów) return -1
if (A jest większe od B wedle kryteriów) return 1
//jeżeli A równa się B wedle kryteriów
  return 0
}

Przykładowo aby posegregować wartości liczbowe musimy utworzyć funkcję:

//tworzymy funkcję do segregacji liczb
function porownajLiczby(a, b) {
return a - b
}

var Tablica = Array(100, 10, 25, 310, 1200, 400);

document.write('<B>Bez sortowania:</B>');
  document.write( Tablica.join() );

document.write('<B>Tablica.sort():</B>');
  Tablica.sort()
  document.write( Tablica.join() );

document.write('<B>Tablica.sort(segregujLiczby):</B>');
  Tablica.sort(porownajLiczby)
  document.write( Tablica.join() );

Działanie powyższego skryptu widać poniżej:

Bez sortowania: 100,10,25,310,1200,400

Tablica.sort(): 10,100,1200,25,310,400

Tablica.sort(segregujLiczby): 10,25,100,310,400,1200

Oczywiście możemy sami wymyślać nasze własne kryteria segregacji (na przykład by cyfry były "mniejsze" od liter, lub też duże litery były "mniejsze" od małych liter...).

Łączenie dwóch tablic

Standardowo Javascript nie udostępnia nam medoty, która łączyła by dwie tablice w jedną. Zwyczajne dodawanie też nie przynosi oczekiwanych rezultatów, gdyż wynik zwracany jest w formie tekstu. Dodatkowym utrudnieniem jest fakt, że poszczególne elementy w zwróconym ciągu są od siebie oddzielone przecinkami, jednak między ostatnim elementem pierwszej tablicy, a pierwszym drugiej przecinka nie ma.
Napiszmy funkcję, która będzie tworzyła nową tablicę z dwóch:

function dodajTablice(tab1,tab2) {
return (tab1+','+tab2).split(',');
}

var tab1 = new Array('Marcin','Ania');
var tab2 = new Array('Skorpion','Rybka');
var tab3 = dodajTablice(tab1,tab2)
document.write(typeof(tab3)) //wypisze się object document.write(tab3) //wypisze się Marcin,Ania,Skorpion,Rybka

Możemy też napisać funckję, która będzie łączyć kilka tablic podanych w parametrze.
Poniższa funkcja nie ma zadeklarowanej liczby parametrów, tak więc możemy do niej przekazać 2, nawet więcej tablic, z których powstanie jedna.

function dodajTablice() {
var tabTemp = new Array;
for (x=0; x<arguments.length-1; x++) tabTemp += arguments[x]+',';
tabTemp += arguments[arguments.length-1]
return tabTemp.split(', ')
}

var tab1 = new Array('Marcin', 'Ania');
var tab2 = new Array('Skorpion', 'Rybka');
var tab3 = new Array('Czarny', 'Czerwony');
var tab4 = dodajTablice(tab1, tab2, tab3)
document.write(typeof(tab4)) //wypisze się object
document.write(tab4) //wypisze się Marcin, Ania, Skorpion, Rybka, Czarny, Czerwony

Mieszanie tablicy

Skoro potrafimy posortować tablicę, to nauczmy się też wykonać operację wręcz odwrotną - pomieszać przypadkowo elementy tablicy. Javascript niestety nie udostępnia metody do "psucia" tablicy, więc będziemy musili napisać ją sobie sami:

function mieszamy(tablica) {
for (var i = 0; i < tablica.length; i++) { //wykonujemy pętlę po całej tablicy
var j = Math.floor(Math.random() * tablica.length); //losujemy wartość z przedziału 0 - tablica.length-1
var tempTab = tablica[i]; //pod zmienną tempTab podstawiamy wartość bieżącego indexu
tablica[i] = tablica[j]; //pod bieżący index podstawiamy wartość z indexu wylosowanego
yablica[j] = tempTab; //pod wylsowany podstawiamy wartość z bierzącego indexu
}
}

W parametrze tej funkcji podajemy tablicę, która ma być pomieszana. Zasada działania tej funkcji jest podobna do zasady działania segregowania bąbelkowego (ta sama metoda zamiany indeksów).

Wyliczanie średniej wartości elementów tablicy

Znowu musimy polegać tylko na własnym talencie programistycznym ;). Zasada bardzo prosta - dodaj wszystkie elementy tablicy i podziel je przez ilość tych elementów:

function srednia(tablica) {
 var suma = 0;
 for (var i = 0; i < tablica.length; i++) {
 suma += tablica[i];
 }
 return (suma / i); //wszystko podzielone przez ilość elementów
}

Największa i najmniejsza wartość w tablicy

Jak sprawdzić która wartość w tablicy jest największa? Podstawiamy pod zmienną max pierwszy element tablicy. Wykonujemy pętlę po pozostałych elementach tablicy. Jeżeli dany element jest większy od zmiennej max, to pod tą zmienną podstawiamy wartość tego elementu. I tak do końca tablicy...
Tak samo czynimy w przypadku znajdowania najmniejszej wartości. Różnica polega na sprawdzaniu, czy wartość sprawdzanego elemtnu jest mniejsza od zmiennej mins

function max(tablica) {
 var maximum = tablica[0];
  for (var i=1; i<arrObj.length; i++) {
  maximium = (tablica[i] > maximum)? tablica[i] : maximum;
  }
 return (maximum);
}

function min(tablica) {
 var minimum = tablica[0];
  for (var i=1; i<tablica.length; i++) {
  minimum = (tablica[i] < minimum)? tablica[i] : minimum;
  }
 return (minimum);
}

Tworzenie nowej tablicy za pomocą metody slice()

Metoda slice(od,ile) "tnie" naszą tablicę i tworzy w ten sposób nową. Pierwszy parametr od wskazuje na index (może być ujemny - wtedy będzie liczony od końca tablicy), od któego ma "wyciąć" elementy, a parametr ile wskazuje ile elementów ma być "wyciętych" (licząc od początku tablicy): var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');

var Tablica_2 = Tablica.slice(0,1)
document.write(Tablica_2.join()); //wypisze się "Marcin"

var Tablica_2 = Tablica.slice(0,2)
document.write(Tablica_2.join()); //wypisze się "Marcin,Ania"

var Tablica_2 = Tablica.slice(0,5)
document.write(Tablica_2.join()); //wypisze się "Marcin,Ania,Agnieszka"

var Tablica_2 = Tablica.slice(0,1)
document.write(Tablica_2.join()); //wypisze się "Marcin"

Więcej przykładów zastosowania tej metody możesz zobaczyć tutaj: slice().

Metoda ta bardzo dobrze nadaje się do usuwania pierwszych i ostatnich elementów z naszej tablicy.
Na przykład aby usunąć pierwszy element zastosujemy instrukcję:

var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
document.write( Tablica.slice(1) )

Aby usunąć ostatni element skorzystajmy z instrukcji:

document.write( Tablica.slice(0,Tablica.length-1) )

Dodawanie ostatniego elementu do tablicy za pomocą metody push()

Metoda push() wstawia nowy element (lub kilka) do tablicy na jej końcu i zwraca długość nowej tablicy

var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
var dlugosc = Tablica.push('Grzegorz','Marta');
alert(dlugosc); //wypisze się 5 alert(Tablica) //wypisze się "Marcin,Ania,Agnieszka,Grzegorz,Marta"

Możemy też napisać własną funkcję mojPush, która będzie zwracała zamiast długośći - tablicę z nowym elementem:

function mojPush() {
  for (var x=0; x<arguments.length; x++) {//wykonujemy pętlę po wszystkich argumentach funkcji
  this[this.length] = arguments[x];//dodajemy nowy element na końcu tablicy
  }
}

Array.prototype.mojPush = mojPush; //dodajemy naszą funkcję jako metodę obiektu Array

var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
Tablica = mojPush('Grzegorz')
document.write(Tablica.join()); //wypisze się "Marcin,Ania,Agnieszka,Grzegorz"

Usuwanie ostatniego elementu z tablicy przy pomocy metody pop()

Metoda pop() usuwa ostatni element talicy, po czym go zwraca:

var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
var element = Tablica.pop();
alert(element); //wypisze się Agnieszka
alert(Tablica) //wypisze się "Marcin,Ania"

My jesteśmy oczywiście ci "lepsiejsi", więc napiszemy własną funkcję pop, która będzie usuwała kilka elementów na raz. Dodatkowo funkcja nasza zwracać będzie tablicę zawierającą usunięte elementy:

function popN(n) {
 var tab = [];
   for (var x=0; x<n; x++) {
   tab[tab.length] = this[tab.length];
   this.pop();
   }
 tab.reverse();
 return tab;
}

Array.prorotype.popN = popN;

var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
var elementyUsuniete = Tablica.popN(2);
alert(elementyUsuniete); //wypisze Ania,Agnieszka
alert(Tablica); //wypisze Marcin

Dodawanie pierwszego elementu do tablicy za pomocą metody unshift()

Metoda unshift() wstawia nowy element do tablicy na jej początku, po czym zwraca nową długość tablicy

var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
var dlugosc = Tablica.unshift('Piotrek','Pawel');
alert(dlugosc) //wypisze 5
alert(Tablica); //wypisze się "Piotrek,Pawel,Marcin,Ania,Agnieszka"