Pętla For w JavaScript

Pętla może wielokrotnie wykonywać blok kodu.

Pętla w JavaScript

Jeśli potrzebujesz uruchomić kod wiele razy z różnymi wartościami, pętla (loop) jest bardzo wygodna do użycia.

Zwykle napotykamy przykłady używania tablic:

Nie należy tak pisać:

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

Możesz pisać w ten sposób:

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

Spróbuj sam

Różne typy pętli

JavaScript obsługuje różne typy pętli:

  • for - wielokrotnie przechodzi przez blok kodu
  • for/in - przechodzi przez właściwości obiektu
  • while - powtarza kod blokowy, gdy warunek jest równy true
  • do/while - powtarza kod blokowy, gdy warunek jest równy true

Pętla for

Pętla for jest narzędziem, które często używasz, gdy chcesz utworzyć pętlę.

Gramatyka pętli for wygląda tak:

for (Wiersz 1; Wiersz 2; Wiersz 3) {
     Kod do wykonania
}

Wiersz 1 jest wykonywany przed rozpoczęciem pętli (bloku kodu).

Wiersz 2 definiuje warunek uruchamiania pętli (bloku kodu).

Wiersz 3 będzie wykonywany w każdym wykonaniu pętli (bloku kodu).

Przykład

for (i = 0; i < 5; i++) {
     text += "Liczba to " + i + "<br>";
}

Spróbuj sam

Z powyższego kodu możesz dowiedzieć się:

Wiersz 1 ustawia zmienną przed rozpoczęciem pętli (var i = 0).

Wiersz 2 definiuje warunek uruchamiania pętli (i musi być mniejsze niż 5).

Wiersz 3 zwiększa wartość w każdym wykonaniu bloku kodu (i++).

Wiersz 1

Zwykle używasz wiersza 1 do inicjalizacji zmiennych używanych w pętli (i = 0).

Ale nie zawsze jest tak, JavaScript nie zwraca uwagi. Wiersz 1 jest opcjonalny.

Możesz zainicjalizować wiele wartości w wierszu 1 (rozdzielonych przecinkami):

Przykład

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

Spróbuj sam

I możesz również pominąć wiersz 1 (na przykład ustawienie wartości przed rozpoczęciem pętli):

Przykład

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

Spróbuj sam

Wiersz 2

Zwykle wiersz 2 jest używany do obliczenia warunku zmiennej początkowej.

Ale nie zawsze jest tak, JavaScript nie zwraca uwagi. Wiersz 2 jest również opcjonalny.

Jeśli wiersz 2 zwraca true, pętla będzie ponawiana, jeśli zwraca false, pętla zakończy się.

Jeśli wiersz 2 jest pomijany, musi być dostarczony break. W przeciwnym razie pętla nigdy nie zakończy się. Przeczytaj więcej o break w następnym rozdziale.

Wiersz 3

Zwykle wiersz 3 zwiększa wartość zmiennej początkowej.

Ale nie zawsze jest tak, JavaScript nie zwraca uwagi. Wiersz 3 jest również opcjonalny.

Wiersz 3 może wykonać wszystko, na przykład ujemne inkrementowanie (i--), dodatnie inkrementowanie (i = i + 15), lub inne działanie.

Wyrażenie 3 może również być pominięte (np. gdy zwiększasz wartość w pętli):

Przykład

var i = 0;
var len = cars.length;
for (; i < len; ) { 
    text += cars[i] + "<br>";
      i++;
}

Spróbuj sam

Pętla For/In

JavaScript for/in Wyrażenie przechodzi przez atrybuty obiektu:

Przykład

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

Spróbuj sam

Pętla while

Nauczymy się pętli while oraz pętli do/while w następnym rozdziale.

książki pozaszkolne

Chcesz dowiedzieć się więcej o Wyrażenie for JavaScriptWięcej informacji na temat

Wyrażenia iteracyjne ECMAScript
Wyrażenia iteracyjne nazywane również pętlami. W tym rozdziale przedstawiamy cztery pętle iteracyjne oferowane przez ECMAScript.