Wyjaśnienie każdego typu pętli JavaScript: [With Codeblocks and Examples]

JavaScript to jeden z najpopularniejszych języków programowania, a jego opanowanie jest kluczowe dla aspirujących inżynierów oprogramowania. Znajomość pętli, ich rodzajów i działania stanowi fundament tej nauki.

Pętle w JavaScript umożliwiają wielokrotne wykonywanie fragmentów kodu w zależności od określonego warunku. Iteracja, czyli powtarzanie w kontekście pętli, trwa do momentu, aż warunek zakończenia zostanie spełniony. Pomyśl o tym, jak o serii ruchów w grze - wykonujesz określoną liczbę kroków w danym kierunku, aż osiągniesz cel.

Przykładowo, wykonanie siedmiu kroków na północ można zapisać w kodzie w następujący sposób:

for (let krok = 0; krok < 7; krok++) {

  // Wykona się 7 razy, z wartościami kroku od 0 do 6.

  console.log("Idę na północ o jeden krok");

}

Po uruchomieniu tego kodu, zobaczymy efekt w konsoli.

W jakim celu stosuje się pętle?

Powtarzanie zadań: Pętle pozwalają na wykonywanie zestawu instrukcji dopóki określone kryteria nie zostaną spełnione.
Przeglądanie obiektów i tablic: Dzięki pętlom można iterować przez właściwości obiektów lub elementy tablic, wykonując działania dla każdej z nich.
Filtrowanie danych: Pętle umożliwiają selekcję danych na podstawie określonych reguł.

W JavaScript istnieje kilka rodzajów pętli: for, while, do…while, for…in oraz for…of. Przyjrzyjmy się im bliżej, analizując ich działanie.

Pętla "for"

Pętla "for" powtarza instrukcje do momentu, aż warunek przestanie być spełniony. Składa się z trzech opcjonalnych wyrażeń, po których następuje blok kodu.

for (inicjalizacja; warunek; wyrażenie_końcowe) {

  // kod

}

Wyrażenie inicjalizujące jest wykonywane przed pierwszym przebiegiem pętli i służy zazwyczaj do inicjalizacji liczników.
Wyrażenie warunkowe jest sprawdzane przed każdym wykonaniem pętli. Kod w pętli jest wykonywany, jeśli warunek jest prawdziwy. Jeśli warunek jest fałszywy, pętla się kończy. Brak warunku domyślnie traktowany jest jako warunek prawdziwy.
Wyrażenie końcowe jest wykonywane po każdej iteracji i zazwyczaj służy do zwiększania wartości licznika.

Do grupowania instrukcji w bloku można użyć nawiasów klamrowych {}. Aby przerwać pętlę wcześniej, przed uzyskaniem warunku fałszywego, należy zastosować instrukcję "break".

Przykłady użycia pętli "for"

Iteracja za pomocą pętli "for":

for (let i = 0; i < 7; i++) {

  console.log(i);

}

W tym przypadku:

Zmienna "i" jest inicjalizowana wartością 0 (let i = 0).
Warunkiem jest, aby "i" było mniejsze niż 7 (i < 7).
Pętla będzie się powtarzać, dopóki wartość "i" nie będzie mniejsza niż 7.
Po każdej iteracji wartość "i" zostanie zwiększona o 1 (++i).

Użycie "break" do wcześniejszego zakończenia pętli:

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Liczba programistów: ' + i);

}

Kod iteruje od 1 do 10 (i < 11).
Zmienna "i" jest inicjalizowana wartością 1 (let i = 1).
Pętla trwa dopóki "i" jest mniejsze od 11.
Wartość "i" wzrasta o 2 po każdym przebiegu (i += 2).

Instrukcja "if" sprawdza, czy wartość "i" wynosi 9. Jeśli tak, to "break" przerywa działanie pętli.

(obraz)

Pętla "for...of"

Pętla "for...of" iteruje po obiektach iterowalnych, takich jak mapy, tablice, argumenty i zbiory. Wywołuje niestandardowy hak iteracji z instrukcjami wykonywanymi dla każdej wartości danego obiektu.

Podstawowa struktura pętli "for...of" to:

for (zmienna of obiekt)

  instrukcja

Przykłady użycia pętli "for...of"

Iteracja po tablicy za pomocą "for...of":

const jezykiFrontend = [ "HTML", "CSS", "JavaScript" , "React"];

for (let i of jezykiFrontend) {

  console.log(i);

}

W tym kodzie:

Definiujemy tablicę o nazwie "jezykiFrontend".
Tablica zawiera elementy: "HTML", "CSS", "JavaScript" i "React".
Pętla "for...of" iteruje po każdym elemencie w tablicy.
Zmienna "i" przyjmuje wartość kolejnych elementów podczas każdej iteracji, a następnie te wartości są wyświetlane w konsoli.

Iteracja po zbiorze za pomocą "for...of":

const s = new Set();

s.add(2);

s.add("szary");

for (let n of s) {

  console.log(n);

}

W tym fragmencie kodu:

Deklarujemy zmienną "s", do której przypisujemy nowy zbiór utworzony za pomocą konstruktora "Set()".
Do zbioru dodajemy dwa elementy za pomocą metody "add()".
Pętla "for...of" iteruje po elementach zbioru.
Pętla przypisuje wartość bieżącego elementu do "n" przed wykonaniem instrukcji "console.log(n)".

Iteracja po mapie za pomocą "for...of":

const m = new Map();

m.set(4, "królik");

m.set(6, "małpa");

m.set(8, "słoń");

m.set(10, "lew");

m.set(12, "leopard");

for (let n of m) {

  console.log(n);

}

W tym bloku kodu:

Używamy konstruktora "Map()" do stworzenia nowego obiektu "Map".
Deklarujemy zmienną "m".
Dodajemy pięć par klucz-wartość za pomocą metody ".set()".
Pętla "for...of" iteruje po elementach obiektu "Map" o nazwie "m".

Pętla "for...in"

Pętla "for...in" służy do iterowania po właściwościach obiektu. Podstawowa struktura pętli "for...in" wygląda następująco:

for (właściwość in obiekt) {

  // kod

}

Pętlę "for...in" można wykorzystać do iterowania po tablicach i obiektach przypominających tablice.

const listaZakupow = { jarmuz: 4, pomidory: 2, kapusta: 0, salata: 6, dynia: 5 };

for (const warzywo in listaZakupow) {

  console.log(warzywo);

}

W tym przykładzie:

Tworzymy obiekt JavaScript o nazwie "listaZakupow".
Używamy pętli "for" do iterowania po każdej właściwości "listaZakupow" za pomocą operatora "in".
W każdej iteracji pętla przypisuje bieżącą nazwę właściwości z obiektu "listaZakupow".

Pętla "while"

Pętla "while" sprawdza warunek, a jeśli jest on prawdziwy, wykonuje blok kodu. Jeśli warunek jest fałszywy, pętla kończy działanie, a kod w jej bloku nie jest wykonywany.

Podstawowa struktura pętli "while" to:

while (warunek)

    instrukcja

Warunek musi zostać sprawdzony przed wykonaniem instrukcji w pętli. Można wykonać kilka instrukcji, używając nawiasów klamrowych {} lub instrukcji blokowych.

Przykład użycia pętli "while"

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

W tym kodzie:

Zmienna "n" jest inicjalizowana wartością zero (let n = 0).
Pętla będzie wykonywana, dopóki wartość "n" będzie mniejsza niż 9 (n < 9).
Wartość "n" jest wyświetlana w konsoli i zwiększana o 1 po każdej iteracji (n++).
Kod przestanie działać, gdy "n" osiągnie wartość 9.

Pętla "do...while"

Pętla "do...while" wykonuje iterację, dopóki warunek nie zostanie oceniony jako fałszywy.

Ogólna struktura instrukcji "do...while" jest następująca:

do

  instrukcja

while (warunek);

Instrukcja jest wykonywana raz, a następnie sprawdzany jest warunek. Instrukcja zostanie ponownie wykonana, jeśli warunek jest prawdziwy. W przeciwnym razie wykonywanie pętli zostanie zatrzymane, a sterowanie przejdzie do instrukcji następującej po "do...while". Kod w pętli "do...while" gwarantuje wykonanie co najmniej raz, nawet jeśli warunek początkowo ma wartość false.

Przykład użycia pętli "do...while"

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

W tym kodzie:

Tworzymy zmienną "n" i ustawiamy jej wartość początkową na 0 (let n = 0).
Zmienna "n" wchodzi do pętli "do...while", gdzie jej wartość jest zwiększana o 1 po każdej iteracji (n += 1).
Wartość "n" jest wyświetlana w konsoli.
Pętla będzie wykonywana, dopóki wartość "n" będzie mniejsza niż 7 (n < 7).

Po uruchomieniu tego kodu, konsola wyświetli wartości "n" od 1 do 7, ponieważ pętla wykona się 7 razy.

Zagnieżdżone pętle

Zagnieżdżona pętla to sytuacja, w której jedna pętla znajduje się wewnątrz innej. Na przykład, możemy mieć pętlę "for" zagnieżdżoną w innej pętli "for".

for (let zewnętrzna = 0; zewnętrzna < 5; zewnętrzna += 2) {

  for (let wewnętrzna = 0; wewnętrzna < 6; wewnętrzna += 2) {

    console.log(`${zewnętrzna}-${wewnętrzna}`);

  }

}

Istnieją dwie zmienne: "zewnętrzna" i "wewnętrzna", obie zainicjowane wartością zero.
Obie zmienne są zwiększane o 2 po każdej iteracji.
Zarówno pętla zewnętrzna, jak i wewnętrzna wykonują po trzy iteracje.

Instrukcje sterujące pętlą

Instrukcje sterujące pętlą, zwane też "instrukcjami skoku", przerywają normalny przebieg programu. Przykłady to instrukcje "break" i "continue".

Instrukcja "break"

Instrukcja "break" natychmiast przerywa działanie pętli, nawet jeśli warunek nie został jeszcze spełniony.

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("Pętla zatrzymuje się tutaj. Osiągnięto instrukcję 'break'");

    break;

  }

  console.log(n);

}

Kod po wykonaniu wyświetli:

Instrukcja "continue"

Instrukcja "continue" służy do pominięcia określonego bloku kodu i przejścia do następnej iteracji pętli.

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

Kod po wykonaniu wyświetli:

Podsumowanie

Powyżej przedstawiono najczęściej spotykane pętle w JavaScript oraz jego frameworkach i bibliotekach. Jak podkreślono, każdy typ pętli ma swoje specyficzne zastosowanie i zachowanie. Wybranie niewłaściwego typu pętli może prowadzić do błędów i nieoczekiwanego działania kodu.

W przypadku korzystania z frameworka lub biblioteki JavaScript, zawsze należy dokładnie sprawdzać jej dokumentację i wykorzystywać wbudowane w nią pętle.