JavaScript: pętle for

Pętle są wykorzystywane w programowaniu w celu automatyzacji powtarzalnych zadań. Najbardziej podstawowymi typami pętli zastosowanych w JavaScript są instrukcje while i do…while.

Instrukcje while i do…while są oparte na wyrażeniach warunkowych, zatem są wykonywane, gdy wynikiem zdefiniowanego wyrażenia warunkowego jest prawda. Instrukcje for działają w ten sam sposób i mają wbudowane dodatkowe funkcje, takie jak licznik pętli, umożliwiający wcześniejsze zdefiniowanie liczby iteracji pętli.

W tym artykule poznamy instrukcję for, for…of i for…in, które są istotnymi elementami języka programowania JavaScript.

Pętla for

Instrukcja for jest typem pętli, która wykorzystuje maksymalnie do trzech opcjonalnych wyrażeń w celu zaimplementowania powtarzających się czynności, zdefiniowanych w bloku kodu.

Spójrzmy na przykład, ilustrujący co to oznacza.

for (inicjalizacja; instrukcja warunkowa; wyrażenie końcowe) {
    // kod
}

W powyższej składni w instrukcji for umieszczono trzy wyrażenia: initialization (inicjujące), condition (warunkowe) oraz final expression (końcowe), zwane także inkrementacją.

Użyjemy podstawowego przykładu, aby zademonstrować, za co odpowiada każda z tych instrukcji.

// pętla for z 5 iteracjami
for (let i = 0; i < 4; i++) {
    // wyświetlamy i przy każdej iteracji w konsoli
    console.log(i);
}

Po uruchomieniu powyższego kodu otrzymamy następujące dane wyjściowe:

0
1
2
3

W powyższym przykładzie zainicjowaliśmy pętlę for za pomocą zmiennej let i = 0, która rozpoczyna pętlę od 0. Definiujemy instrukcję warunkową na i < 4, co oznacza, że dopóki wartość zmiennej “i” jest mniejsza niż 4, pętla będzie działać. Nasze wyrażenie końcowe (i ++) zwiększa wartość zmiennej dla każdej iteracji w pętli. Komenda console.log(i) powoduje wypisanie liczb, zaczynając od 0 i kończąc działanie, gdy zmienna “i” osiągnie wartość 4.

Bez zastosowania pętli moglibyśmy osiągnąć ten sam wynik, używając poniższego kodu.

// Ustawiamy wartość i jako 0
let i = 0;

// ręcznie zwiększamy i o 1 - 4 razy
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

Bez wykorzystania pętli w tym przypadku blok kodu jest powtarzalny i składa się z większej liczby wierszy. Gdybyśmy musieli dodatkowo zwiększać wartość zmiennej, musielibyśmy napisać jeszcze więcej wierszy kodu.

Przyjrzyjmy się każdemu wyrażeniu w pętli, aby je w pełni zrozumieć.

Inicjalizacja

Naszym pierwszym wyrażeniem jest inicjalizacja. Wygląda ona następująco.

let i = 0;

Definiujemy zmienną o nazwie “i” z wykorzystaniem słowa kluczowego “let” (można również użyć słowa kluczowego “var“), nadając jej wartość 0. Chociaż zmienna może mieć dowolną nazwę, litera “i” jest najczęściej używana. Zmienna “i” oznacza iterację, jest spójna i utrzymuje kompaktowy charakter kodu.

Instrukcja warunkowa

Tak jak widzieliśmy w przypadku pętli while oraz do…while, pętle zazwyczaj zawierają instrukcje warunkowe. Oto nasza instrukcja warunkowa.

i < 4;

Ustaliliśmy już, że nasza zmienna iteracyjna “i“, na początku ma przypisaną wartość 0. Teraz definiujemy to, że instrukcja warunkowa jest spełniona w tym przykładzie, tak długo dopóki “i” jest mniejsze od 4.

Wyrażenie końcowe

Wyrażenie końcowe jest instrukcją wykonywaną na końcu każdej pętli. Najczęściej jest używane do zwiększania lub zmniejszania wartości, ale może być również wykorzystywane do dowolnego celu.

i++

W naszym przykładzie zwiększamy wartość zmiennej o jeden za pomocą instrukcji i++. Jest to tożsame z wykorzystaniem instrukcji i = i + 1.

W przeciwieństwie do wyrażeń inicjalizacyjnych i wyrażeń warunkowych, wyrażenie końcowe nie jest zakończone średnikiem.

Podsumowanie

Teraz, gdy przyjrzeliśmy się naszym trzem wyrażeniom zawartym w pętli for, możemy ponownie spojrzeć na całą pętlę.

// pętla z 5 iteracjami
for (let i = 0; i < 4; i++) {
    console.log(i);
}

Po pierwsze, definiujemy zmienną “i” i ustawiamy jej wartość na 0. Następnie ustawiamy instrukcję warunkową dla pętli, do działania dopóki zmienna “i” jest mniejsza od 4. Na koniec zwiększamy “i” o jeden przy każdej iteracji. Nasz blok kodu wypisuje wartość zmiennej “i” w konsoli, zatem naszym wynikiem jest 0, 1, 2 i 3 jako dane wyjściowe.

Wyrażenia opcjonalne

Wszystkie trzy wyrażenia zawarte w pętli for są opcjonalne. Na przykład możemy zdefiniować tą samą instrukcję for bez wyrażenia inicjującego, inicjując zmienną poza pętlą.

// deklaracja zmiennej poza pętlą
let i = 0;

// inicjalizacja pętli
for (; i < 4; i++) {
    console.log(i);
}

0
1
2
3

W tym przypadku pierwszy “;” jest potrzebny, aby określić, czy instrukcja odnosi się do wyrażenia inicjującego, instrukcji warunkowej lub wyrażenia końcowego, nawet jeśli zostanie pominięta.

Poniżej możemy również usunąć warunek z pętli. Użyjemy instrukcji “if” w połączeniu z instrukcją “break“, aby zasygnalizować pętli, aby przestała działać, gdy “i” będzie większe niż 3, co jest przeciwieństwem prawdziwej instrukcji warunkowej.

// deklaracja zmiennej poza pętlą
let i = 0;

// pomijanie inicjalizacji oraz warunku
for (; ; i++) {
    if (i > 3) {
        break;
    }
    console.log(i);
}

0
1
2
3

Ostrzeżenie: Instrukcja break musi zostać dołączona, jeśli instrukcja warunkowa zostanie pominięta. W przeciwnym wypadku pętla będzie działać nieprzerwanie jako pętla nieskończona i prawdopodobnie doprowadzi do zawieszenia przeglądarki.

Ostatecznie, wyrażenie końcowe może zostać usunięte, poprzez umieszczenie go na końcu pętli. Nadal należy uwzględnić obydwa średniki, w przeciwnym razie pętla nie będzie działać.

// deklaracja zmiennej poza pętlą
let i = 0;

// pomijanie wszystkich warunków
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}

0
1
2
3

Jak widać z powyższych przykładów, zdefiniowanie wszystkich trzech instrukcji zapewnia najbardziej zwięzły i czytelny kod. Warto jednak na przyszłość wiedzieć, że możliwe jest pominięcie omówionych instrukcji.

Modyfikacja tablicy

Możemy użyć pętli do modyfikowania tablicy.

W następnym przykładzie utworzymy pustą tablicę i zapełnimy ją wartościami zmiennej licznika pętli.

// inicjalizujemy pustą tablicę
let arrayExample = [];

// inicjalizacja pętli for z trzykrotnym powtórzeniem
for (let i = 0; i < 3; i++) {
    // aktualizujemy dane w tablicy zmienną
    arrayExample.push(i);
    console.log(arrayExample);
}

[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

Definiujemy pętlę, która działa, dopóki instrukcja warunkowa i

Długość tablicy

Czasami możemy chcieć, aby pętla działała kilkukrotnie, nie będąc pewnym, jaka będzie liczba iteracji. Zamiast definiować liczbę stałą, jak to zrobiliśmy w poprzednich przykładach, możemy skorzystać z właściwości length (długość) tablicy, aby pętla działała tyle razy, ile jest w niej elementów.

// deklaracja tablicy z 3 obiektami
let zupa = [ "rosol", "pomidorowa", "zurek" ];

// inicjalizacja pętli for dla uruchomienia tyle razy - jaka jest długość tablicy
for (let i = 0; i < zupa.length; i++) {
    // wyświetlamy każdy obiekt z tablicy w konsoli
    console.log(zupa[i]);
}

Otrzymamy następujące dane wyjściowe.

rosol
pomidorowa
zurek

W tym przykładzie zwiększamy wartość zmiennej iteracyjnej przez każdy indeks tablicy za pomocą komendy zupa[i] (np. pętla będzie zwiększać wartość zmiennej iteracyjnej przez zupa[0], zupa[1] itd.). To powoduje, że indeks aktualizuje się dynamicznie wraz z każdą iteracją.

Pętla for…in

Instrukcja for…in dokonuje iteracji na podstawie właściwości obiektu. Aby to zademonstrować, stworzymy prosty obiekt zubr z kilkoma zmiennymi name:value.

const zubr = {
    typ: "strunowce",
    rodzina: "wolowate",
    masa: Infinity
}

Korzystając z pętli for…in, możemy łatwo uzyskać dostęp do każdej z nazw właściwości.

// Print property names of object
for (attribute in zubr) {
    console.log(attribute);
}

typ
rodzina
masa

Możemy również uzyskać dostęp do wartości przypisanej każdej właściwości, używając nazwy właściwości jako wartości indeksowej obiektu.

// Print property values of object
for (attribute in zubr) {
    console.log(zubr[attribute]);
}

strunowce
wolowate
Infinity

Łącząc je, możemy uzyskać dostęp do wszystkich nazw i wartości obiektu.

// Print names and values of object properties
for (attribute in zubr) {
    console.log(`${attribute}`.toUpperCase() + `: ${zubr[attribute]}`);
}

TYP: strunowce
RODZINA: wolowate
MASA: Infinity

Użyliśmy metody toUpperCase(), aby zmodyfikować nazwę właściwości, a następnie jej wartość. for…in jest niezwykle użytecznym sposobem na iterację w oparciu o właściwości obiektu.

Pętla for…of

Instrukcja for…in jest przydatna do iteracji w oparciu o właściwości obiektu, ale do iteracji w oparciu o obiekty iterowalne, takie jak tablice i łańcuchy znaków, możemy użyć instrukcji for …of. Instrukcja for…of jest nowszym rozwiązaniem w ramach ECMAScript 6. ECMAScript (lub ES) to specyfikacja języka skryptowego stworzona w celu standaryzacji JavaScript.

W tym przykładzie pętli for…of utworzymy tablicę i wyświetlimy każdy element tablicy w konsoli.

// Initialize array of zubr species
let zubry = [ "zubr nizinny", "zubr kaukaski", "zubr karpacki" ];

// Print out each type of zubr
for (let zubr of zubry) {
    console.log(zubr);
}

Z instrukcji for…of otrzymamy następujące dane wyjściowe.

zubr nizinny
zubr kaukaski
zubr karpacki

Możliwe jest również wyświetlenie indeksu związanego z elementami indeksowymi przy użyciu metody entries().

...
// Loop through both index and element
for (let [index, zubr] of zubry.entries()) {
    console.log(index, zubr);
}

0 'zubr nizinny'
1 'zubr kaukaski'
2 'zubr karpacki'

Łańcuch znaków może być iterowany w taki sam sposób jak tablica.

// Assign string to a variable
let zubrString = "zubry";

// Iterate through each index in the string
for (let zubr of zubrString) {
    console.log(zubr);
}

z
u
b
r
y

W tym przypadku zapętliliśmy każdy znak w łańcuchu, wyświetlając je w sekwencji.