Pętle mogą wykonywać blok kodu kilka razy.
JavaScript Pętle
Pętle są przydatne, jeśli chcesz, aby ponownie uruchomić ten sam kod w kółko, za każdym razem z inną wartością.
Często jest to przypadek 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 (i = 0; i < cars.length; i++) {
text += cars[i] +
"<br>";
} Spróbuj sam " Różne rodzaje pętli
JavaScript obsługuje różne rodzaje pętli:
- for - pętle przez blok kodu kilka razy
- for/in - pętle przez właściwości obiektu
- while - pętle przez blok kodu, podczas gdy określony warunek jest spełniony
- do/while - również pętle przez blok kodu, podczas gdy określony warunek jest spełniony
For Loop
for pętli jest często narzędziem można użyć, gdy chcesz utworzyć pętlę.
for pętli ma następującą składnię:
for (statement
1; statement 2; statement 3) {
code block to be executed
}
Oświadczenie 1 jest wykonywana przed rozpoczęciem pętli (blok kodu).
Oświadczenie 2 określa warunki do prowadzenia pętle (blok kodu).
Oświadczenie 3 jest wykonywana za każdym razem po pętli (blok kodu) została wykonana.
Z powyższego przykładu, można przeczytać:
Oświadczenie 1 ustawia zmienną przed rozpoczęciem pętli (var i = 0) .
Oświadczenie 2 definiuje warunek pętli do uruchomienia (muszę być mniejsza niż 5).
Oświadczenie 3 zwiększa wartość (i++) za każdym razem, gdy blok kodu w pętli została wykonana.
Oświadczenie 1
Zazwyczaj użyjesz oświadczenie 1 zainicjować zmienną używaną w pętli (i = 0) .
Nie zawsze jest to przypadek, JavaScript nie obchodzi. Oświadczenie 1 jest opcjonalna.
Można zainicjować wiele wartości w rachunku 1 (oddzielone przecinkiem):
Przykład
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
} Spróbuj sam " I można pominąć oświadczenie 1 (jak wtedy, gdy twoje wartości są ustawione przed rozpoczęciem pętla)
Przykład
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
} Spróbuj sam " Oświadczenie 2
Często stwierdzenie 2 służy do oceny stanu zmiennej początkowej.
Nie zawsze jest to przypadek, JavaScript nie obchodzi. Oświadczenie 2 jest również opcjonalne.
If 2 zwraca wartość true, pętla będzie zacząć od nowa, jeśli zwróci false, pętla się zakończy.
Jeśli pominąć oświadczenie 2, należy zapewnić break wewnątrz pętli. W przeciwnym wypadku pętla nigdy się nie skończy. Spowoduje to awarię przeglądarki. Przeczytaj o przerwach w późniejszym rozdziale niniejszego poradnika.
Oświadczenie 3
Często stwierdzenie 3 zwiększa zmienną początkowego.
To nie zawsze tak jest, JavaScript nie obchodzi, oraz oświadczenie 3 jest opcjonalne.
Oświadczenie 3 może zrobić coś takiego ujemnego przyrostu (i--) , dodatni przyrost (i = i + 15) , lub cokolwiek innego.
Oświadczenie 3 można również pominąć (jak wtedy, gdy zwiększamy swoje wartości wewnątrz pętli):
Przykład
var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
} Spróbuj sam " For/In pętli
JavaScript for/in oświadczenia pętle przez właściwości obiektu:
Przykład
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
} Spróbuj sam " While Loop
while pętli i do/while Pętla zostanie wyjaśnione w następnym rozdziale.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6»