Pętla w JavaScript oraz w każdym innym języku programowania jest sekwencją instrukcji powtarzaną dopóki określony warunek jest spełniony. Pętla zatrzyma się dopiero wtedy, gdy warunek przestanie być spełniony.

Zamiast wywoływać każdą linijkę kodu osobno np. aby wyświetlić elementy tablicy:

var zabawki = ['samochód', 'piłka', 'lalka'];
console.log(zabawki[0]);
console.log(zabawki[1]);
console.log(zabawki[2]);

można osiągnąć ten sam efekt za pomocą pętli:

var zabawki = ['samochód', 'piłka', 'lalka'];
for (var index = 0; index < zabawki.length; index++) {
    console.log(zabawki[index]);
} 

JavaScript zapewnia kilka rodzajów pętli. Mimo, że wszystkie pętle zapewniają podobną podstawową funkcjonalność, różnią się między sobą składnią i momentem sprawdzania warunku decydującego o dalszym wywoływaniu pętli.

  • pętla for
  • pętla for ... of
  • pętla for ... in
  • pętla while
  • pętla do ... while

Pętla for

Pętla for powtarza określone instrukcje dopóki podany warunek jest spełniony a jej struktura umożliwia zdefiniowanie inicjalizacji, warunku i kroku wykonywanego po każdej iteracji w jednej linijce kodu.

Pętla for w JavaScript ma następującą składnie:

for (inicjalizacja; warunek; wyrazeniePrzyrostowe) {
     // kod, który zostanie wykonany w każdej iteracji
 } 

Pierwszy parametr, inicjalizacja, jest wyrażeniem, które jest wykonywane przed uruchomieniem pętli. To wyrażenie zwykle inicjuje jedną lub więcej zmiennych będących licznikami pętli.

Drugi parametr określa warunek uruchomienia pętli. Zwykle to wyrażenie służy do sprawdzenia stanu zmiennej licznika. Jeśli warunek jest spełniony, pętla wykona się ponownie. Jeśli warunek nie jest spełniony, pętla zakończy swoje działanie.

Ostatni parametr określa wyrażenie, które jest wykonywane po każdym wykonaniu pętli. Często to wyrażenie służy do modyfikacji zmiennej licznika.

for (var i = 0; i < 10; i++) {
    console.log(i);
}

W powyższym przykładzie pętla wykona się 10 razy i wyświetli liczby od 0 do 9.

Każdy z parametrów jest opcjonalny i może zostać pominięty. Pomijając jednak parametry musimy pamiętać o średnikach.

Pierwszy parametr, odpowiedzialny za inicjalizację licznika, może zostać pominięty jeśli licznik zostanie zainicjalizowany przed wywołaniem pętli.

var i = 0;
for (; i < 10; i++) {
    console.log(i);
}

Pomijając drugi parametr pętli for określający warunek, musimy zadbać o to by pętla zakończyła swoje działanie np. poprzez użycie słowa kluczowego break. W przeciwnym razie pętla nigdy się nie skończy, co spowoduje zawieszenie przeglądarki.

for (var i = 0;; i++) {
    if (i === 10) {
        break;
    }
    console.log(i);
}

Pomijając trzeci parametr pętli for, odpowiedzialny za modyfikację licznika musimy zadbać o to, aby licznik był modyfikowany wewnątrz pętli for. W przeciwnym wypadku pętla będzie wykonywać w kółko ten sam kod i nigdy się nie skończy.

for (var i = 0;i < 5;) {
    console.log(i);
    i++;
}

Dodatkowo nie jesteśmy ograniczeni do używania tylko po jednym wyrażeniu na każdy parametr pętli for. Musimy jednak pamiętać o tym, by wyrażenia były oddzielone przecinkami.

for (var i = 0, j = 5; i <= 5, j >= 0; i++, j--) {
    console.log(i, j);
}

powyższy kod zwróci poniższy wynik:

0 5
1 4
2 3
3 2
4 1
5 0

Pętle for w JavaScript mogą być również zagnieżdżone:

var products = [
    [ 'necklace', 'ring', 'earrings'],
    ['bag', 'belt', 'backpack']
];
for (var i = 0; i < products.length; i++) {
    for(var j = 0; j < products[i].length; j++) {
        console.log(products[i][j]);
    }
}

Pętla for … in

Innym rodzajem pętli for w JavaScript jest pętla for ... in. Pętla for ... in pozwala iterować przez właściwości obiektu.

Pętla for ... in ma następującą składnię:

for (zmienna in obiekt) {
    // kod, który zostanie wywołany
}

Używając pętli for ... in deklarujemy zmienną, do której będą przypisywane poszczególne właściwości obiektu przy każdym wywołaniu pętli. Zmienna może być zadeklarowana za pomocą słowa kluczowego let, const lub var. Pętla jest wywoływana do momentu przetworzenia wszystkich właściwości obiektu.

var gracz = {pseudonim: 'draz', wiek: 25};
 for (var wlasciwosc in gracz) {
     console.log(wlasciwosc);
 }

Powyższy kod zwróci następujący wynik:

pseudonim
wiek

W każdej iteracji jedna z właściwości obiektu gracz jest przypisywana do zmiennej o nazwie wlasciwosc a pętla jest wywoływana do momentu przetworzenia wszystkich właściwości obiektu.

Pętla for ... in działa również z tablicami:

var tablica = [5,10,15];
for (var i in tablica) {
    console.log(i);
}

Powyższy kod zwróci wszystkie indeksy tablicy:

0
1
2

Pętla for … of

JavaScript udostępnia jeszcze inny rodzaj pętli forfor ... of. Pętla for ... of pozwala iterować przez wartości obiektów iterowalnych takich jak tablice, mapy, ciągi znaków, obiekty podobne do tablicy (np. obiekt arguments, NodeList) i inne.

Pętla for ... of ma następującą składnię:

for (zmienna of iterowalny) {
    // kod, który zostanie wywołany
}

Używając pętli for ... of deklarujemy zmienną, do której będą przypisywane wartości każdej właściwości obiektu iteracyjnego przy każdym wywołaniu pętli. Pętla jest wywoływana do momentu przetworzenia wszystkich wartości obiektu iteracyjnego.

Przykład użycia pętli for ... of do iterowania po tablicy:

var cars = ['bmw', 'ford', 'audi'];
for (var el of cars) {
    console.log(el);
}

Powyższy kod zwróci wszystkie elementy tablicy:

bmw
ford
audi

Przykład użycia pętli for ... of do iterowania po ciągu znaków:

var str = 'JS';
for (var i of str) {
    console.log(i);
}

Powyższy kod zwróci pojedyncze litery z podanego ciągu znaków:

J
S

Przykład użycia pętli for ... of do iterowania po obiekcie arguments:

function foo() {
    for (var arg of arguments) {
        console.log(arg);
    }
}
foo(1,2,3);

Powyższy kod zwróci następujący wynik:

1
2
3

Pętla for … in vs for … of

Zarówno pętla for ... in i pętla for ... of pozwalają iterować. Główna różnica między nimi polega na tym przez co iterują.

Pętla for ... in iteruje przez właściwości obiektu, natomiast pętla for ... of iteruje przez wartości obiektu iteracyjnego.

var tablica = [5,10,15];
for (var wlasciwosc in tablica) {
    console.log(wlasciwosc);
}

powyższy kod zwróci następujący wynik:

0
1
2

a:

var tablica = [5,10,15];
for (var wartosc of tablica) {
     console.log(wartosc);
}

zwróci poniższy wynik:

5
10
15

Pętla while

Pętla while rozpoczyna swoje działanie od sprawdzenia warunku. Jeśli warunek jest prawdziwy, wówczas wykonywany jest kod należący do pętli while. Zazwyczaj kod znajdujący się wewnątrz pętli while zawiera instrukcje aktualizujące zmienne przetwarzane w kolejnej iteracji. Jeśli warunek nie jest spełniony wykonywany jest kod znajdujący się poza pętlą while.

while(warunek) {
    // kod, który zostanie wykonany gdy warunek zostanie spełniony
}

Pętla while rozpoczyna się od sprawdzenie warunku. Jeśli warunek zostanie spełniony, zostanie wykonana instrukcja pętli while, a następnie ponowne sprawdzenie warunku. Gdy warunek nie zostanie spełniony, pętla skończy swoje działanie.

var dni = ['Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota', 'Niedziela'];
var index = 0;
while (index < dni.length) {
    console.log(dni[index]);
    index++;
}

W powyższym przykładzie w każdej iteracji pętli while, wyświetlamy poszczególne elementy tablicy dni, a także podbijamy zmienną index o 1 do momentu aż index będzie większy od rozmiaru tablicy. Sprawdzenie warunku odbywa się przed każdą iteracją pętli.

Pętla do … while

Pętla do ... while jest podobna do pętli while z tą różnicą, że sprawdza warunek dopiero po wykonaniu instrukcji.

do {
    // kod, który zostanie wykonany
} while(warunek);

Pętla do ... while rozpoczyna się od wykonania instrukcji pętli. Za pierwszym razem nie jest sprawdzany żaden warunek. Dopiero po wykonaniu instrukcji i aktualizacji wartości zmiennej sprawdzany jest warunek. Jeśli warunek zostanie spełniony, rozpocznie się kolejna iteracja pętli. Gdy warunek nie zostanie spełniony, pętla kończy swoje działanie.

var dni = ['Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota', 'Niedziela'];
var index = 0;
do {
    console.log(dni[index]);
    index++;
} while (index < dni.length);

W powyższym przykładzie w każdej iteracji pętli do ... while, wyświetlamy poszczególne elementy tablicy dni, a także podbijamy zmienną index o 1 do momentu aż index będzie większy od rozmiaru tablicy. Sprawdzenie warunku odbywa się po każdej iteracji pętli.

Słowo kluczowe break i continue

Podczas używania pętli w JavaScript możemy używać słowa kluczowe break i słowa kluczowego continue.

Słowo kluczowe break pozwala zatrzymać wykonywanie pętli.

W poniższym przykładzie słowo kluczowe break zostało użyte do przerwania pętli do ... while, gdy suma elementów z tablicy przekroczy liczbę 10:

var suma = 0;
var i = 0;
var arr = [2,6,10,15];
do {
    suma += arr[i];
    if (suma > 10) {
        break;
    };
    i++;
} while (i < arr.length);
console.log(suma); // 18

Słowo kluczowe continue pozwala pominąć konkretną iterację w pętli i przeskoczyć do kolejnej iteracji.

W poniższym kodzie słowo kluczowe continue zostało użyte do wyświetlenia jedynie liczb nieparzystych:

var i = 0;
do {
    i++;
    if (i % 2 == 0) {
        continue;
    }
    console.log(i);
} while (i < 5);

Powyższy kod zwróci następujący wynik:

1
3
5

Nieskończona pętla

Jednym z najczęstszych błędów podczas implementacji wszelkiego rodzaju pętli jest ryzyko, że pętla nie zakończy swojego działania. Dzieje się tak, gdy z jakiegoś powodu warunek się nie powiedzie.

for (;;) {
}

Wywołanie takiego kodu spowoduje zawieszenie się przeglądarki.

Podsumowanie

  • pętla w JavaScript jest sekwencją instrukcji powtarzaną dopóki określony warunek jest spełniony.
  • JavaScript udostępnia kilka rodzajów pętli
    • pętla for
    • pętla for ... of
    • pętla for ... in
    • pętla while
    • pętla do ... while
  • struktura pętli for umożliwia zdefiniowanie inicjalizacji, warunku i modyfikację licznika w jednej linijce kodu
  • każdy z parametrów pętli for jest opcjonalny i może zostać pominięty
  • możemy używać więcej niż jedno wyrażenie na każdy parametr pętli for
  • pętla for ... in pozwala pozwala iterować przez właściwości obiektu
  • pętla for ... of pozwala iterować przez wartości obiektów iterowalnych (tablice, mapy, ciągi znaków, itd.)
  • pętla while rozpoczyna swoje działanie od sprawdzenia warunku
  • pętla do ... while sprawdza warunek dopiero po wykonaniu instrukcji
  • słowo kluczowe break pozwala zatrzymać wykonywanie pętli
  • słowo kluczowe continue pozwala pominąć konkretną iterację w pętli

0 Comments

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *