Dziudek's jogger

Plik array.js to pierwszy z plików zawierających klasy natywne. W array.js znajdziemy implementacje kilku funkcji do obsługi tablic, których nie obsługują natywnie niektóre przeglądarki, a także rozszerzenia dla obiektu Array i dwie dodatkowe funkcje powiązane z tablicami.

Te funkcje to:

• forEach - funkcja ta wykonuję daną jako parametr funkcję dla każdego elementu tablicy,
• filter - ta funkcja jak sama nazwa wskazuje filtruje elementy tablicy, z użyciem funkcji podanej jako parametr,
• map - funkcja ta wykonuję kopię danej tablicy z równoczesnym wykonaniem na nich funkcji podanej jako parametr,
• every - funkcja ta zwróci wartość logiczną true, jeżeli wszystkie elementy tablicy spełniają podane warunki,
• some - ta funkcja zwróci wartość logiczną true, jeżeli co najmniej jeden element tablicy spełniaja podane warunki,
• indexOf - funkcja ta zwraca numer indeksu danego elementu.

Oprócz nich mamy do dyspozycji takie metody jak:

• each - metoda o takim samym działaniu jak forEach,
• copy - metoda służąca do kopiowania tablicy,
• remove - metoda ta usuwa podany jako parametr element tablicy,
• test - metoda, która sprawdzi czy podany element znajduje się w tablicy,
• extend - metoda służąca do dodawania elementu do tablicy,
• associate - metoda tworząca tablicę asocjacyjną z podanych dwóch tablic.

Plik array.js posiada jeszcze dwie dodatkowe funkcje :

• $A - to samo co metoda copy tylko, że dotycząca nie tablic a na przykład argumentów obiektu czy kolekcji elementów DOM,
• $each - funkcja do wykonywania iteracji na nieregularnych tablicach.

forEach

Funkcja ta ma za zadanie wykonanie danej funkcji na każdym z elementów tablicy. Jej składnia wygląda następująco:

W wypadku gdy korzystamy z samodzielnej funkcji:

tablica.forEach(nazwa_funkcji);

Natomiast w sytuacji gdy korzystamy z funkcji obiektu:

tablica.forEach(obiekt.nazwa_funkcji, obiekt);

I przykłady :

Samodzielna funkcja:

var tablica = [10, 20, 30];

function alerty(element, index) {
    alert("[" + index + "] = " + element);
}

tablica.forEach(alerty);


W powyższym wypadku ujrzymy trzy alerty o treściach : "[0] = 10", "[1] = 20" i "[2] = 30". Oczywiście przypominam, że indeksy w tablicach zaczynają się od zera ;)

Funkcja obiektu:

var tablica = [5, 10, 15];

var alerty = {
    pokaz_tablice: function (element) {
        alert(element);
    }
};

tablica.forEach(alerty.pokaz_tablice, alerty);

W tym wypadku zobaczymy trzy alerty o treściach : "5", "10" i "15".

I jeszcze mała wskazówka do powyższych kodów - przy wykonywaniu funkcji forEach mamy do dyspozycji trzy zmienne - element, index i array. Element to aktualny element tablicy, index to aktualny indeks tegoż elementu, a array reprezentuje całą tablicę wykorzystywaną przy funkcji forEach.

filter

Funkcja ta służy do przefiltrowania danych z tablicy i zostawienia tylko tych potrzebnych. Składnia funkcji filter jest taka sama jak w wypadku funkcji forEach, stąd tylko krótki przykład z omówieniem:

var tablica = [20, 21, 22];

function wieksze_niz_10(element) {
    return (element > 20);
}

var przefiltrowane = tablica.filter(wieksze_niz_10);

function alerty(element){
    alert(element);
}

przefiltrowane.forEach(alerty);

W powyższym wypadku tablica przefiltrowane będzie zawierała elementy 21 i 22, które zostaną wyświetlone jako treści alertów przy użyciu funkcji forEach.

map

Funkcja map służy do wykonania funkcji na każdym elemencie i stworzenia tablicy z wynikami działania funkcji. Składnia taka sama jak w wypadku funkcji forEach. Przykład użycia:

var liczby = [1, 4, 9];
var pierwiastki_liczb = liczby.map(Math.sqrt);

Tablica pierwiastki_liczb po wykonaniu kodu będzie miała postać [1,2,3].

every

Funkcja every zwraca wartość true, jeżeli wszystkie elementy tablicy spełniają dane warunki. Składnia funkcji taka jak w wypadku funkcji filter. Przykład działania:

var tablica1 = [2,22,222,2222];
var tablica2 = [11,111,1111,11111];

function wieksze_niz_10(element) {
    return (element > 10);
}

var wynik = tablica1.every(wieksze_niz_10);
alert(wynik);
wynik = tablica2.every(wieksze_niz_10);
alert(wynik);

W pierwszym wypadku zobaczymy alert o treści "false", ponieważ liczba 2 jest mniejsza od 10. W drugim wypadku zobaczymy alert o treści "true", gdyż każdy z elementów tablicy tablica2 jest większy od 10.

some

Funkcja some działa analogicznie do funkcji every - dlatego nie podaję przykładu działaniu. Jedyna różnica polega na tym, że w przypadku funkcji some dane warunki musi spełniać co najmniej jeden element tablicy, natomiast w wypadku funkcji every, każdy z elementów tablicy musi spełniać dane warunki.

indexOf

Ostatnia z omawianych funkcji natywnych - indexOf zwraca nam indeks danego elementu w tablicy. Składnia prezentuje się następująco:

var indeks_elementu = nazwa_tablicy.indexOf(zawartosc_elementu);

Na przykład:

var tablica = [3,5,7,9];

var indeks = tablica.indexOf(9);

alert(indeks);

var indeks2 = tablica.indexOf(11);

alert(indeks2);

Po uruchomieniu powyższego kodu ujrzymy dwa alerty - pierwszy o treści "4", a drugi o treści "-1". Wartość -1 otrzymamy zawsze wtedy gdy element o danej wartości nie istnieje w danej tablicy.

Pora przejść do metod rozszerzających funkcjonalność obiektu Array.

each

Metoda each to nic innego jak alias funkcji forEach, a więc jej sposób działania jest taki sam ;)

copy

Metoda copy służy do kopiowania danej tablicy. Posiada dwa parametry, które wpływają na ilość kopiowanych danych:

• start - Określa indeks elementu od którego zaczyna się kopiowanie tablicy .Domyślnie ma wartość 0,
• length - określa ilość elementów do skopiowania. Domyślna wartość jest równa długości danej tablicy.

Składnia funkcji copy:

var nazwa_kopii = nazwa_tablicy.copy(start, length);

No i oczywiście przykłady użycia ;)

Na początek kopiowanie całej tablicy:

var tablica = [10,20,30,40,50,60,70,80];

var kopia = tablica.copy();

// po tym zabiegu
// var kopia = [10,20,30,40,50,60,70,80];

Teraz kopiowanie począwszy od trzeciego elementu tablicy (trzeci element ma indeks równy 2)

var tablica = [10,20,30,40,50,60,70,80];

var kopia = tablica.copy(2);

// po tym zabiegu
// var kopia = [30,40,50,60,70,80];

Kopiowanie 4 pierwszych elementów:

var tablica = [10,20,30,40,50,60,70,80];

var kopia = tablica.copy(0,4);

// po tym zabiegu
// var kopia = [10,20,30,40];

I na koniec kopiowanie 3 elementów począwszy od czwartego:

var tablica = [10,20,30,40,50,60,70,80];

var kopia = tablica.copy(3,3);

// po tym zabiegu
// var kopia = [40,50,60];

Jak widać dzięki tym dwóm argumentom metody copy, możemy dokładnie określić interesującą nas część tablicy do kopiowania.

remove

Metoda remove służy do usuwania elementów tablicy. Jest banalna w obsłudze. Składnia prezentuje się następująco:

nazwa_tablicy.remove(wartosc_elementu_do_usuniecia);

I przykład działania:

var tablica = [20,30,40,50];
tablica.remove("20");
// teraz tablica ma postać:
// tablica = [30,40,50];

contains

Metoda contains (w mootools 1.0 znana jako test) służy do sprawdzania czy dana wartość występuje w danej tablicy. Metoda ta zwraca wartość logiczną - true jeśli dana wartość występuje w tablicy oraz false gdy danego elementu w tablicy nie ma.

Składnia funkcji:

nazwa_tablicy.contains("wartosc_elementu");

Przykład działania:

var tablica = [1,2,3,4,5,6];

alert(tablica.contains("2"));
alert(tablica.contains("7"));

Podczas wykonywania powyższego kodu ujrzymy dwa alerty - pierwszy o treści "true", ponieważ element o wartości 2 występuje w tablicy, natomiast drugi alert będzie miał treść "false" ponieważ element o wartości 7 nie występuje w danej tablicy.

extend

Metoda extend służy do dodawania elementów do tablicy. Możemy dodawać pojedyncze elementy, jak i całe tablice. Składnia funkcji:

nazwa_tablicy.extend(['element1','element2', ... ,'elementN']);

Przykład użycia tej metody:

var tablica = ['jeden','dwa','trzy'];

tablica.extend(['cztery','pięć']);

Po wykonaniu powyższego kodu zmienna tablica, będzie zawierała elementy: jeden, dwa, trzy, cztery i pięć.

Oczywiście częściej zapewne będzie się stosować zapis w którym zamiast listy elementów będzie po prostu zmienna tablicy:

var tablica = ['jeden','dwa','trzy'];
var tab = ['cztery','pięć'];

tablica.extend(tab);

merge

Metoda merge służy do łączenia tablic bez duplikowania ich elementów - z dwóch tablic otrzymamy jedną złożoną z takiej ilości elementów ile było w obu tablicach unikalnych składników. Składnia funkcji merge wygląda następująco:

['arg1','arg2'].merge(['arg3','arg2']);

A dokładniej:

tablica1.merge(tablica2);

Zostanie zwrócona tablica, która w wypadku pierwszego przykładu będzie wyglądała następująco:

['arg1','arg2','arg3'];

Jak widzimy podwójny element 'arg2' nie zostanie powtórzony przy używaniu metody merge.

include

Metoda include pozwala dodać nam podany jako argument element do tablicy, ale pod warunkiem, że dany element jeszcze w tej tablicy nie występuje. Składnia tej metody wygląda następująco:

tablica.include(element);

Na przykład kod:

['arg1','arg2','arg3'].include('arg4');

zwróci nam tablicę:

['arg1','arg2','arg3','arg4'];

Ale już zapis:

['arg1','arg2','arg3'].include('arg2');

zwróci nam tą samą tablicę:

['arg1','arg2','arg3'];

ponieważ element 'arg2' występuje już w niej.

getRandom i getLast

Metody getRandom i getLast zwracają nam pojedyncze elementy tablicy - getRandom element losowy, a getLast ostatni element tablicy.

Składnia obu funkcji jest podobna i wygląda następująco:

tablica.getRandom();
tablica.getLast();

associate

Jeżeli mamy dwie tablice powiązane ze sobą, o tej samej ilości elementów, to dzięki metodzie associate, możemy stworzyć z tych tablic jedną tablicę asocjacyjną. Składnia funkcji prezentuje się następująco:

var tablica_asocjacyjna = tablica_elementow.associate(tablica_indeksow);

I jak zawsze przykład działania:

var skroty = ['CPU', 'GPU', 'HDD'];
var sprzet = ['Procesor', 'Karta graficzna', 'Dysk twardy'];
var skojarzenia = skroty.associate(sprzet);

Po wykonaniu powyższego kodu będziemy mogli wykonywać odwołania typu:

var hardware = skojarzenia['Procesor'];

// zmienna hardware przyjmie wartość 'CPU'

Pozostały nam jeszcze do omówienia dwie funkcje nie będące metodami obiektu Array.

$A

Funkcja $A, której składnia wygląda następująco :

$A(zbior_argumentow).funkcja_dla_obiektu_Array;

Pozwala nam na zamienienie na tablice obiektów, które nimi nie są - na przykład kolekcji elementów DOM. A zatem możemy od nich stosować takie funkcje jakie stosujemy do tablic.

Dla przykładu - gdybyśmy chcieli wyświetlić alerty z atrybutami id występujących w dokumencie elementów div, tworzymy taki kod:

window.onload = function(){
    var dom = $$('div');

    $A(dom).each(function(dom){
        alert(dom.id);
    });
}

$each

Funkcja $each ma działanie takie jak funkcja forEach i metoda each dla tablic, tylko, że funkcja $each operuje tak jak funkcja $A na obiektach nie będących tablicami.

Składnia tej funkcji wygląda następująco:

$each(argumenty,funkcja);

I przykład użycia podobny do poprzedniego:

window.onload = function(){     var dom = $$('div');

    $each(dom, function(dom){
        alert(dom.id);
        });
}

Tu jeszcze mała uwaga odnośnie dwóch ostatnich kodów - pozwoliłem sobie użyć funkcji $$ pochodzącej z pliku element.js, o którym napiszę niebawem w kursie. Krótko mówiąc służy on do selekcji wszystkich elementów danego typu.