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
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).
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
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.
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).
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.
