JavaScript dla pętli
Pętle mogą wykonać blok kodu wiele razy.
Pętle JavaScript
Pętle są przydatne, jeśli chcesz uruchamiać ten sam kod w kółko, za każdym razem z inną wartością.
Często dzieje się tak podczas pracy z tablicami:
Zamiast 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ć:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Różne rodzaje pętli
JavaScript obsługuje różne rodzaje pętli:
for- wielokrotnie przechodzi przez blok kodufor/in- pętle przez właściwości obiektufor/of- pętle przez wartości iterowalnego obiektuwhile- pętle przez blok kodu, gdy określony warunek jest spełnionydo/while- zapętla się również przez blok kodu, gdy określony warunek jest prawdziwy
Pętla for
Pętla forma następującą składnię:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
Instrukcja 1 jest wykonywana (jednorazowo) przed wykonaniem bloku kodu.
Instrukcja 2 określa warunek wykonania bloku kodu.
Instrukcja 3 jest wykonywana (za każdym razem) po wykonaniu bloku kodu.
Przykład
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Z powyższego przykładu możesz przeczytać:
Instrukcja 1 ustawia zmienną przed rozpoczęciem pętli (niech i = 0).
Instrukcja 2 definiuje warunek uruchomienia pętli (i musi być mniejsze niż 5).
Instrukcja 3 zwiększa wartość (i++) za każdym razem, gdy blok kodu w pętli został wykonany.
Stwierdzenie 1
Normalnie użyjesz instrukcji 1 do zainicjowania zmiennej używanej w pętli (niech i = 0).
Nie zawsze tak jest, JavaScript to nie obchodzi. Stwierdzenie 1 jest opcjonalne.
W instrukcji 1 możesz zainicjować wiele wartości (oddzielonych przecinkiem):
Przykład
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
I możesz pominąć instrukcję 1 (jak wtedy, gdy twoje wartości są ustawione przed rozpoczęciem pętli):
Przykład
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Stwierdzenie 2
Często stwierdzenie 2 służy do oceny stanu zmiennej początkowej.
Nie zawsze tak jest, JavaScript to nie obchodzi. Stwierdzenie 2 jest również opcjonalne.
Jeśli instrukcja 2 zwróci true, pętla zacznie się od nowa, jeśli zwróci false, pętla się zakończy.
Jeśli pominiesz instrukcję 2, musisz zapewnić przerwę wewnątrz pętli. W przeciwnym razie pętla nigdy się nie skończy. Spowoduje to awarię przeglądarki. Przeczytaj o przerwach w kolejnym rozdziale tego samouczka.
Stwierdzenie 3
Często instrukcja 3 zwiększa wartość zmiennej początkowej.
Nie zawsze tak jest, JavaScript to nie obchodzi, a instrukcja 3 jest opcjonalna.
Zdanie 3 może zrobić cokolwiek, na przykład przyrost ujemny (i--), przyrost dodatni (i = i + 15) lub cokolwiek innego.
Stwierdzenie 3 można również pominąć (jak wtedy, gdy zwiększasz swoje wartości w pętli):
Przykład
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Zakres pętli
Korzystanie varw pętli:
Przykład
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
Korzystanie letw pętli:
Przykład
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
W pierwszym przykładzie, używając var, zmienna zadeklarowana w pętli ponownie deklaruje zmienną poza pętlą.
W drugim przykładzie, używając let, zmienna zadeklarowana w pętli nie powoduje ponownej deklaracji zmiennej poza pętlą.
Gdy letjest używany do deklarowania zmiennej i w pętli, zmienna i będzie widoczna tylko w pętli.
Pętle For/O i For/In
Pętla for/ini for/ofpętla są wyjaśnione w następnym rozdziale.
Podczas gdy pętle
Pętla whilei te do/whilesą wyjaśnione w następnych rozdziałach.