Pętle w JavaScript cz. 1

Nadszedł czas na pętle. Każdy programista używa w swoich aplikacjach pętli, dlatego przeczytaj uważnie dzisiejszy artykuł i mam nadzieję, że wyniesiesz z niego jak najwięcej. Z racji tego, że ten temat jest dość obszerny podzieliłem go na 2 osobne artykuły. Drugi artykuł pojawi się jutro.

Czym są pętle? Pętla może powtarzać daną czynność tyle razy ile chcesz. Załóżmy, że Twoim zadaniem jest wypisanie w konsoli 5 razy słowa JavaScript. Możesz to zrobić w taki sposób:

console.log('JavaScript');
console.log('JavaScript');
console.log('JavaScript');
console.log('JavaScript');
console.log('JavaScript');

Ale możesz, do tego zadania wykorzystać jedną z pętli. Zacznijmy od pętli for:

for (let x = 0; x < 5; x++) {
    console.log('JavaScript');
}

A co jeśli miałbyś wypisać słowo JavaScript 10 razy? Albo 100 razy? Który przykład jest łatwiejszy? :)

W JavaScript masz do dyspozycji dużo różnych pętli, ale każda z nich robi to samo, tzn. powtarza dany blok kodu przez tyle iteracji, ile założysz. W JavaScript możesz użyć pętli for, while, do while, for in oraz for of.

Zacznijmy od pętli for. Podstawowa struktura pętli for wygląda tak:

for (inicjalizacjaZmiennejSterujacej; warunek; zmianaWartosciZmiennej) {
    instrukcjaDoWykonania
}

Blok zawarty w "instrukcjiDoWykonania", wykonuje się tak długo, jak długo jest spełniony "warunek". "Warunek" zwraca wartość true lub false. Po każdej wykonanej "instrukcjiDoWykonania", następuje "zmianaWartosciZmiennej", najczęściej jest to po prostu inkrementacja zmiennej sterującej. Przyjrzyj się przykładowi:

for (let x = 0; x < 3; x++) {
    console.log('iteracja nr ' + x);
}
//iteracja nr 0
//iteracja nr 1
//iteracja nr 2

Na początku następuje inicjalizacja zmiennej x = 0. Sprawdzany jest warunek, czy x (czyli 0) jest mniejsze niż 3? Tak, więc wykonywany jest blok kod. W konsoli wypisuje się napis "iteracja nr 0" oraz następuje inkrementacja zmiennej x. Sprawdzany jest warunek, czy x (czyli 1) jest mniejsze od 3? Tak, więc wykonywany jest ponownie blok kodu. W konsoli wypisuje się napis "iteracja nr 1" oraz następuje inkrementacja zmiennej x. Sprawdzany jest warunek, czy x (czyli 2) jest mniejsze od 3? Tak, więc wykonywany jest ponownie blok kodu. W konsoli wypisuje się napis "iteracja nr 2" oraz następuje inkrementacja zmiennej x. Sprawdzany jest warunek, czy x (czyli 3) jest mniejsze od 3? Nie, następuje zakończenie pętli.

Może się również zdarzyć, że np. nie będziesz chciał inicjalizować zmiennej, oraz nie będziesz zmieniał żadnej wartości. Musisz pamiętać, że możesz pozostawić te miejsca pusta, ale pozostawiając średniki:

let x = 3;
for (; x > 0;) {
    console.log('iteracja nr ' + x);
    x--;
}

Jeżeli, wpiszesz zły warunek np. taki, który zawsze będzie prawdą, to pętla będzie się wykonywała nieskończenie wiele razy. W takim przypadku Twoja strona się "zawiesi":

let x = 3;
for (; x === 3;) {// pętla nieskończona
    console.log('iteracja nr ' + x);
}

Przejdźmy do kolejnej pętli, a mianowicie pętli while. Struktura:

while (warunek) {
    instrukcjaDoWykonania
}

Jak widzisz, w porównaniu do pętli for brakuje tutaj inicjalizacji zmiennej sterującej oraz zmieniania wartości tej zmiennej. Otóż w pętli while również musimy o to zadbać, ale tym razem nie są one częścią pętli. Zazwyczaj inicjalizacja jest przed pętlą, a zmiana wartości w bloku kodu do wykonania. Zobacz to na poniższym przykładzie:

let x = 0;
while (x < 3) {
    console.log('iteracja nr ' + x);
    x++;
}
//iteracja nr 0
//iteracja nr 1
//iteracja nr 2

Ostatnim typem pętli jaki chcę Ci pokazać w dzisiejszym artykule jest pętla do while. Pętla do while nie jest zbyt często używana, nie mniej jednak istnieje i trzeba o niej wspomnieć. Ważne, abyś zapamiętał czym różni się od pętli while, ale o tym za chwilę. Struktura pętli do while:

do {
    instrukcjaDoWykonania
} 
while(warunek)

Pętla do while od poznanych przez Ciebie dzisiaj pętli, różni się przede wszystkim tym, że zawsze wykona się przynajmniej raz. W pętli do while najpierw wykonuje się instrukcja, a dopiero później jest sprawdzany warunek.

let x = 0;
do {
    console.log('iteracja nr ' + x);
    x++;
}
while (x < 3)
//iteracja nr 0
//iteracja nr 1
//iteracja nr 2

Zobacz również, na poniższy przykład:

let x = 0;
do {
    console.log('warunek nie jest spełniony!');
}
while(x > 3)
//warunek nie jest spełniony!

Mimo, że warunek nie jest spełniony - pętla wykonała się 1 raz.

Przedstawiłem Ci 3 podstawowe pętle w JavaScript, dam Ci czas abyś mógł się z nimi na spokojnie zapoznać. A do kolejnej części artykułu o pętlach zapraszam już w kolejnym artykule, który pojawi się jutro.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Instrukcja warunkowa switch w JavaScript.
Następny artykuł - Pętle w JavaScript cz. 2.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły