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;

Spis treści:

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.