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.