Jakie pętle są dostępne w JavaScript?

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

 

Pętla typu while:

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

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

Fragment kodu będzie powtarzany dopóty, 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:

1
2
3
4
5
6
var x=1;
while (x<=5) {
    console.log("[przykładowy tekst] ");
    x++;
}

Powyższy skrypt wypisze wyrażenie 5 razy. Jeżeli w kodzie pętli nie zwiększalibyśmy x, wówczas pętla ta była by nieskończona (infinite loop), co zaowocowało by „zawieszeniem” strony (po pewnym czasie pojawił by się stosowny komunikat mówiący o źle działającym skrypcie).

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:

1
2
3
4
5
do {
    ...fragment kodu który będzie powtarzany...
}
while (wyrażenie)
1
2
3
4
5
6
7
var x=2
do {
    console.log("[przykładowy tekst] ");
    x++;
}
while (x<2) 

Pętla typu for

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

Ogólna konstrukcja pętli typu for ma wygląd:

1
2
3
4
5
for (zainicjowanie zmiennych; wyrażenie testujące; zwiększenie/zmniejszenie zmiennej)
{
    kod ktory zostanie wykonany pewną ilość razy
}
Przykładowo w poniższym kodzie rezalizujemy wcześniej postawione nam zadanie wypisania na ekran 5 razy określonego zdania:
1
2
3
4
5
6
7
8
for (var x=0; x<5; x++) {
    console.log("To jest przykładowe zdanie");
}
 
for (var x=0, j=5; x<j; x++) {
    console.log("To jest przykładowe zdanie");
}

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

1
2
3
4
5
for (var x=0; x<5; ) {
    console.log("To jest przykładowe zdanie"); //wypisze sie 3 razy
    x = x + 2;
}
1
2
3
4
5
var x = 3;
for (; x<5; x++) {
    console.log("To jest przykładowe zdanie"); //wypisze sie 2 razy
}
1
2
3
4
5
<script type="text/javascript">
for (var x=0; x<10; ) {
    console.log("Ta petla wykonała się " +(++x)+ " razy"); //wypisze sie 10 razy razy
}

Źródło:http://kursjs.pl/kurs/petle.html

Arkadiusz Odon