JavaScript for loop (z przykładami)

W tym samouczku nauczysz się o pętlach i pętlach for w JavaScript na podstawie przykładów.

W programowaniu pętle służą do powtarzania bloku kodu.

Na przykład, jeśli chcesz wyświetlić wiadomość 100 razy, możesz użyć pętli. To tylko prosty przykład; dzięki pętlom można osiągnąć znacznie więcej.

Ten samouczek skupia się na forpętli JavaScript . Dowiesz się o innych typach pętli w nadchodzących samouczkach.

JavaScript for loop

Składnia forpętli to:

  for(initialExpression; condition; updateExpression) ( // for loop body )

Tutaj,

1. InitialExpression inicjuje i / lub deklaruje zmienne i wykonuje się tylko raz.
2. Stan jest oceniany.
   • Jeśli warunek jest taki false, forpętla jest przerywana.
   • jeśli warunkiem jest true, wykonywany jest blok kodu wewnątrz forpętli.
3. UpdateExpression aktualizuje wartość initialExpression gdy warunek jest true.
4. Stan jest oceniany proces again.This trwa dopóki warunek jest false.

Aby dowiedzieć się więcej o warunkach , odwiedź stronę Porównanie JavaScript i operatory logiczne.

Schemat blokowy pętli JavaScript for

Przykład 1: Wyświetl tekst pięć razy

 // program to display text 10 times const n = 5; // looping from i = 1 to 5 for (let i = 1; i <= n; i++) ( console.log(`I love JavaScript.`); )

Wynik

Uwielbiam JavaScript. Uwielbiam JavaScript. Uwielbiam JavaScript. Uwielbiam JavaScript. Uwielbiam JavaScript.

Oto jak działa ten program.

Iteracja	Zmienna	Warunek: i <= n	Akcja
1	i = 1 n = 5	true	Uwielbiam JavaScript. jest drukowane. i wzrasta do 2 .
2nd	i = 2 n = 5	true	Uwielbiam JavaScript. jest drukowane. i wzrasta do 3 .
3rd	i = 3 n = 5	true	Uwielbiam JavaScript. jest drukowane. i wzrasta do 4 .
4	i = 4 n = 5	true	Uwielbiam JavaScript. jest drukowane. i wzrasta do 5 .
5	i = 5 n = 5	true	Uwielbiam JavaScript. jest drukowane. i wzrasta do 6 .
6th	i = 6 n = 5	false	Pętla jest zakończona.

Przykład 2: Wyświetlanie liczb od 1 do 5

 // program to display numbers from 1 to 5 const n = 5; // looping from i = 1 to 5 // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( console.log(i); // printing the value of i )

Wynik

 1 2 3 4 5

Oto jak działa ten program.

Iteracja	Zmienna	Warunek: i <= n	Akcja
1	i = 1 n = 5	true	1 jest drukowany. i wzrasta do 2 .
2nd	i = 2 n = 5	true	2 jest drukowane. i wzrasta do 3 .
3rd	i = 3 n = 5	true	3 jest drukowane. i wzrasta do 4 .
4	i = 4 n = 5	true	4 jest drukowane. i wzrasta do 5 .
5	i = 5 n = 5	true	5 jest drukowane. i wzrasta do 6 .
6th	i = 6 n = 5	false	Pętla jest zakończona.

Przykład 3: Wyświetl sumę n liczb naturalnych

 // program to display the sum of natural numbers let sum = 0; const n = 100 // looping from i = 1 to n // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( sum += i; // sum = sum + i ) console.log('sum:', sum);

Wynik

 suma: 5050

Tutaj wartość sumy początkowo wynosi 0 . Następnie wykonywana forjest iteracja pętli i = 1 to 100. W każdej iteracji do sumy dodaje się i, a jego wartość zwiększa się o 1 .

Kiedy i wynosi 101 , warunek testu to falsei suma będzie równa 0 + 1 + 2 +… + 100.

Powyższy program dodający sumę liczb naturalnych można również zapisać jako

 // program to display the sum of n natural numbers let sum = 0; const n = 100; // looping from i = n to 1 // in each iteration, i is decreased by 1 for(let i = n; i>= 1; i-- ) ( // adding i to sum in each iteration sum += i; // sum = sum + i ) console.log('sum:',sum);

Ten program daje również takie same wyniki, jak w przykładzie 3 . W programowaniu możesz wykonać to samo zadanie na wiele różnych sposobów; w programowaniu chodzi o logikę.

Chociaż oba sposoby są poprawne, powinieneś spróbować uczynić swój kod bardziej czytelnym.

JavaScript Nieskończona pętla for

Jeśli warunek testu w forpętli jest zawsze true, działa on wiecznie (do zapełnienia pamięci). Na przykład,

 // infinite for loop for(let i = 1; i> 0; i++) ( // block of code )

W powyższym programie warunek jest zawsze taki, truektóry będzie uruchamiał kod nieskończenie wiele razy.

W następnym samouczku nauczysz się whilei do… whilezapętlisz.