Wyjaśnienie każdego typu pętli JavaScript: [With Codeblocks and Examples]

JavaScript jest jednym z najczęściej używanych języków programowania. Deweloperzy, którzy zamierzają zostać inżynierami JavaScript, muszą poznać podstawy pętli, ich rodzaje i sposób działania.

Pętla JavaScript to narzędzie służące do wykonywania powtarzalnych zadań w oparciu o określony warunek. Z drugiej strony „iteracja” jest terminem ogólnym, oznaczającym powtórzenie w kontekście pętli. Pętla będzie kontynuować iterację, dopóki nie zostanie spełniony warunek zatrzymania.

Aby lepiej to zrozumieć, możesz pomyśleć o tym jako o grze komputerowej, w której masz wykonać X kroków na północ, a następnie Y kroków w lewo.

Możesz przedstawić wykonanie 7 kroków na północ jako;

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

kiedy powyższy blok kodu zostanie wykonany, będziesz miał to;

Dlaczego zwykle stosuje się pętle?

  • Wykonywanie powtarzalnych zadań: Możesz używać pętli do wykonywania instrukcji, dopóki nie zostaną spełnione określone warunki.
  • Iteruj po obiektach lub tablicach: Dzięki pętlom możesz iterować po właściwościach obiektu lub elementach tablicy, co pozwala na wykonanie określonych działań dla każdej właściwości lub elementu.
  • Filtruj dane: Możesz użyć pętli do filtrowania danych na podstawie określonych warunków.

Pętle JavaScript mają różne formy; Za, póki, czyń… póki, za… i za… w. Przyjrzyjmy się im szczegółowo i zademonstrujmy, jak każdy z nich działa.

Dla pętli

Pętla for będzie się powtarzać, dopóki określony warunek nie zostanie spełniony. Pętla for ma trzy opcjonalne wyrażenia, po których następuje blok kodu.

for (initialization; condition; finalExpression) {

  // code

}
  • Wyrażenie inicjujące pojawia się przed wykonaniem pierwszej pętli. To wyrażenie zwykle inicjuje jeden lub więcej liczników.
  • Wyrażenie warunkowe jest sprawdzane za każdym razem przed uruchomieniem pętli for. Kod w pętli lub instrukcji jest wykonywany za każdym razem, gdy wyrażenie ma wartość true. Z drugiej strony pętla zatrzymuje się, gdy wyrażenie ma wartość false. Jeśli jednak wyrażenie zostanie pominięte, zostanie ono automatycznie ocenione jako prawda.
  • FinalExpression jest wykonywany po każdej iteracji pętli. Wyrażenie jest najczęściej używane do zwiększania licznika.

Możesz użyć {}, instrukcji blokowej, aby pogrupować i wykonać wiele instrukcji. Jeśli chcesz zakończyć pętlę wcześniej, zanim wyrażenie warunkowe zwróci wartość false, użyj instrukcji break.

Przykłady pętli for z kodem

  • Użyj pętli for do iteracji;
  • for (let i = 0; i < 7; i++) {
    
      console.log(i);
    
    }

    W tym bloku kodu;

    • Zmienna i jest inicjowana na zero (niech i=0).
    • Warunek jest taki, że i powinno być mniejsze niż 7 (i=7).
    • Pętla będzie wielokrotnie powtarzać, jeśli wartość i jest mniejsza niż 7 (i<7>.
    • Iteracja doda 1 do wartości i po każdej iteracji (++1).

  • Użyj instrukcji break, aby wyjść z pętli, zanim warunek przyjmie wartość false;
  • for (let i = 1; i < 11; i += 2) {
    
      if (i === 9) {
    
        break;
    
      }
    
      console.log('Total developers: ' + i);
    
    }
    • Blok kodu iteruje od 1 do 10 (i<11).
    • Pętla inicjalizuje zmienną i wartością 1 (niech i = 1).
    • Warunek pętli będzie kontynuowany, jeśli wartość i jest mniejsza niż 11 (i < 11).
    • Wartość i wzrasta o 2 po każdej iteracji (i += 2).

    Instrukcja if ocenia, czy wartość i=9. Jeśli warunek jest spełniony, instrukcja break jest wykonywana, a pętla kończy działanie.

    (obraz)

    Dla… pętli

    Pętla for…of iteruje po obiektach iterowalnych, takich jak mapa, tablica, argumenty i zestaw. Ta pętla wywołuje niestandardowy hak iteracji z instrukcjami, które są wykonywane dla wartości każdej odrębnej właściwości.

    Podstawowa struktura pętli for… to;

    for (variable of object)
    
      statement

    Przykłady pętli for…of w akcji

  • Pętla for…of iterująca po tablicy
  • const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
    
    for (let i of frontendLanguages) {
    
      console.log(i);
    
    }

    W tym kodzie;

    • Definiujemy tablicę o nazwie frontendLanguages
    • Tablica ma trzy elementy; „HTML”, „CSS”, „JavaScript” i „Reaguj”.
    • Pętla for…of iteruje po każdym elemencie we frontendLanguages.
    • I w bloku kodu przyjmuje wartość każdego elementu podczas każdej iteracji oraz wartości drukowane w konsoli.

  • Pętla for…of iterująca po zbiorze
  • const s = new Set();
    
    s.add(2);
    
    s.add("grey");
    
    for (let n of s) {
    
      console.log(n);
    
    }

    W tym bloku kodu;

    • Deklarujemy zmienną s, którą przypisujemy do nowego zestawu za pomocą konstruktora Set().
    • Do kodu dodaje się dwa elementy za pomocą metody add().
    • For….of iteruje po obiekcie elementów.
    • Pętla przypisuje bieżący element do n przed wykonaniem instrukcji console.log(n).

  • Pętla for…of iterująca po mapie
  • const m = new Map();
    
    m.set(4, "rabbit");
    
    m.set(6, "monkey");
    
    m.set(8, "elephant");
    
    m.set(10, "lion");
    
    m.set(12, "leopard");
    
    for (let n of m) {
    
      console.log(n);
    
    }

    W tym bloku kodu;

    • Używamy konstruktora Map() do stworzenia nowego obiektu Map.
    • Deklarowana jest zmienna m.
    • Za pomocą metody .set() dodajemy pięć par klucz-wartość.
    • Pętla for…of iteruje po elementach obiektu Map m.

    Dla… w pętli

    Pętla for…in służy do iteracji po właściwościach obiektu. Podstawowa struktura pętli for…in to;

    for (property in object) {
    
      // code
    
    }

    Pętli for…in można używać do iteracji po tablicach i obiektach podobnych do tablic.

    const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
    
    for (const vegetable in shoppingList) {
    
      console.log(vegetable);
    
    }

    W tym bloku kodu;

    • Wprowadzamy obiekt JavaScript i nazywamy go shoppingList.
    • Pętli for używamy do iteracji po każdej właściwości na liście zakupów za pomocą operatora in.
    • W każdej iteracji pętla przypisuje bieżącą nazwę właściwości w shoppingList.

    Chwila

    Pętla while ocenia warunek, jeśli stwierdzi, że jest prawdziwy, blok kodu jest wykonywany. Jeśli jednak warunek jest fałszywy, pętla się kończy, a blok kodu nie zostanie wykonany.

    To jest podstawowa struktura pętli while;

    while (condition)
    
        Statement

    Warunek testu musi wystąpić przed wykonaniem instrukcji w pętli. Możesz wykonać wiele instrukcji za pomocą instrukcji {} lub instrukcji blokowych.

    Przykład działania pętli while

    let n = 0;
    
    while (n < 9) {
    
      console.log(n);
    
      n++;
    
    }

    W tym kodzie;

    • Zmienna n jest inicjowana wartością zerową (niech n=0).
    • Pętla będzie wykonywana tak długo, jak wartość n będzie mniejsza niż 9 (n<9)
    • Wartość n jest wyświetlana na konsoli i zwiększana o 1 po każdej iteracji (n++)
    • Kod przestanie działać o godzinie 8.

    Wykonaj pętlę while

    Pętla do…while wykonuje iterację, dopóki określony warunek nie zostanie uznany za fałszywy.

    Ogólna struktura instrukcji do…while jest następująca;

    do
    
      statement
    
    while (condition);

    Instrukcja jest wykonywana raz, ale przed sprawdzeniem warunku. Instrukcja zostanie wykonana, jeśli warunek jest prawdziwy. Jeśli jednak oceniany warunek jest fałszywy, wykonywanie zostanie zatrzymane, a sterowanie zostanie przekazane do instrukcji po do..while. Kod w pętli do…while gwarantuje wykonanie co najmniej raz, nawet jeśli warunek ma wartość true.

    Przykład do…podczas

    let n = 0;
    
    do {
    
      n += 1;
    
      console.log(n);
    
    } while (n < 7);

    W tym kodzie;

    • Wprowadzamy zmienną n i ustawiamy jej wartość początkową na 0 (niech n=0).
    • Nasza zmienna n wchodzi w pętlę do…while, w której jej wartość jest zwiększana o 1 po każdej iteracji (n+=1)
    • Wartość n jest rejestrowana.
    • Pętla będzie wykonywana tak długo, jak długo wartość n będzie mniejsza niż 7 (n<7).

    Po uruchomieniu tego kodu konsola wyświetli wartości n, począwszy od 1 do 7, ponieważ pętla jest wykonywana 7 razy.

    Zagnieżdżona pętla

    Zagnieżdżona pętla to sytuacja, w której mamy pętlę wewnątrz pętli. Na przykład możemy mieć pętlę for zagnieżdżoną w innej pętli for.

    for (let outer = 0; outer < 5; outer += 2) {
    
      for (let inner = 0; inner < 6; inner += 2) {
    
        console.log(`${outer}-${inner}`);
    
      }
    
    }
    • Istnieją dwie zmienne; zewnętrzna i wewnętrzna i obie są inicjowane wartością zero.
    • Obie zmienne są zwiększane o 2 po każdej iteracji
    • Pętle zewnętrzna i wewnętrzna wykonują trzy iteracje.

    Instrukcje sterowania pętlą

    Instrukcje sterowania pętlą, czasami nazywane „instrukcjami skoku”, przerywają normalny przebieg programu. Przerwij i kontynuuj to przykłady instrukcji sterujących pętlą.

    Złam oświadczenia

    Instrukcje break natychmiast kończą pętlę, nawet jeśli warunek nie został spełniony.

    for (let n = 1; n <= 26; n++) {
    
      if (n === 13) {
    
        console.log("Loop stops here. We have reached the break statement");
    
        break;
    
      }
    
      console.log(n);
    
    }

    Wyrenderowany kod pojawi się jako;

    Kontynuuj wypowiedzi

    Kontynuuj instrukcje służą do pominięcia określonego bloku kodu i przeprowadzenia iteracji dla nowej pętli.

    for (let n = 0; n <= 10; n++) {
    
      if (n === 5) {
    
        continue;
    
      }
    
      console.log(n);
    
    }

    Wyrenderowany kod pojawi się jako;

    Wniosek

    Powyżej znajdują się typowe pętle, które napotkasz w JavaScript i jego frameworkach/bibliotekach. Jak podkreślono, każdy typ pętli ma swój przypadek użycia i różne zachowania. Jeśli wybierzesz niewłaściwy typ pętli, prawdopodobnie będziesz mieć błędy, a Twój kod prawdopodobnie będzie wyświetlał nieoczekiwane zachowanie.

    Jeśli masz do czynienia z frameworkiem lub biblioteką JavaScript, zawsze sprawdzaj jego dokumentację i korzystaj z wbudowanych pętli.

    x