Złożenie for w JavaScript

Definicja i użycie

Złożenie for tworzy pętlę, która będzie wykonywana, dopóki warunek jest prawdziwy.

Pętla będzie działać, dopóki warunek jest prawdziwy. Zatrzyma się tylko, gdy warunek staje się fałszywy.

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

  • for - wielokrotne pętle kodu
  • for/in - przechodzenie po atrybutach obiektu
  • for/of - przechodzi przez wartości obiektu iterowalnego
  • while - powtarza blok kodu, gdy warunek jest prawdziwy
  • do/while - wywołuje jeden blok kodu, a następnie powtarza pętlę, gdy warunek jest prawdziwy

Wskazówka:Użyj instrukcji break, aby wyjść z pętli, użyj instrukcji continue, aby pominąć pewną wartość w pętli.

przykład

Powtarzaj blok pętli pięć razy:

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

spróbuj sam

Poniżej znajdują się więcej przykładów TIY.

Gramatyka

for (statement 1; statement 2; statement 3) {
  blok kodu do wykonania
}

Wartość parametru

Parametr Opis
statement1

Opcjonalny. Wykonuje się przed rozpoczęciem pętli (bloku kodu). Zwykle używa się tego zdania do inicjalizacji zmiennej licznika. Aby zainicjalizować wiele wartości, oddziel je przecinkami.

Komentarz:Ten parametr można pominąć. Ale nie pomijaj średnika ";"
statement2

Opcjonalny. Określa warunek działania pętli (bloku kodu). Zwykle używa się tego zdania do oceny warunku zmiennej licznika. Jeśli zwraca true, pętla będzie ponawiana, jeśli zwraca false, pętla zakończy się.

Komentarz:Ten parametr można pominąć. Ale nie pomijaj średnika ";". Ponadto, jeśli parametr ten jest pomijany, musisz dostarczyć break wewnątrz pętli. W przeciwnym razie pętla nigdy nie zakończy się, co spowoduje awarię przeglądarki.
statement3

Opcjonalny. Wykonuje się po każdym wykonaniu pętli (bloku kodu). Zwykle używa się tego zdania do zwiększania lub zmniejszania zmiennej licznika.

Komentarz:Ten parametr można pominąć (na przykład zwiększenie/zmniejszenie wartości wewnątrz pętli).

Szczegóły techniczne

Wersja JavaScript: ECMAScript 1

Więcej przykładów

przykład

Przechodzenie przez indeksy tablicy, zbieranie nazw samochodów z tablicy cars:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

spróbuj sam

Przykład wyjaśnienia:

  • Po pierwsze, ustawiamy zmienną przed rozpoczęciem pętli (var i = 0;):
  • Następnie, określamy warunek działania pętli. Pętla będzie kontynuować się, o ile zmienna jest mniejsza niż długość tablicy (czyli 4):
  • Z każdym wykonaniem pętli zmienna zwiększa się o 1 (i++)
  • Gdy zmienna przestaje być mniejsza niż długość tablicy (czyli 4), warunek jest fałszywy, pętla kończy się:

przykład

Inicjalizacja wielu wartości w pierwszym parametrze:

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

spróbuj sam

przykład

Pomijanie pierwszego parametru (ustawienie wartości przed rozpoczęciem pętli):

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

spróbuj sam

przykład

Używając instrukcji continue - przechodząc do bloku pętli, ale pomijając wartość "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "The number is " + i + "<br>";
}

spróbuj sam

przykład

Użyj polecenia break - przejdź przez fragment kodu, ale wyjdź z pętli, gdy zmienna i równa się "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "The number is " + i + "<br>";
}

spróbuj sam

przykład

Pomij drugi parametr. W tym przykładzie używamy również polecenia break, aby wyjść z pętli, gdy i równa się "3" (jeśli pomijasz drugi parametr, musisz dostarczyć break wewnątrz pętli. W przeciwnym razie pętla nigdy się nie zakończy, a przeglądarka może się zawiesić):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

spróbuj sam

przykład

Przejdź przez indeksy tablicy w porządku malejącym (ujemny przyrost):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

spróbuj sam

przykład

Pomij ostatni parametr i zwiększ wartość w pętli:

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

spróbuj sam

przykład

przejdź przez węzły obiektu NodeList i zmień kolor tła wszystkich elementów <p> na liście:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

spróbuj sam

przykład

przykład pętli w pętli (pętla wewnątrz pętli):

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

spróbuj sam

obsługa przeglądarek

zapis Chrome IE Firefox Safari Opera
for obsługa obsługa obsługa obsługa obsługa

powiązane strony

JavaScript podręcznik:Pętla for w JavaScript

Podręcznik referencyjny JavaScript:Złożony for ... in w JavaScript

Podręcznik referencyjny JavaScript:Zakładka break w JavaScript

Podręcznik referencyjny JavaScript:Zakładka continue w JavaScript

Podręcznik referencyjny JavaScript:Pętla while w JavaScript