Kako uporabljati zanke v JavaScript

Zankanje vam omogoča, da ponavljate po vsakem elementu v nizu, tako da lahko vsakega od njih prilagodite in prikažete, kot želite. Kot pri vsakem programskem jeziku so zanke ključno orodje tudi za upodabljanje nizov v JavaScriptu.

S pomočjo nekaj praktičnih primerov se potopimo globlje v različne načine uporabe zank v JavaScript.

Inkrementalno in dekrementalno za zanko v JavaScript

Inkrementalno za zanka je osnova ponovitve v JavaScriptu.

Predpostavlja začetno vrednost, dodeljeno spremenljivki, in izvede preprosto preverjanje pogojne dolžine. Nato to vrednost poveča ali zmanjša z uporabo ++ ali -- operaterji.

Tako izgleda njegova splošna skladnja:

for (var i = začetna vrednost; i matrika [i]}

Zdaj pa ponovimo po nizu z uporabo zgornje osnovne sintakse:

anArray = [1, 3, 5, 6];
za (naj bo i = 0; i console.log (anArray [i])
}
Izhod:
1
3
5
6 

Zdaj bomo z vsakim elementom v zgornji matriki upravljali z uporabo JavaScripta za zanka:

anArray = [1, 3, 5, 6];
za (naj bo i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Izhod:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Zanka se postopoma ponavlja z matrico ++ operater, ki proizvaja urejen izhod.

Toda z uporabo negativnega (--), lahko izhod obrnete.

Skladnje so enake, vendar je logika nekoliko drugačna od zgornje povečevalne zanke.

Dekrementalna metoda deluje tako:

anArray = [1, 3, 5, 6];
for (naj bo i = anArray.length-1; i> = 0; jaz--) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Izhod:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Logika zgornje kode ni pretirana. Indeksiranje niza se začne od nič. Torej kliče anArray [i] običajno se ponavlja od nič indeksa do tri, saj zgornja matrika vsebuje štiri postavke.

Tako je odstranitev enega iz dolžine matrike in nastavitev pogoja na večjo ali enako nič, kot smo to storili, precej priročno - še posebej, če uporabite matriko kot osnovo svoje ponovitve.

Hrani indeks matrike za eno manj kot njegovo dolžino. Pogoj i> = 0 nato prisili, da se štetje ustavi pri zadnjem elementu v matriki.

Povezano: Metode nizov JavaScript, ki bi jih morali obvladati danes

JavaScript za vsakega

Čeprav z uporabo JavaScripta ne morete zmanjšati za vsakogarje pogosto manj podroben kot surov za zanka. Deluje tako, da izbere enega predmeta za drugim, ne da bi si prejšnjega zapomnil.

Tu je splošna sintaksa JavaScripta za vsakogar:

array.forEach (element => {
dejanje
})

Oglejte si, kako to deluje v praksi:

naj bo anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Izhod:
1
3
5
6 

Zdaj uporabite to za izvedbo preproste matematične operacije pri vsakem elementu, kot ste to storili v prejšnjem razdelku:

naj bo anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Izhod:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Kako uporabljati for... in Loop JavaScript

The za... in zanka v JavaScriptu ponavlja skozi matriko in vrne njen indeks.

Z lahkoto ga boste uporabljali za... in če ste seznanjeni Python je zanka for saj sta si po enostavnosti in logiki podobna.

Oglejte si njeno splošno sintakso:

for (naj element v matriki) {
dejanje 
}

Torej za... in zanka dodeli vsako postavko v matriki spremenljivki (elementu), deklarirani v oklepaju.

Tako beleženje elementa neposredno v zanki vrne indeks niza in ne samih elementov:

naj bo anArray = [1, 3, 5, 6];
for (pusti me v matriki) {
console.log (i)
}
Izhod:
0
1
2
3 

Če želite namesto tega prikazati vsak element:

naj bo anArray = [1, 3, 5, 6];
for (pusti me v matriki) {
console.log (anArray [i])
}
Izhod:
1
3
5
6 

Tako kot pri uporabi dekrementalne zanke je tudi enostavno obrniti izhod z uporabo za... in:

naj bo anArray = [1, 3, 5, 6];
// Odstranimo eno iz dolžine matrike in jo dodelimo spremenljivki:
naj bo v = anArray.length - 1; 
// Uporabite zgornjo spremenljivko kot osnovo indeksa med ponavljanjem po nizu:
for (pusti me v matriki) {
console.log (anArray [v])
v -= 1;
}
Izhod:
6
5
3
1 

Zgornja koda je logično podobna tistemu, kar ste storili pri uporabi dekrementalne zanke. Je pa bolj berljiv in izrecno opisan.

JavaScript za... of Loop

The za... od zanka je podobna za... in zanka.

Vendar za razliko od za... in, ne pregleduje indeksa matrike, ampak elemente same.

Njegova splošna skladnja izgleda tako:

for (naj iz polja) {
dejanje 
}

Uporabimo to metodo zanke za postopno ponavljanje po nizu, da vidimo, kako deluje:

naj bo anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log (i)
}
Izhod:
1
3
5
6 

To metodo lahko uporabite tudi za ponovitev matrike in razveljavitev izhoda. Podobno je, kako to počnete z uporabo za... in:

naj bo anArray = [1, 3, 5, 6];
naj bo v = anArray.length - 1;
for (naj bo x anArray) {
console.log (anArray [v])
v -= 1;
}
Izhod:
6
5
3
1

Za delovanje v zanki:

naj bo anArray = [1, 3, 5, 6];
naj bo v = anArray.length - 1;
for (naj bo x anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Izhod:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Zanka medtem ko

The medtem zanka teče neprekinjeno, dokler določen pogoj ostane resničen. Pogosto se uporablja kot neskončna zanka.

Na primer, ker je nič vedno manj kot deset, se spodnja koda neprekinjeno izvaja:

naj bo i = 0;
medtem ko (i <10) {
console.log (4)
}

Zgornja koda neskončno beleži "4".

Ponovimo po nizu z uporabo medtem zanka:

naj bo i = 0;
medtem ko (i console.log (anArray [i])
i += 1
}
Izhod:
1
3
5
6 

JavaScript naredi... medtem ko je zanka

The naredi... medtem zanka sprejme in izvede niz dejanj izrecno znotraj a naredi sintakso. Nato navede pogoj za to dejanje v medtem zanka.

Takole izgleda:

naredi {
dejanja
}
medtem (
vesti
)

Zdaj pa ponovimo po nizu s to metodo zanke:

naredi {
console.log (anArray [i])
i += 1
}
medtem (
i )
Izhod:
1
3
5
6 

Seznanite se z zankami JavaScript

Čeprav smo tukaj poudarili različne metode zankanja JavaScript, vam obvladovanje osnov iteracije pri programiranju omogoča fleksibilno in samozavestno uporabo v programih. Kljub temu večina teh zank JavaScript deluje na enak način, le z nekaj razlikami v njihovem splošnem orisu in skladnjah.

Zanke so osnova večine upodabljanja nizov na strani odjemalca. Zato lahko te metode zvijanja poljubno prilagodite. Na primer, če jih uporabite z bolj zapletenimi matrikami, bolje razumete zanke JavaScript.

Kako uporabiti izjavo JavaScript if-else

Stavek if-else je vaš prvi korak k programiranju logike v vaših aplikacijah.

Preberite Naprej

O avtorju