Ako používať slučky v JavaScripte

Opakovanie vám umožňuje iterovať každú položku v poli, aby ste si každú z nich mohli prispôsobiť a vydať tak, ako sa vám páči. Ako každý programovací jazyk, aj slučky sú zásadným nástrojom na vykresľovanie polí v JavaScripte.

S pomocou niekoľkých praktických príkladov sa ponoríme hlbšie do rôznych spôsobov, ako môžete slučky v JavaScripte používať.

Inkrementálne a dekrementálne pre slučku v JavaScripte

Inkrementálne pre loop je základom iterácie v JavaScripte.

Predpokladá počiatočnú hodnotu priradenú premennej a spustí jednoduchú kontrolu podmienenej dĺžky. Potom túto hodnotu zvýši alebo zníži pomocou ++ alebo -- operátorov.

Takto vyzerá jeho všeobecná syntax:

pre (var i = počiatočná hodnota; i pole [i]}

Teraz si zopakujme pole pomocou vyššie uvedenej základnej syntaxe:

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

Teraz budeme pracovať s každou položkou vo vyššie uvedenom poli pomocou JavaScriptu pre slučka:

anArray = [1, 3, 5, 6];
pre (nech i = 0; i 





instagram viewer

console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Výkon:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Smyčka iteruje poľom postupne s príponou ++ operátor, ktorý produkuje objednaný výstup.

Ale pomocou negatívu (--), môžete výstup obrátiť.

Syntaxe sú rovnaké, ale logika sa trochu líši od vyššie uvedenej inkrementálnej slučky.

Takto funguje dekrementálna metóda:

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

Logika za kódom vyššie nie je pritiahnutá za vlasy. Indexovanie poľa začína od nuly. Takže volanie pole [i] zvyčajne sa opakuje od nuly do troch, pretože vyššie uvedené pole obsahuje štyri položky.

Odstrániť jeden z dĺžky poľa a nastaviť podmienku na väčšiu alebo rovnakú nulu, ako sme urobili, je teda veľmi praktické - obzvlášť keď pole použijete ako základ svojej iterácie.

Udržiava index poľa o jeden menší, ako je jeho dĺžka. Kondícia i> = 0 potom prinúti počítanie zastaviť sa na poslednej položke v poli.

Súvisiace: Metódy poľa JavaScript, ktoré by ste dnes mali ovládať

JavaScript pre každú

Aj keď pomocou JavaScript nemôžete dekrementovať pre každý, je často menej podrobný ako surový pre slučka. Funguje to tak, že vyberáte jednu položku za druhou bez toho, aby ste si pamätali predchádzajúcu.

Tu je všeobecná syntax jazyka JavaScript pre každý:

array.forEach (element => {
akcie
})

Pozrite sa, ako to funguje v praxi:

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

Teraz to použite na spustenie jednoduchej matematickej operácie pre každú položku, ako ste to urobili v predchádzajúcej časti:

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

Ako používať slučku... v slučke JavaScript

The pre... v loop v JavaScripte iteruje cez pole a vracia jeho index.

Zistíte, že používanie je veľmi jednoduché pre... v ak ste oboznámení Slučka Python's for pretože sú podobné z hľadiska jednoduchosti a logiky.

Pozrite sa na jeho všeobecnú syntax:

pre (nechaj prvok v poli) {
akcie 
}

Takže pre... v loop priradí každú položku v poli premennej (prvku) deklarovanej v zátvorke.

Protokolovanie prvku priamo do slučky teda vráti index poľa, a nie samotné položky:

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

Namiesto toho chcete výstup každej položky:

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

Rovnako ako pri použití dekrementálnej slučky je tiež ľahké obrátiť výstup pomocou pre... v:

nech anArray = [1, 3, 5, 6];
// Odstráňte jeden z dĺžky poľa a priraďte ho k premennej:
nech v = anArray.length - 1; 
// Pri iterácii poľa použite vyššie uvedenú premennú ako indexový základ:
for (let i in anArray) {
console.log (anArray [v])
v -= 1;
}
Výkon:
6
5
3
1 

Vyššie uvedený kód je logicky podobný tomu, čo ste urobili pri použití dekrementálnej slučky. Je to však čitateľnejšie a explicitnejšie načrtnuté.

JavaScript pre... slučky

The pre... z slučka je podobná ako pre... v slučka.

Avšak na rozdiel od pre... v, iteruje sa nielen prostredníctvom indexu poľa, ale samotných položiek.

Jeho všeobecná syntax vyzerá takto:

pre (nech i poľa) {
akcie 
}

Použime túto metódu opakovania na postupné opakovanie poľa, aby sme zistili, ako funguje:

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

Túto metódu môžete použiť aj na iteráciu poľa a obrátenie výstupu. Je to podobné, ako to robíte pomocou pre... v:

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

Ak chcete pracovať v rámci cyklu:

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ýkon:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

The While Loop

The kým slučka beží nepretržite, pokiaľ špecifikovaná podmienka zostane pravdivá. Často sa používa ako nekonečná slučka.

Pretože napríklad nula je vždy menšia ako desať, nižšie uvedený kód beží nepretržite:

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

Vyššie uvedený kód zaznamenáva „4“ nekonečne.

Poďme iterovať cez pole pomocou kým slučka:

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

JavaScript do... while Loop

The robiť... kým loop prijíma a vykonáva sadu akcií explicitne vo vnútri súboru a urobiť syntax. Potom uvedie podmienku tejto akcie vo vnútri súboru kým slučka.

Takto to vyzerá:

urobiť {
akcie
}
zatiaľ čo (
konzistencia
)

Teraz zopakujme pole pomocou tejto metódy cyklovania:

urobiť {
console.log (anArray [i])
i += 1
}
zatiaľ čo (
i )
Výkon:
1
3
5
6 

Zoznámte sa so slučkami JavaScript

Aj keď sme tu vyzdvihli rôzne metódy vytvárania slučiek JavaScript, zvládnutie základov iterácie v programovaní vám ich umožní flexibilne a sebaisto používať vo vašich programoch. To znamená, že väčšina týchto slučiek JavaScript funguje rovnakým spôsobom, iba s niekoľkými rozdielmi v ich všeobecnom prehľade a syntaxach.

Slučky sú však základom väčšiny vykresľovania polí na strane klienta. Nebojte sa teda tieto metódy opakovania ľubovoľne doladiť. Ich použitie s komplexnejšími poľami vám napríklad umožní lepšie porozumieť slučkám JavaScript.

Ako používať vyhlásenie JavaScript v prípade, že inak

Príkaz if-else je vašim prvým krokom k programovaniu logiky vo vašich aplikáciách.

Čítajte ďalej

O autorovi