Jak používat smyčky v JavaScriptu

Smyčka vám umožňuje iterovat každou položku v poli, takže si můžete přizpůsobit a vydat každou z nich, jak chcete. Jako každý programovací jazyk jsou smyčky také zásadním nástrojem pro vykreslování polí v JavaScriptu.

Pomocí několika praktických příkladů se ponoříme hlouběji do různých způsobů, jak můžete smyčky v JavaScriptu používat.

Inkrementální a dekrementální pro smyčku v JavaScriptu

Inkrementální pro smyčka je základem iterace v JavaScriptu.

Předpokládá počáteční hodnotu přiřazenou proměnné a spustí jednoduchou kontrolu podmíněné délky. Poté tuto hodnotu zvýší nebo sníží pomocí ++ nebo -- operátory.

Obecná syntaxe vypadá takto:

for (var i = počáteční hodnota; i pole [i]}

Nyní pojďme iterovat prostřednictvím pole pomocí výše uvedené základní syntaxe:

anArray = [1, 3, 5, 6];
pro (nechť i = 0; i console.log (anArray [i])
}
Výstup:
1
3
5
6 

Nyní budeme pracovat s každou položkou ve výše uvedeném poli pomocí JavaScriptu pro smyčka:

anArray = [1, 3, 5, 6];
pro (nechť i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Výstup:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Smyčka iteruje v poli postupně s ++ operátor, produkující objednaný výstup.

Ale pomocí negativu (--), můžete výstup obrátit.

Syntaxe jsou stejné, ale logika se trochu liší od výše uvedené inkrementální smyčky.

Zde funguje dekrementální metoda:

anArray = [1, 3, 5, 6];
for (let i = anArray.length-1; i> = 0; i--) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Výstup:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Logika za výše uvedeným kódem není nijak přitažená. Indexování pole začíná od nuly. Takže volání anArray [i] obvykle iteruje z indexu nula na tři, protože výše uvedené pole obsahuje čtyři položky.

Odebrat jeden z délky pole a nastavit podmínku na větší nebo rovnou nulu, jako jsme to udělali, je docela užitečné - zvláště když používáte pole jako základ své iterace.

Udržuje index pole o jeden menší než jeho délka. Kondice i> = 0 pak donutí počet zastavit na poslední položce v poli.

Příbuzný: Metody pole JavaScript byste dnes měli zvládnout

JavaScript pro každý

I když pomocí JavaScriptu nemůžete dekrementovat pro každého, je často méně podrobný než syrový pro smyčka. Funguje to tak, že vybíráte jednu položku za druhou, aniž byste si pamatovali předchozí.

Zde je obecná syntaxe JavaScriptu pro každého:

array.forEach (element => {
akce
})

Podívejte se, jak to funguje v praxi:

nechť anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Výstup:
1
3
5
6 

Nyní to použijte ke spuštění jednoduché matematické operace u každé položky, jako jste to udělali v předchozí části:

nechť anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Výstup:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Jak používat pro... ve smyčce JavaScriptu

The pro... v smyčka v jazyce JavaScript iteruje prostřednictvím pole a vrací jeho index.

Zjistíte to snadno pro... v pokud jste obeznámeni s Smyčka pro Python protože jsou podobné jednoduchosti a logice.

Podívejte se na jeho obecnou syntaxi:

for (let element in array) {
akce 
}

Takže pro... v loop přiřadí každou položku v poli proměnné (prvku) deklarované v závorkách.

Protokolování prvku přímo ve smyčce tedy vrací index pole a ne samotné položky:

nechť anArray = [1, 3, 5, 6];
for (let i in anArray) {
console.log (i)
}
Výstup:
0
1
2
3 

Místo toho výstup každé položky:

nechť anArray = [1, 3, 5, 6];
for (let i in anArray) {
console.log (anArray [i])
}
Výstup:
1
3
5
6 

Stejně jako při použití dekrementální smyčky je také snadné obrátit výstup pomocí pro... v:

nechť anArray = [1, 3, 5, 6];
// Odeberte jeden z délky pole a přiřaďte jej proměnné:
nech v = anArray.length - 1; 
// Použijte výše uvedenou proměnnou jako indexovou základnu při iteraci pole:
for (let i in anArray) {
console.log (anArray [v])
v -= 1;
}
Výstup:
6
5
3
1 

Výše uvedený kód je logicky podobný tomu, co jste udělali při použití dekrementální smyčky. Je to však čitelnější a explicitně nastíněné.

JavaScript pro... smyčky

The pro... z smyčka je podobná smyčce pro... v smyčka.

Nicméně na rozdíl pro... v, ne iteruje prostřednictvím indexu pole, ale samotných položek.

Jeho obecná syntaxe vypadá takto:

pro (ať i pole) {
akce 
}

Použijme tuto metodu opakování k postupnému opakování pole, abychom zjistili, jak to funguje:

nechť anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log (i)
}
Výstup:
1
3
5
6 

Tuto metodu můžete také použít k iteraci pole a obrácení výstupu. Je to podobné tomu, jak to děláte pomocí pro... v:

nechť anArray = [1, 3, 5, 6];
nech v = anArray.length - 1;
for (let x of anArray) {
console.log (anArray [v])
v -= 1;
}
Výstup:
6
5
3
1

Provoz ve smyčce:

nechť anArray = [1, 3, 5, 6];
nech v = anArray.length - 1;
for (let x of anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Výstup:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

The While Loop

The zatímco smyčka běží nepřetržitě, pokud zadaná podmínka zůstane pravdivá. Často se používá jako nekonečná smyčka.

Například protože nula je vždy menší než deset, níže uvedený kód běží nepřetržitě:

nechť i = 0;
while (i <10) {
console.log (4)
}

Výše uvedený kód zaznamenává "4" nekonečně.

Projděme pole pomocí zatímco smyčka:

nechť i = 0;
while (i console.log (anArray [i])
i += 1
}
Výstup:
1
3
5
6 

JavaScript do... while Loop

The dělat, zatímco loop přijímá a provádí sadu akcí explicitně uvnitř a dělat syntax. Poté uvádí podmínky pro tuto akci uvnitř souboru zatímco smyčka.

Jak to vypadá:

dělat{
akce
}
zatímco (
konspirace
)

Nyní pojďme iterovat pole pomocí této metody opakování:

dělat{
console.log (anArray [i])
i += 1
}
zatímco (
i )
Výstup:
1
3
5
6 

Seznamte se se smyčkami JavaScript

Přestože jsme zde zdůraznili různé metody smyčkování JavaScriptu, zvládnutí základů iterace v programování vám je umožňuje flexibilně a sebevědomě používat ve vašich programech. To znamená, že většina těchto smyček JavaScriptu funguje stejným způsobem, pouze s několika rozdíly v obecném přehledu a syntaxích.

Smyčky jsou však základem většiny vykreslování polí na straně klienta. Nebojte se tedy tyto metody opakování libovolně upravovat. Jejich použití se složitějšími poli vám například umožní lépe porozumět smyčkám JavaScript.

Jak používat prohlášení JavaScript if-else

Příkaz if-else je prvním krokem k programování logiky vašich aplikací.

Číst dále

O autorovi