wtorek, 2024-02-20

JS: Pętla for

Pętla 'for' w JavaScript jest jedną z podstawowych konstrukcji służących do powtarzania określonego fragmentu kodu wielokrotnie. Jest szczególnie przydatna, kiedy z góry wiadomo, ile razy ma być wykonana dana operacja, jednak jest bardzo elastycznym narzędziem mającym zastosowanie w wielu sytuacjach.

Struktura pętli for

for (inicjalizacja; warunek; instrukcja) {
    // Kod do wykonania na każdym przebiegu pętli
}

1. Inicjalizacja – zwykle używana do ustawienia początkowej wartości zmiennej licznika.
2. Warunek – pętla będzie się wykonywać, dopóki ten warunek jest spełniony (prawdziwy).
3. Instrukcja – instrukcja wykonywana po każdym obrocie pętli, często jest to inkrementacja – zmienia wartość licznika po każdym przebiegu pętli (np. zwiększa o 1).

Kolejność wykonywania elementów pętli for

1. Inicjalizacja

Jest to pierwsza część pętli for i wykonuje się tylko raz, kiedy pętla jest po raz pierwszy uruchamiana. Służy do ustawienia początkowej wartości zmiennej licznika. Na przykład, w for (let i = 0; ...) inicjalizacja to let i = 0.

2. Warunek

Po inicjalizacji pętla sprawdza warunek. Jeśli warunek jest prawdziwy (true), kod wewnątrz pętli jest wykonany. Jeśli warunek jest fałszywy (false), pętla kończy działanie i program kontynuuje wykonanie kodu za pętlą for. Warunek jest sprawdzany przed każdym przebiegiem pętli.

3. Ciało pętli (kod wewnątrz pętli)

Jeśli warunek jest spełniony, wykonuje się kod wewnątrz pętli.

4. Instrukcja (np. inkrementacja)

Po wykonaniu kodu wewnątrz pętli wykonuje się instrukcja (zwykle inkrementacja lub dekrementacja). Na przykład, w for (...; ...; i++) instrukcja to i++. To przygotowuje pętlę do następnego przebiegu.

5. Powrót do warunku

Po wykonaniu instrukcji kontrola powraca do warunku. Jeśli warunek nadal jest prawdziwy, proces się powtarza (wykonywany jest kod wewnątrz pętli, a następnie instrukcja).

6. Zakończenie pętli

Gdy warunek staje się fałszywy, pętla jest zakończona, a wykonanie programu kontynuowane jest poza pętlą for.

Przykład:

for (let i = 0; i < 5; i++) { // Inicjalizacja: let i = 0; Warunek: i < 5; Instrukcja: i++
    console.log(i); // Ciało Pętli
}
// Kontynuacja po zakończeniu pętli, gdy i >= 5

W tym przypadku:

• inicjalizacja let i = 0 wykonuje się raz na początku.
• warunek i < 5 jest sprawdzany przed każdym przebiegiem pętli.
• console.log(i) jest kodem wykonywanym, gdy warunek jest spełniony.
• po console.log(i), wykonuje się instrukcja i++.
• następnie powrót do sprawdzenia warunku.

Wskazówki dla początkujących

• Bardzo ważne jest zrozumienie, jak działa zmienna licznika (zazwyczaj i).
• Upewnij się, że warunek pętli w końcu stanie się fałszywy, inaczej pętla nigdy się nie zakończy (nieskończona pętla).
• Zazwyczaj licznik jest zwiększany (i++), ale może być także zmniejszany (i--) lub modyfikowany inaczej, w zależności od potrzeb.

Przykłady

Podstawowa pętla

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

Ta pętla wyświetla liczby od 0 do 4.

Sumowanie liczb

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

Ta pętla sumuje liczby od 1 do 5.

Przechodzenie przez tablicę

let kolory = ["czerwony", "zielony", "niebieski"];
for (let i = 0; i < kolory.length; i++) {
    console.log(kolory[i]);
}

Ta pętla wyświetla każdy element z tablicy kolory.

Pętla zagnieżdżona

for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        console.log(i + ", " + j);
    }
}

Ta pętla demonstruje użycie pętli zagnieżdżonej, gdzie każda kombinacja i i j jest wyświetlana.

Przerwanie pętli

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // Przerywa pętlę, gdy i osiągnie wartość 5
    }
    console.log(i);
}

Ta pętla zatrzymuje się, gdy licznik osiągnie wartość 5.