Pętla for

Pierwszą pętlą którą omówię jest pętla for. Posiada ona następującą składnię:

for ( inicjalizacja; test_logiczny; inkrementacja )
    instrukcja;

lub

for ( inicjalizacja; test_logiczny; inkrementacja )
{
    instrukcja1;
    instrukcja2;
    ...
}

Jak pokazują powyższe przykłady, instrukcja for posiada trzy wyrażenia rozdzielone średnikami które można podać wewnątrz nawiasów okrągłych: inicjalizacja, test_logiczny i inkrementacja. Ich znaczenie jest następujące:

• inicjalizacja– instrukcja wykonywana tylko raz na samym początku pętli. Zwykle używa się jej do przypisania wartości początkowej do zmiennej która np. będzie zwiększana po każdym obiegu pętli. Zmienna taka zwykle nazywana jest też licznikiem pętli;
• test_logiczny– dowolny warunek który będzie sprawdzany przed każdym obiegiem pętli (także tym pierwszym). W momencie gdy będzie on fałszywy, wykonywanie pętli zostanie przerwane;
• inkrementacja– instrukcja która będzie wykonywana po każdym obiegu pętli, a która ma za zadanie np. zwiększenie wartości zmiennej pełniącej rolę licznika pętli.

Zatem pętla która ma wypisać kolejne cyfry od 0 do 9 może wyglądać następująco:

for (n = 0; n < 10; ++n)
    document.write(n);

Zwróć uwagę na sposób w jaki testuję warunek zakończenia pętli – stosuję ostrą nierówność. Oczywiście można też użyć nieostrej nierówności i uzyskać ten sam rezultat:

for (n = 0; n <= 9; ++n)
    document.write(n);

W pewnych przypadkach gdy potrzebujesz coś wykonać 10 razy ale nie interesuje Cię wartość licznika pętli możesz też liczyć od 1 do 10:

for (n = 1; n <= 10; ++n)
    zrob_cos_ciekawego();

Osobiście polecam tą pierwszą wersję (z ostrą nierównością) z prostego powodu – tablice w JavaScript są indeksowane od zera, i łatwo można odczytać ilość elementów w tablicy. Poza tym konsekwentne stosowanie jednej wersji zmniejsza prawdopodobieństwo że napiszemy pętlę która wykonuje się o jeden raz za mało lub za dużo, czyli uprości to uruchamianie własnych skryptów.

Każdy z trzech elementów znajdujących się wewnątrz okrągłych nawiasów pętli for może też być bardziej skomplikowanym wyrażeniem, np.:

for (n = wartosc_startowa(); czy_kontynuowac(n); n = nastepna_wartosc(n))
    zrob_cos_smiesnego(n);

Można także napisać pętlę która posiada kilka liczników (lub inaczej mówiąc wykonuje kilka instrukcji). Można to zrobić w częściach inicjalizacja i inkrementacja, poprzez rozdzielenie wyrażeń za pomocą przecinka. Aby zrobić coś takiego w części test_logiczny, należy użyć jednego zoperatorów logicznych.

for (n = 0, k = 1; n < 10; ++n, k += 3)
    document.write(n * k);

Pętle można też oczywiście zagnieżdżać – poniższy przykład po uruchomieniu wypisze wszystkie iloczyny liczb od 0 do 9:

for (n = 0; n < 10; ++n)
    for (k = 0; k < 10; ++k)
        document.write(n * k);

Powyżej napisałem że instrukcja for może wewnątrz nawiasów okrągłych posiadać trzy części: inicjalizacja, test_logiczny i inkrementacja. Nie są one jednak obowiązkowe – każdą z nich można pominąć. Należy jedynie pamiętać o pozostawieniu średników. Można nawet pominąć wszystkie, w efekcie czego powstanie pętla nieskończona jak poniżej. Osobiście odradzam tworzenie takich pętli. Ponieważ jednak nowoczesne przeglądarki posiadają zabezpieczenie przed długo działającymi skryptami i po jakimś czasie zadają pytanie czy przerwać skrypt, jeżeli to Cię bardzo ciekawi możesz go spróbować uruchomić.

for (;;)
    document.write("pętla nieskończona<br>");

W praktyce taką pętlę stosuje się rzadko. Jeżeli już, to razem z instrukcjami które pozwalają na jej przerwanie. Jedną z takich instrukcji jest break. Przy jej zastosowaniu można tak zapisać znaną już pętlę wypisującą cyfry od 0 do 9:

for (n = 0; ; ++n)
{
    if (n == 10)
        break;
    document.write(n);
}

Pozostałe instrukcje które powodują przerwanie pętli to return (powrót z funkcji) i throw (rzucenie wyjątku).

Kolejną instrukcją którą warto poznać jest continue – jej wykonanie powoduje że pętla natychmiast zaczyna wykonywać kolejną iterację (czyli wykonuje inkrementację, a następnie sprawdza warunek kontynuacji pętli). Można w ten sposób np. wyświetlić tylko cyfry parzyste:

for (n = 0; n < 10; ++n)
{
    if (n % 2 != 0)
        continue;
    document.write(n);
}

Oczywiście w praktyce lepiej jest inkrementować licznik o 2 – powyższy przykład umieściłem tylko dla zademonstrowania zastosowania komendy continue.

Pętla while

Pętla while posiada następującą składnię:

while ( test_logiczny )
    instrukcja;

lub

while ( test_logiczny )
{
    instrukcja1;
    instrukcja2;
    ...
}

Jest ona funkcjonalnym odpowiednikiem następującej wersji pętli for:

for ( ; test_logiczny;  )
    instrukcja;

Zachowuje się też identycznie jak podana wersja pętli for, czyli najpierw sprawdza czy test_logiczny jest prawdziwy i jeżeli tak to wykonuje instrukcje, po czym powtarza to ażtest_logiczny stanie się fałszywy.

Taką pętlę stosuje się zwykle gdy nie występuje jawnie inicjalizacja pętli i/lub jej inkrementacja, lub też są one bardziej złożone i przez to zapisanie ich w ramach instrukcji forbyłoby kłopotliwe.

Znany nam już przykład z wypisywaniem cyfr od 0 do 9 wygląda tak z zastosowaniem pętliwhile:

n = 0;
while (n < 10)
{
    document.write(n);
    ++n;
}

Wewnątrz pętli while można też stosować opisane wcześniej instrukcje break icontinue.

Pętla do/while

Pętla do/while jest bardzo podobna do omówionej wcześniej pętli while. Posiada ona następującą składnię:

do
    instrukcja;
while ( test_logiczny )

lub

do
{
    instrukcja1;
    instrukcja2;
    ...
}
while ( test_logiczny );

W działaniu te dwie pętle różnią się momentem kiedy sprawdzana jest prawdziwość warunkutest_logiczny – pętla while robi to przed wykonaniem instrukcji, natomiast pętla do/while robi to po. Oznacza to że gdy warunek będzie fałszywy już na początku pętli, to wtedy pętlawhile nie wykona się ani razu, ale pętla do/while wykona się jeden raz.

W poniższych przykładach liczba 10 zostanie wypisana tylko w drugim przypadku:

n = 10;
while (n < 10)
{
    document.write(n);
    ++n;
}

n = 10;
do
{
    document.write(n);
    ++n;
}
while (n < 10);

Wewnątrz pętli while można też stosować opisane wcześniej instrukcje break i continue.

Pętla for/in

Pętla ta służy do łatwego wyliczania kolejnych elementów tablic i właściwości obiektów. Posiada ona następującą składnię:

for (zmienna in tablica_lub_obiekt)
    instrukcja;

lub

for (zmienna in tablica_lub_obiekt)
{
    instrukcja1;
    instrukcja2;
    ...
}

zmiennajest to nazwa zmiennej która ma być użyta jako licznik tej pętlitablica_lub_obiekt  jest natomiast tablicą lub obiektem której/którego zawartość ma zostać wyliczona przez pętlę. Pętla ta w trakcie wykonywania się będzie do zmiennej zmienna przypisywać kolejne indeksy (klucze) tablicy. Przykładowo poniższy przykład wypisze kolejno cyfry od zero do trzy:

tablica = Array( 'a', 'b', 'c', 'd' );
for (n in tablica)
{
    document.write(n);
}

Aby wypisać to co znajduje się w tablicy pod każdym z indeksów (czyli kolejne literki), trzeba dokonać niewielkiej modyfikacji tego kodu:

tablica = Array( 'a', 'b', 'c', 'd' );
for (n in tablica)
{
    document.write(tablica[n]);
}

Oczywiście w tej pętli można też stosować instrukcje break i continue.

źródło: poradnik-webmastera.com

Bartosz Pszczoła