Pętle - Kurs języka JavaScript

Stworzenie skryptu który ma po kolei wykonać kilka operacji jest proste, jak to przedstawiłem w poprzednich lekcjach kursu. Jednak nierzadko zdarza się iż pewną operację lub sekwencję operacji warto byłoby wykonać wielokrotnie, chociażby z tego względu aby zaoszczędzić sobie pisania. Owszem można skopiować dany fragment skryptu tyle razy ile potrzeba, ale do jest kiepskie rozwiązanie. Po pierwsze tak przygotowany skrypt jest trudny w utrzymaniu - wyobraź sobie tylko że skopiowałeś(aś) go 20 razy, i musisz w tych 20 miejscach nanieść jakąś poprawkę. Po drugie takie podejście nie zawsze jest możliwe - czasami trzeba powtarzać daną operację, za każdym razem sprawdzając czy określony warunek jest spełniony (np. wczytywać od użytkownika kolejne liczby aż do momentu aż wpisze on liczbę zero).

Do rozwiązania tego typu problemów stosuje się pętle. Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany warunek zostanie spełniony.

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 z operatoró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 - omówię ją dokładniej w lekcji poświęconej funkcjom) i throw (rzucenie wyjątku - omówię ją dokładniej w lekcji poświęconej wyjątkom).

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 for byłoby kłopotliwe.

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

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

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

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ść warunku test_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ętla while 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;
    ...
}

zmienna jest to nazwa zmiennej która ma być użyta jako licznik tej pętli. tablica_lub_obiekt jest natomiast tablicą lub obiektem której/którego zawartość ma zostać wyliczona przez pętlę.

Znany już przykład z wypisywaniem cyfr będzie tak wyglądał z zastosowaniem tej pętli:

tablica = Array( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 );
for (n in tablica)
{
    document.write(n);
}

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

Wykop tą stronę! >>>