Jak używać pętli w JavaScript

Zapętlanie pozwala na iterację każdego elementu w tablicy, dzięki czemu można dostosować i wyprowadzić każdy z nich według własnego uznania. Jak każdy język programowania, pętle są również kluczowym narzędziem do renderowania tablic w JavaScript.

Z pomocą kilku praktycznych przykładów, zagłębimy się w różne sposoby wykorzystania pętli w JavaScript.

Przyrostowa i dekrementalna pętla w JavaScript

Przyrostowy dla pętla jest podstawą iteracji w JavaScript.

Zakłada wartość początkową przypisaną do zmiennej i uruchamia proste warunkowe sprawdzenie długości. Następnie zwiększa lub zmniejsza tę wartość za pomocą ++ lub -- operatorów.

Oto jak wygląda jego ogólna składnia:

for (var i = wartość początkowa; i < długość.tablicy; i++) {
tablica[i]}

Przejdźmy teraz przez tablicę, używając powyższej składni podstawowej:

aArray = [1, 3, 5, 6];
dla (niech i = 0; i < długość.tablicy; i++) {
console.log (tablica[i])
}
Wyjście:
1
3
5
6 

Teraz będziemy operować na każdym elemencie w powyższej tablicy za pomocą JavaScript dla pętla:

aArray = [1, 3, 5, 6];
dla (niech i = 0; i < długość.tablicy; i++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Wyjście:
5x1 = 5
5x3 = 15
5x5 = 25
5x6 = 30 

Pętla iteruje przez tablicę stopniowo z ++ operator, produkujący uporządkowane wyjście.

Ale używając negatywu (--), można odwrócić dane wyjściowe.

Składnia jest taka sama, ale logika różni się nieco od powyższej pętli inkrementacyjnej.

Oto jak działa metoda dekrementacyjna:

aArray = [1, 3, 5, 6];
for (niech i = tablica.długość-1; i > = 0; i--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Wyjście:
5x6 = 30
5x5 = 25
5x3 = 15
5x1 = 5

Logika stojąca za powyższym kodem nie jest zbyt daleko idąca. Indeksowanie tablicy zaczyna się od zera. Więc wzywam tablica[i] zwykle iteruje od indeksu zero do trzech, ponieważ powyższa tablica zawiera cztery elementy.

W ten sposób usunięcie jednego z długości tablicy i ustawienie warunku na większe lub równe zero, tak jak to zrobiliśmy, jest całkiem przydatne — zwłaszcza gdy używasz tablicy jako podstawy swojej iteracji.

Utrzymuje indeks tablicy o jeden mniejszy niż jego długość. Warunek ja >= 0 następnie wymusza zatrzymanie liczenia na ostatnim elemencie tablicy.

Związane z: Metody tablic JavaScript, które powinieneś opanować już dziś

JavaScript dla każdego

Chociaż nie możesz dekrementować za pomocą JavaScript dla każdego, często jest mniej gadatliwy niż surowy dla pętla. Działa poprzez wybieranie jednego przedmiotu po drugim bez zapamiętywania poprzedniego.

Oto ogólna składnia JavaScript dla każdego:

array.forEach (element => {
akcja
})

Zobacz, jak to działa w praktyce:

niech anArray = [1, 3, 5, 6];
anArray.forEach (x => {
konsola.log (x)
});
Wyjście:
1
3
5
6 

Teraz użyj tego, aby wykonać prostą operację matematyczną na każdym elemencie, tak jak w poprzedniej sekcji:

niech anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log("5", "x", x, "=", x * 5)
});
Wyjście:
5x1 = 5
5x3 = 15
5x5 = 25
5x6 = 30 

Jak używać for... w pętli JavaScript

ten dla w pętla w JavaScript przechodzi przez tablicę i zwraca jej indeks.

Przekonasz się, że jest łatwy w użyciu dla w jeśli znasz Pętla for Pythona ponieważ są podobne pod względem prostoty i logiki.

Spójrz na jego ogólną składnię:

for (niech element w tablicy){
akcja 
}

Więc dla w pętla przypisuje każdy element tablicy do zmiennej (elementu) zadeklarowanej w nawiasie.

Zatem rejestrowanie elementu bezpośrednio w pętli zwraca indeks tablicy, a nie same elementy:

niech anArray = [1, 3, 5, 6];
for (pozwól i w tablicy){
konsola.log (i)
}
Wyjście:
0
1
2
3 

Aby zamiast tego wyprowadzić każdy element:

niech anArray = [1, 3, 5, 6];
for (pozwól i w tablicy){
console.log (tablica[i])
}
Wyjście:
1
3
5
6 

Podobnie jak w przypadku pętli dekrementalnej, łatwo jest również odwrócić dane wyjściowe za pomocą dla w:

niech anArray = [1, 3, 5, 6];
// Usuń jeden z długości tablicy i przypisz go do zmiennej:
niech v = tablica.długość - 1; 
// Użyj powyższej zmiennej jako podstawy indeksu podczas iteracji w dół tablicy:
for (pozwól i w tablicy){
console.log (tablica[v])
v-=1;
}
Wyjście:
6
5
3
1 

Powyższy kod jest logicznie podobny do tego, co zrobiłeś podczas korzystania z pętli dekrementacyjnej. Jest jednak bardziej czytelny i wyraźnie zarysowany.

JavaScript dla... pętli

ten dla...z pętla jest podobna do dla w pętla.

Jednak w przeciwieństwie do dla w, nie wykonuje iteracji przez indeks tablicy, ale przez same elementy.

Jego ogólna składnia wygląda tak:

for (niech i tablicy) {
akcja 
}

Użyjmy tej metody pętli, aby stopniowo iterować po tablicy, aby zobaczyć, jak to działa:

niech anArray = [1, 3, 5, 6];
dla (let i tablicy) {
konsola.log (i)
}
Wyjście:
1
3
5
6 

Możesz również użyć tej metody, aby iterować w dół tablicy i odwracać dane wyjściowe. To jest podobne do tego, jak to robisz za pomocą dla w:

niech anArray = [1, 3, 5, 6];
niech v = tablica.długość - 1;
for (niech x tablicy) {
console.log (tablica[v])
v-=1;
}
Wyjście:
6
5
3
1

Aby działać w pętli:

niech anArray = [1, 3, 5, 6];
niech v = tablica.długość - 1;
for (niech x tablicy) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v-=1;
}
Wyjście:
5x6 = 30
5x5 = 25
5x3 = 15
5x1 = 5 

Pętla while

ten podczas pętla działa w sposób ciągły, dopóki określony warunek pozostaje spełniony. Jest często używany jako nieskończona pętla.

Na przykład, ponieważ zero jest zawsze mniejsze niż dziesięć, poniższy kod działa w sposób ciągły:

niech i = 0;
podczas gdy (ja < 10) {
konsola.log (4)
}

Powyższy kod loguje „4” w nieskończoność.

Przejdźmy przez tablicę za pomocą podczas pętla:

niech i = 0;
while (i < anArray.length) {
console.log (tablica[i])
ja +=1
}
Wyjście:
1
3
5
6 

JavaScript robi...podczas pętli

ten rób...gdy pętla przyjmuje i wykonuje zestaw akcji jawnie wewnątrz a robić składnia. Następnie określa warunek tej akcji wewnątrz podczas pętla.

Oto jak to wygląda:

robić{
działania
}
podczas (
stan
)

Przejdźmy teraz przez tablicę za pomocą tej metody pętli:

robić{
console.log (tablica[i])
ja +=1
}
podczas (
i < długość.tablicy
)
Wyjście:
1
3
5
6 

Zapoznaj się z pętlami JavaScript

Chociaż podkreśliliśmy tutaj różne metody pętli JavaScript, opanowanie podstaw iteracji w programowaniu pozwala na elastyczne i pewne ich stosowanie w programach. To powiedziawszy, większość z tych pętli JavaScript działa w ten sam sposób, z kilkoma różnicami w ich ogólnym zarysie i składni.

Pętle są jednak podstawą większości renderowania tablicy po stronie klienta. Możesz więc dowolnie modyfikować te metody zapętlania. Na przykład używanie ich z bardziej złożonymi tablicami pozwala lepiej zrozumieć pętle JavaScript.

Jak używać instrukcji if-else JavaScript

Instrukcja if-else to pierwszy krok w kierunku programowania logiki w aplikacjach.

Czytaj dalej

O autorze