Tablice - lomilowka.pl

Transkrypt

Tablice - lomilowka.pl
Tablice
Czym są tablice? Tablice to specjalne zmienne, w których możesz przechowywać inne zmienne. To
tak jakby segregator, w którym możesz w kolejnych zakładkach przechowywać kolejne dane. Te
dane są oczywiście odpowiednio oznakowane (poindeksowane) byś mógł się do nich jakoś dobrać.
Pomyślisz sobie, że to kolejne utrudnianie prostej sprawy. W końcu gdybyś chciał mógł byś bez
problemu utworzyć powiedzmy 10 zmiennych, a potem się do nich spokojnie odwoływać. Więc po
co te tablice? Ano po to, że w tablicach wszystko masz ładnie ułożone. Nie musisz tworzyć 10
zmiennych a tylko jedną tablicę z wartościami.
Wyobraź sobie powyższy przypadek. Musisz przechować 10 wartości. Tworzysz więc 10
zmiennych. I wszystko jest ok do czasu, gdy musisz na każdej z nich wykonać określoną czynność
(na przykład pomnożyć przez 2). Zaczynają się schody. A schody te zwiększają się gdy dochodzisz
do momentu kiedy nie możesz z góry określić ile ma być tych zmiennych lub gdy tych zmiennych
robi się nie 10 a np 200 razy tyle. Z tablicami takich problemów nie ma.
...Poza tym tablice oferują dodatkowe metody, które robią z nich bardzo dobre narzędzie pracy. ...o
czym przekonasz się już za momencik ;).
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 tablicy
(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 asocjacyjne
W javascript także możęmy tworzyć tablice asocjacyjne, czyli tablice, których indeks jest stringiem:
var Tablica = new Array()
Tablica['chomik'] = "radioaktywny";
Tablica['kot'] = "zmutowany";
Tablica['pies'] = "Super Samson";
Aby teraz móc przemieszczać się po takiej tablicy, skorzystamy z instrukcji for (x in tablica) {...}:
for (i in Tablica) {
console.log('Wartosc tablicy ' + i + ' wynosi ' + Tablica[i]);
}
Podobną technikę stosujemy przy poruszaniu się po obiektach. Zgadnij czemu...
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
Tablica[0]
Tablica[1]
Tablica[2]
//...itp
=
=
=
=
[];
['Marcin' , '183'];
['Ania' , '173'];
['Agnieszka' , '170'];
document.write('imie: ' + Tablica[0][0] + ', wzrost: ' + Tablica[0]
[1]); //wypisze się "imie: Marcin, wzrost: 183"
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łuży do łączenia kolejnych elementów w jeden tekst. Opcjonalnym parametrem tej
metody jest znak, który będzie oddzielał 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"
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
1 4");
2
3
document.write('<strong>Przed:</strong> ' + tablica.join() +
4
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 wartość 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) {return -1}
if (A jest większe od B) {return 1}
//jeżeli A równa się B
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('Bez sortowania:');
document.write( Tablica.join() );
document.write('Tablica.sort():');
Tablica.sort()
document.write( Tablica.join() );
document.write('Tablica.sort(segregujLiczby):');
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
Do połączenia dwóch tablic wykorzystamy metodę concat(array1, ...), która jako parametr
przyjmuje jedną lub kilka tablic:
var zwierzaki = ["Pies", "Kot"];
var zwierzaki2 = ["Słoń", "Wieloryb"];
var zwierzaki3 = ["Chomik ninja", "Świnka morderca"];
var nowaTablicaMala = zwierzaki.concat(zwierzaki2);
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 musieli 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 temp = tablica[i]; //pod zmienną temp podstawiamy
wartość bieżącego indexu
tablica[i] = tablica[j]; //pod bieżący index podstawiamy
wartość z indexu wylosowanego
tablica[j] = temp; //pod wylosowany podstawiamy wartość z
bieżącego indexu
}
return tablica;
}
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 (i=0; i<tablica.length; i++) {
suma += tablica[i];
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 elementu 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órego ma
"wyciąć" elementy, a parametr ile wskazuje ile elementów ma być "wyciętych" (licząc od
początku tablicy):
?
1 var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
2
3 var Tablica_2 = Tablica.slice(0,1)
4 document.write(Tablica_2.join()); //wypisze się "Marcin"
5
6 var Tablica_2 = Tablica.slice(0,2)
7 document.write(Tablica_2.join()); //wypisze się "Marcin,Ania"
8
9 var Tablica_2 = Tablica.slice(0,5)
10 document.write(Tablica_2.join()); //wypisze się
11 "Marcin,Ania,Agnieszka"
12
13 var Tablica_2 = Tablica.slice(0,1)
14 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ę:
?
1
var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
2
document.write( Tablica.slice(1) )
3
Aby usunąć ostatni element skorzystajmy z instrukcji:
?
1 document.write( Tablica.slice(0,Tablica.length-1) )
2
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
?
1 var tablica = new Array('Marcin', 'Ania', 'Agnieszka');
2 var dlugosc = Tablica.push('Grzegorz','Marta');
3
4 alert(dlugosc); //wypisze się 5
5 alert(tablica) //wypisze się
6 "Marcin,Ania,Agnieszka,Grzegorz,Marta"
Możemy też napisać własną funkcję mojPush, która będzie zwracała zamiast długości - 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
}
}
1
2
3
4
5
6
7
Array.prototype.mojPush = mojPush; //dodajemy naszą funkcję jako
8 metodę obiektu Array
9
10
var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
11
Tablica = mojPush('Grzegorz')
12
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.pop();
}
tab.reverse();
return tab;
}
//lub
function popN(n) {
var tab = [];
for (var x=0; x<n; x++) {
tab[tab.length] = this[this.length-1];
this.pop();
}
return tab;
}
Array.prototype.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"
Usuwanie pierwszego elementu z tablicy za pomocą metody
shift()
Metoda shift() usuwa pierwszy element z tablicy i go zwraca:
?
var Tablica = new Array('Marcin', 'Ania', 'Agnieszka');
var element = Tablica.shift();
alert(element); //wypisze się Marcin
alert(Tablica.join()); //wypisze się "Ania,Agnieszka"
Własna funkcja shiftN() będzie miała postać:
function shiftN(n) {
var tab = [];
for (var x=0; x<n; x++) {
tab[tab.length] = this.shift();
}
return tab;
}

Podobne dokumenty