JavaScript dla pętli
Przykład
Zapętl (iteruj) blok kodu pięć razy:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Zapętl (iteruj) tablicę, aby zebrać nazwy samochodów:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- Pętla zaczyna się w pozycji 0 (
let i = 0). - Pętla automatycznie zwiększa
isię po każdym uruchomieniu. - Pętla działa tak długo, jak
i < cars.length.
Więcej przykładów poniżej.
Definicja i użycie
Instrukcja fordefiniuje blok kodu, który jest wykonywany, dopóki warunek jest
true.
Notatka
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.Zobacz też:
Składnia
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Parametry
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
Instrukcje pętli JavaScript
| Oświadczenie | Opis | |
| złamać | Wyrywa się z pętli | |
| kontyntynuj | Pomija wartość w pętli | |
| dopóki | Zapętla blok kodu, gdy warunek jest prawdziwy | |
| rób...gdy | Zapętla blok kodu raz, a następnie, gdy warunek jest prawdziwy | |
| dla | Zapętla blok kodu, gdy warunek jest prawdziwy | |
| dla...z | Zapętla wartości dowolnego iterowalnego | |
| dla w | Zapętla właściwości obiektu |
Więcej przykładów
Zainicjuj wiele wartości w pierwszym parametrze:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Pomiń pierwsze parametry (ustaw wartości przed rozpoczęciem pętli):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Użyj continue— Przeprowadź pętlę przez blok kodu, ale pomiń wartość 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Użyj break— zapętl blok kodu, ale wyjdź z pętli, gdy i == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Pomiń drugi parametr.
Użyj break, aby wyjść z pętli, w przeciwnym razie pętla nigdy się nie skończy, a przeglądarka ulegnie awarii:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Zapętlenie tablicy w kolejności malejącej (przyrost ujemny):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Pomiń ostatni parametr i zwiększ wartości wewnątrz pętli:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Zapętl NodeList i zmień kolor wszystkich elementów p na liście:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Zagnieżdżona pętla (pętla wewnątrz pętli):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Obsługa przeglądarki
for to funkcja ECMAScript1 (ES1).
ES1 (JavaScript 1997) jest w pełni obsługiwany we wszystkich przeglądarkach:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |