JAVASCRIPT Tablice

Tym razem deklarowanie ogromnej ilości zmiennych zastąpimy ulokowaniem ich w grupie. Zadeklarujemy tablicę jednowymiarową, wypełnimy ją danymi. Wykorzystamy mechanizm pętli do jej wypełniania i odczytu z niej danych.

Tak jak zmienna jest pojemnikiem służącym do przechowywania pojedynczej wartości, tak tablica przechowa nam wiele danych w jednym miejscu.

Graficzna reprezentacja tablicy:

Komórki tablicy numerowane są od 0 do n-1, gdzie n jest wielkością tablicy, czyli ilością elementów, jakie ta tablica przechowuje, bądź jest w stanie przechować.

Numer komórki nazywamy adresem bądź indeksem.

Zadeklarujmy zatem naszą pierwszą tablicę.

var tablica = ['Jeden', 'Dwa', 'Trzy'];
document.write(tablica[0]+'<br />');
document.write(tablica.length);

Jeden
3 

Utworzyliśmy tablicę, której zawartość ustawiliśmy już na starcie, podając od razu jej wszystkie elementy. Następnie wypisaliśmy na ekran element o indeksie 0, czyli pierwszy element tablicy oraz dzięki zastosowaniu .length wypisaliśmy wielkość tablicy.

Utwórzmy zatem kolejną, pustą tablicę. Wykorzystamy do tego new.

var tablica = new Array();

Kolejny przykład przedstawia deklarację pustej tablicy, następnie wypełnienie jej 20 losowymi liczbami w zakresie 0-100. Kolejna pętla for wypisuje nam wszystkie elementy tablicy, oddzielone spacjami, na ekran.

var tablica = new Array();
var a;

for(var i=0; i<20; i++){
	a = Math.random();
	a *= 100;
	a = Math.round(a);
	tablica[i] = a;
}

for(var i=0; i < tablica.length; i++){
	document.write(tablica[i]+' ');
}

71 89 98 40 38 65 40 32 98 47 52 15 46 12 85 32 67 73 79 32

Poniższy przykład przedstawia odnalezienie największej wartości w tablicy.

var max = 0;
var tablica = new Array();
var a;

for(var i=0; i<20; i++){
	a = Math.random();
	a *= 100;
	a = Math.round(a);
	tablica[i] = a;
}

for(var i=0; i<tablica.length; i++){ if(tablica[i]>max){
		max = tablica[i];
	}
}
document.write('Największa wartość w tablicy to: '+max);

Deklarujemy zmienną max, której początkowa wartość to 0 (wiemy, że elementy tablicy są z przedziału 0 – 100, zatem max będzie minimum 0). Następnie porównujemy każdy kolejny element tablicy z dotychczas znalezioną wartością maksymalną. W przypadku jeśli dany element jest większy od max, przypisujemy max wartość bieżącego elementu.

Wypiszmy elementy tablicy bez użycia mechanizmu pętli. Wykorzystamy metodę join, której możemy podać jakim znakiem mają być oddzielone poszczególne elementy. Domyślne połączenie elementów następuje po przecinku.

var tablica = ['Jeden', 'Dwa', 'Trzy'];
document.write(tablica.join());
document.write(tablica.join(' - '));

Jeden,Dwa,Trzy
Jeden - Dwa - Trzy 

Utwórzmy kolejną tablicę. Wykonamy na niej metody .reverse, sortującą elementy tablicy w kolejności odwrotnej oraz .sort, sortującą elementy od największego do najmniejszego.

var tablica = [3,5,8,4,2,6,1,9];
document.write(tablica.join());
tablica.reverse();
document.write(tablica.join());
tablica.sort();
document.write(tablica.join());
tablica.reverse();
document.write(tablica.join());

3,5,8,4,2,6,1,9
9,1,6,2,4,8,5,3
1,2,3,4,5,6,8,9
9,8,6,5,4,3,2,1

Dodajmy jeszcze elementy i zabierzmy elementy z istniejącej i wypełnionej już tablicy.

var tablica = ['Jeden', 'Dwa', 'Trzy'];
tablica.push('Cztery', 'Pięć');
document.write(tablica.join());
tablica.pop();
document.write(tablica.join());
tablica.unshift('Zero');
document.write(tablica.join());
tablica.shift();
document.write(tablica.join());
tablica.splice(2, 1);
document.write(tablica.join());
tablica.splice(2, 0, 'Trzy');
document.write(tablica.join());

Jeden,Dwa,Trzy,Cztery,Pięć
Jeden,Dwa,Trzy,Cztery
Zero,Jeden,Dwa,Trzy,Cztery
Jeden,Dwa,Trzy,Cztery
Jeden,Dwa,Cztery
Jeden,Dwa,Trzy,Cztery

push() – dołożenie elementów na końcu tablicy
pop() – zabranie elementów z końca tablicy
shift() – zabranie elelemntu z początku tablicy
unshift() – dodanie elementów na początku tablicy
splice() – dodaje / usuwa elementy tablicy [splice(indeks, ilość, elementy)]