Pętle w JavaScripcie: for, forEach, while i do-while

Pętle w JavaScripcie pozwalają wykonać ten sam kod wiele razy z rzędu. Przydają się, kiedy trzeba przejść przez tablicę albo powtórzyć konkretne zadanie określoną liczbę razy. W tym rozdziale przyjrzymy się pętlom for i while, najczęściej używanym w JavaScripcie.

Pętla for w JavaScripcie

Pętla for w JavaScripcie wykonuje kod z góry ustaloną liczbę razy. Oto przykład jej użycia:

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

Pętla for startuje ze zmienną „i” równą 0. Warunek „i < 5” sprawdza, czy „i” jest mniejsze od 5. Jeśli warunek jest prawdziwy, kod w klamrach zostanie wykonany, a zmienna „i” zwiększona o 1. Pętla będzie się kręcić, dopóki warunek „i < 5” nie stanie się fałszywy.

Efektem tego kodu jest wypisanie w konsoli liczb od 0 do 4.

Pętli for możesz też użyć do przejścia przez tablicę:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

for (let i = 0; i < tableau.length; i++) {
  console.log(tableau[i]);
}

Pętla for przechodzi przez tablicę „tableau”, korzystając z właściwości „length”, żeby ustalić liczbę elementów do obejścia. Przy każdej iteracji wartość bieżącego elementu trafia do konsoli.

Możesz też użyć instrukcji „break”, żeby wyjść z pętli for przed czasem:

for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3) {
    break;
  }
}

Instrukcja continue w pętli for

Jest jeszcze instrukcja „continue”, która przechodzi do kolejnej iteracji bieżącej pętli, pomijając resztę kodu z iteracji aktualnej. Oto przykład użycia instrukcji „continue” w pętli for:

for (let i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

W tym przykładzie pętla for przechodzi przez liczby od 0 do 9. Instrukcja „continue” sprawdza, czy wartość „i” jest nieparzysta. Jeśli tak, przechodzi do kolejnej iteracji, nie wykonując reszty kodu bieżącej iteracji.

Efektem tego kodu jest wypisanie w konsoli liczb parzystych od 0 do 8.

Pętla forEach w JavaScripcie

Pętla forEach w JavaScripcie przechodzi przez elementy tablicy albo obiektu. Oto przykład użycia pętli forEach z tablicą:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

tableau.forEach(function(element) {
  console.log(element);
});

Pętla forEach przechodzi przez tablicę „tableau” i dla każdego elementu wykonuje przekazaną w argumencie funkcję anonimową. Wartość bieżącego elementu jest dostępna wewnątrz tej funkcji przez zmienną „element”.

Efektem tego kodu jest wypisanie w konsoli każdego elementu tablicy.

Pętli forEach możesz też użyć z obiektami, przez metodę „Object.entries()”:

let objet = {
  un: 'valeur1',
  deux: 'valeur2',
  trois: 'valeur3'
};

Object.entries(objet).forEach(function([clé, valeur]) {
  console.log(clé + ': ' + valeur);
});

Metoda „Object.entries()” zwraca tablicę par [klucz, wartość] dla każdej właściwości obiektu „objet”. Pętla forEach przechodzi przez tę tablicę i dla każdej pary wykonuje przekazaną funkcję anonimową. Klucz i wartość są dostępne wewnątrz funkcji przez zmienne „clé” i „valeur”.

Efektem tego kodu jest wypisanie w konsoli każdej pary w postaci „klucz: wartość”.

Pętla while w JavaScripcie

Pętla while w JavaScripcie wykonuje kod tak długo, jak podany warunek jest prawdziwy. Oto przykład jej użycia:

let a = 0;

while (a < 5) {
  console.log(a);
  a++;
}

Pętla while startuje z warunkiem „a < 5”. Dopóki jest on prawdziwy, kod w klamrach zostanie wykonany, a zmienna „a” zwiększona o 1. Pętla będzie się kręcić, dopóki warunek „a < 5” nie stanie się fałszywy.

Efektem tego kodu jest wypisanie w konsoli liczb od 0 do 4.

Możesz też sięgnąć po pętlę do-while, która najpierw wykonuje kod w klamrach, a dopiero potem sprawdza warunek:

let a = 0;

do {
  console.log(a);
  a++;
} while (a < 5);

W tym kodzie pętla do-while wykona się co najmniej raz, bo warunek jest sprawdzany po pierwszym przejściu przez kod w klamrach. Efektem również będzie wypisanie w konsoli liczb od 0 do 4.

W pętli while musisz zawrzeć instrukcję, która zwiększa albo zmniejsza zmienną użytą w warunku, inaczej dostaniesz pętlę nieskończoną. Bez niej warunek pozostanie na zawsze prawdziwy, a pętla będzie się kręcić bez końca.

Innymi słowy, wartość tej zmiennej musi się zmieniać przy każdej iteracji. Dzięki temu warunek w pewnym momencie stanie się fałszywy i pętla się zakończy.

Pętlę można też przerwać, zanim warunek stanie się fałszywy, instrukcją „break”. „break” natychmiast przerywa wykonanie pętli i przechodzi do kolejnej instrukcji po niej. Oto przykład użycia instrukcji „break” w pętli while:

let a = 0;

while (true) {
  console.log(a);
  a++;
  if (a >= 5) {
    break;
  }
}

Pętla while startuje z warunkiem „true”, czyli będzie się kręcić tak długo, jak warunek jest prawdziwy. Wewnątrz niej stoi jednak instrukcja „break”, wykonywana, gdy wartość „a” osiągnie lub przekroczy 5. To przerywa pętlę i przenosi wykonanie do kolejnej instrukcji po niej.

Efektem tego kodu jest wypisanie w konsoli liczb od 0 do 4.

Podsumowanie

Przeszliśmy przez pętle dostępne w JavaScripcie: for, forEach i while. Zobaczyliśmy, jak każdej z nich użyć do wielokrotnego wykonania kodu i jak sterować ich przebiegiem instrukcjami „break” i „continue”.