Pętle JavaScript są niezbędne do wydajnej obsługi powtarzalnych zadań. Wykonują blok kodu wielokrotnie, dopóki określony warunek pozostaje spełniony. Pętle te są potężnymi narzędziami do automatyzacji zadań i usprawniania kodu.

Załóżmy na przykład, że chcemy wydrukować Witaj świecie 5 razy. Można to łatwo zrobić za pomocą JS Loop. W Loop instrukcję wystarczy zapisać tylko raz, a pętla zostanie wykonana 5 razy, jak pokazano poniżej:

for (let i = 0; i < 5; i++) {  console.log('Hello World!'); }>

Hello World! Hello World! Hello World! Hello World! Hello World!>

Spis treści

• dla pętli
• podczas Pętli
• pętla do-while
• pętla for-in
• pętla for-of
• Oznaczone oświadczenie
• Oświadczenie o przerwaniu
• Kontynuuj oświadczenie
• Nieskończona pętla (błąd pętli)

1. JavaScript dla pętli

The Pętla JS for zapewnia zwięzły sposób pisania struktury pętli. Pętla for zawiera inicjalizację, warunek i przyrost/zmniejszenie w jednym wierszu, zapewniając w ten sposób krótszą, łatwą do debugowania strukturę pętli.

Składnia

for (initialization; testing condition; increment/decrement) { statement(s) }>

Schemat blokowy

• Warunek inicjalizacji: Inicjuje zmienną i zaznacza początek pętli for. Można użyć już zadeklarowanej zmiennej lub zadeklarować zmienną, tylko lokalnie w pętli.
• Warunek testowy: Służy do testowania warunku wyjścia pętli for. Musi zwracać wartość logiczną. Jest to również Pętla kontroli wejścia ponieważ warunek jest sprawdzany przed wykonaniem instrukcji pętli.
• Wykonanie instrukcji: Gdy warunek zostanie uznany za prawdziwy, wykonywane są instrukcje zawarte w treści pętli.
• Zwiększanie/zmniejszanie: Służy do aktualizacji zmiennej dla następnej iteracji.
• Zakończenie pętli: Gdy warunek staje się fałszywy, pętla kończy się, co oznacza koniec jej cyklu życia.

Przykład

// JavaScript program to illustrate for loop let x; // for loop begins when x = 2 // and runs till x <= 4 for (x = 2; x <= 4; x++) {  console.log('Value of x: ' + x); }>

Value of x: 2 Value of x: 3 Value of x: 4>

2. JavaScript podczas pętli

The Pętla while w JS to instrukcja przepływu sterowania, która umożliwia wielokrotne wykonanie kodu w oparciu o dany warunek logiczny. Pętlę while można traktować jako powtarzającą się instrukcję if.

Składnia

while (boolean condition) { loop statements... }>

Schemat blokowy

• Pętla while rozpoczyna się od sprawdzenia warunku. Jeśli zostanie ocenione jako prawdziwe, wówczas wykonywane są instrukcje będące treścią pętli, w przeciwnym razie wykonywana jest pierwsza instrukcja znajdująca się po pętli. Z tego powodu nazywa się go również Pętla kontroli wejścia
• Gdy warunek zostanie uznany za prawdziwy, wykonywane są instrukcje zawarte w treści pętli. Zwykle instrukcje zawierają zaktualizowaną wartość zmiennej przetwarzanej w następnej iteracji.
• Gdy warunek staje się fałszywy, pętla kończy się, co oznacza koniec jej cyklu życia.

Przykład

// JavaScript code to use while loop let val = 1; while (val < 6) {  console.log(val);   val += 1; }>

1 2 3 4 5>

3. JavaScript do-while Loop

The Pętla do-while w JS jest podobna do pętli while z tą tylko różnicą, że sprawdza warunek po wykonaniu instrukcji i dlatego jest przykładem pętli Wyjdź z pętli kontrolnej. Wykonuje zawartość pętli przynajmniej raz, gdy warunek jest fałszywy.

Składnia

do { Statements... } while (condition);>

Schemat blokowy

• Pętla do-while rozpoczyna się od wykonania instrukcji. Za pierwszym razem nie sprawdza się żadnego warunku.
• Po wykonaniu instrukcji i aktualizacji wartości zmiennej sprawdzany jest warunek pod kątem wartości prawdziwej lub fałszywej. Jeśli zostanie ocenione jako prawdziwe, rozpoczyna się następna iteracja pętli.
• Kiedy warunek staje się fałszywy, pętla kończy się, co oznacza koniec jej cyklu życia.
• Należy zauważyć, że pętla do-while wykona swoje instrukcje co najmniej raz przed sprawdzeniem dowolnego warunku i dlatego jest przykładem pętli sterującej wyjściem.

Przykład

let test = 1; do {  console.log(test);  test++; } while(test <= 5)>

1 2 3 4 5>

4. Pętla for-in JavaScript

Pętla for-in w JS służy do iteracji po właściwościach obiektu. Pętla for-in iteruje tylko po tych kluczach obiektu, których właściwość wyliczalna ma ustawioną wartość true.

Składnia

for(let variable_name in object_name) { // Statement }>

Przykład: Ten przykład pokazuje użycie pętli for-in.

let myObj = { x: 1, y: 2, z: 3 }; for (let key in myObj) {  console.log(key, myObj[key]); }>

x 1 y 2 z 3>

5. JavaScriptowa pętla for-of

Pętla for-of w JS służy do iteracji obiektów iterowalnych, na przykład – tablicy, obiektu, zestawu i mapy. Bezpośrednio iteruje wartość danego obiektu iterowalnego i ma bardziej zwięzłą składnię niż pętla for.

Składnia:

for(let variable_name of object_name) { // Statement }>

Przykład: Ten przykład pokazuje użycie pętli for-of.

let arr = [1, 2, 3, 4, 5]; for (let value of arr) {  console.log(value); }>

1 2 3 4 5>

6. Oświadczenie oznaczone JavaScriptem

Słowo kluczowe etykiety JS nie zawiera słowa kluczowego goto. Użytkownicy mogą używać słowa kluczowegocontinu z instrukcją label. Ponadto użytkownicy mogą użyć słowa kluczowego break, aby zakończyć pętlę/blok. Możesz także użyć słowa kluczowego break bez definiowania etykiety, ale kończy ono tylko nadrzędną pętlę/blok. Aby zakończyć pętlę zewnętrzną od pętli wewnętrznej za pomocą słowa kluczowego break, użytkownicy muszą zdefiniować etykietę.

Składnia

Label: statement (loop or block of code)>

Przykład

let sum = 0, a = 1;  // Label for outer loop  outerloop: while (true) {   a = 1;   // Label for inner loop   innerloop: while (a < 3) {   sum += a;   if (sum>12) { // Przerwij pętlę zewnętrzną od pętli wewnętrznej. Przerwij pętlę zewnętrzną;   } console.log('suma = ' + suma);   a++;   } }>

sum = 1 sum = 3 sum = 4 sum = 6 sum = 7 sum = 9 sum = 10 sum = 12>

7. Instrukcja przerwania JavaScript

Instrukcja przerwania JS służy do zakończenia wykonywania pętli lub instrukcji switch, gdy warunek jest spełniony.

Składnia

break;>

Przykład

for (let i = 1; i < 6; i++) {  if (i == 4)   break;    console.log(i); }>

1 2 3>

8. Oświadczenie dotyczące kontynuacji JavaScript

JS kontynuuje oświadczenie służy do przerwania iteracji pętli i przejścia do następnej iteracji. Przerwanie iteracji jest możliwe tylko wtedy, gdy wystąpi określony warunek. Główna różnica pomiędzy instrukcjamicontinue i break polega na tym, że instrukcja break całkowicie wyrywa się z pętli, podczas gdy instrukcjacontinue służy do przerwania jednej instrukcji i iteracji do następnej.

Składnia

continue;>

Przykład

for (let i = 0; i < 11; i++) {  if (i % 2 == 0)   continue;    console.log(i); }>

1 3 5 7 9>

9. Nieskończona pętla JavaScript (błąd pętli)

Jednym z najczęstszych błędów podczas implementowania jakiejkolwiek pętli jest to, że może ona nigdy nie zakończyć się, tj. pętla działa nieskończoną ilość razy. Dzieje się tak, gdy z jakiegoś powodu warunek nie zostanie spełniony.

Przykład: Ten przykład pokazuje nieskończoną pętlę.

// JavaScript program to illustrate infinite loop // Infinite loop because condition is not false // condition should have been i>0. for (niech i = 5; i != 0; i -= 2) { console.log(i); } niech x = 5; // Nieskończona pętla, ponieważ // nie podano instrukcji aktualizacji while (x == 5) { console.log('W pętli'); }>