Pętle

Pętlę w programowaniu pozwalają nam wykonywać dany kod pewną ilość razy.

Przypuśćmy, że byliśmy niegrzeczni i nauczyciel kazał nam napisać jakieś zdanie 100 razy. Możemy to oczywiście zrobić za pomocą poniższego kodu:


console.log("Nie będę rozmawiał na lekcji Informatyki.");
console.log("Nie będę rozmawiał na lekcji Informatyki.");
console.log("Nie będę rozmawiał na lekcji Informatyki.");
console.log("Nie będę rozmawiał na lekcji Informatyki.");
console.log("Nie będę rozmawiał na lekcji Informatyki.");
...

Ale o wiele lepiej jest skorzystać z pętli, która wykona dany kod zadaną liczbę razy.

Pętla typu while

Struktura pętli while ma następującą postać:


while (wyrażenie) {
    ...fragment kodu który będzie powtarzany...
}

Fragment kodu będzie powtarzany dopóki będzie spełniony warunek testowany w nawiasach. Aby pętla miała swój koniec, musimy w odpowiednim momencie sprawić, że testowany warunek zwróci wartość false:


var x = 1;

while (x <= 100) {
    console.log("Nie będę rozmawiał na lekcji Informatyki.");
    x++;
}

Jeżeli w powyższym kodzie pętli nie zwiększalibyśmy x, wówczas pętla ta wykonywała by się w nieskończoność (infinite loop), co zaowocowało by "zawieszeniem" strony.

Pętla typu do ... while

Podobnym rodzajem pętli jest pętla typu do ... while. Zasadniczą różnicą między tym typem a poprzednim jest to, że kod który ma być powtarzany zostanie wykonany przed sprawdzeniem wyrażenia.

Ogólna postać tego typu pętli jest następująca:


do {
    ...fragment kodu który będzie powtarzany...
} while (wyrażenie)

Przykładowo:


var x = 1;

do {
    console.log("Nie będę rozmawiał na lekcji Informatyki.");
    x++;
} while (x <= 100)

Pętla typu for

Kolejnym rodzajem pętli jest pętla typu for. Jest to najczęściej używany rodzaj pętli.


for (zainicjowanie zmiennych; wyrażenie testujące; zwiększenie/zmniejszenie zmiennej) {
    kod ktory zostanie wykonany pewną ilość razy
}

Przykładowo:


for (var x=0; x<100; x++) {
    console.log('Nie będę rozmawiał na lekcji Informatyki.');
}

Nie musisz deklarować wszystkich trzech parametrów opisujących pętlę. Dla przykładu:


for (var x=0; x<5; ) {
    console.log("To jest przykładowe zdanie"); //wypisze sie 3 razy
    x = x + 2;
}

var x = 3;
for (; x<10;) {
    console.log("To jest przykładowe zdanie"); //wypisze sie 7 razy
    x++;
}

Pętla w pętli

Czasami musimy wykonać zadania "n - wymiarowe". Dla przykładu przy wypisywaniu tabliczki mnożenia musimy utworzyć 10 kolumn z 10 komórkami.

Pierwszy przykład pokazuje zagnieżdżenie pętli typu for w pętli typu while:


var i = 1;
while (i <= 10) { //rozpoczynamy pętlę typu while
    var msg = '';

    for (var x=0; x < i; x++) { //za każdym razem wykonujemy pętlę for
        msg += '.'
    }

    console.log(msg); //po każdej iteracji pętli while wypisujemy tekst
    i++; //zwiększamy "i"
}

Nieco bardziej skomplikowany przykład demonstrujący pętlę typu for w pętli for. Powiedzmy, że na stronie mamy tabelkę:


<table id="tabelka"></table>

Chcemy za pomocą JS stworzyć w niej 10 rzędów 10 kolumn.


var table = document.getElementById('tabelka'); //pobieramy tabelkę

var tableHTML = ''; //rozpoczynamy generowanie kodu tabeli
for (var y=1; y<=10; y++) {

    var tr = '<tr>'; //zaczynam tworzyć nowe tr

    for (var x=1; x<=10; x++) {
        var tekst = x*y; //tworzymy tekst do wstawienia do komórki

        if (y==1 || x==1) { //jeżeli jest to pierwsza komórka w pionie lub poziomie
            var td = '<th>'+tekst+'</th>'; //stwórz nowe th
        } else {
            var td = '<td>'+tekst+'</td>'; //stwórz nowe td
        }

        tr += td; //wstaw komórkę do rzędu TR
    }
    tr += '</tr>'; //zakończ tworzenie rzędu

    tableHTML += tr; //wstaw rząd do generowanego kodu HTML
}

table.innerHTML = tableHTML; //gotowy wygenerowany kod HTML wstawiamy do tabeli na stronie

Zasada działania powyższego skryptu jest bardzo prosta. Wykonujemy pętlę (y), w której za każdym razem tworzymy nowy obiekt tr. Następnie wykonujemy pętlę w pętli (x). Za każdym przebiegiem sprawdzamy czy zmienne x lub y są równe 1, co oznacza że jest to pierwsza komórka w pionie lub poziomie. Jeżeli tak jest tworzymy th i wstawiamy je do tr. Jeżeli tak nie jest, tworzymy td i postępujemy podobnie. Po utworzeniu tr wstawiamy je do tabelki.

Pętle wykonywane po tablicach

Nie zawsze wiemy ile dany obiekt ma elementów, i ile razy nasza pętla się wykona.

Przypuśćmy, że mamy tablicę. Gdy sami ją utworzymy na sztywno, wówczas jej długość length jest nam znana. Jednak częściej przyjdzie nam pracować na tablicach których długości nie znamy:


var tablica = ['Element 1', 'Element 2', 'Element 3'];

...tutaj zmieniamy długość tablicy...

for (x=0; x<tablica.length; x++) {
    tablica[x] = ....
}

Ta sama zasada tyczy się przy pracy z kolekcjami obiektów (które są bardzo podobne do tablic) (ale nimi nie są):


var p = document.getElementsByTagName('p'); //pobieramy wszystkie paragrafy z dokumentu

for (var x=0; x<p.length/2; x++) {
    p[x].className = 'nowaKlasa' //połowie paragrafów ustawiamy nową klasę styli
}

forEach

Javascript udostępnia nam bardzo wygodną w użyciu metodę forEach(function(element, index, tablica) {}), która robi pętlę po tablicy za każdym razem pobierając i przekazując do funkcji aktualny element, aktualny indeks tablicy i tablicę po której wykonywana jest pętla.
W parametrze tej metody podajemy funkcję, która zostanie wywołana dla każdego elementu tablicy.


var arr = ["a", "b", "c"];
arr.forEach(function(el) {
    console.log(el);
});
//wypisze
//"a"
//"b"
//"c"

[2, 5, 9].forEach(function(element, index, array) {
    console.log("indeks [" + index + "] w tablicy [" +array+ "] to " + element);
});
//wypisze
//indeks [0] w tablicy [2,5,9] to 2
//indeks [1] w tablicy [2,5,9] to 5
//indeks [2] w tablicy [2,5,9] to 9

Więcej szczegółów na ten temat możesz dowiedzieć się w niezastąpionym stackoverflow.