Kuidas kasutada silmuseid JavaScriptis

Loopimine võimaldab teil massiivi iga üksust läbi itereerida, et saaksite igaüks neid kohandada ja väljastada vastavalt soovile. Nagu iga programmeerimiskeele puhul, on ka silmused JavaScripti massiivide renderdamisel ülioluline tööriist.

Mõne praktilise näite abil sukeldume sügavamalt JavaScripti silmuste kasutamise erinevatesse viisidesse.

JavaScripti silmuse juurdekasv ja vähenemine

Täiendav eest silmus on JavaScripti iteratsiooni alus.

See eeldab muutujale määratud algväärtust ja kontrollib lihtsalt tingimuslikku pikkust. Seejärel suurendab või vähendab see väärtus, kasutades ++ või -- operaatoritele.

Selle üldine süntaks näeb välja järgmine:

for (var i = algväärtus; i massiiv [i]}

Nüüd kordame massiivi, kasutades ülaltoodud baasisüntaksit:

anArray = [1, 3, 5, 6];
eest (las i = 0; i console.log (anArray [i])
}
Väljund:
1
3
5
6 

Nüüd töötame ülaltoodud massiivi iga üksusega, kasutades JavaScripti eest silmus:

anArray = [1, 3, 5, 6];
eest (las i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Väljund:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Silmus kordab massiivi järk -järgult klahviga ++ operaator, mis toodab tellitud väljundit.

Kuid kasutades negatiivset (--) operaator, saate väljundi ümber pöörata.

Süntaksid on samad, kuid loogika erineb ülaltoodud kasvavast tsüklist natuke.

Kahandusmeetod töötab järgmiselt.

anArray = [1, 3, 5, 6];
jaoks (olgu i = anArray.length-1; i> = 0; ma--) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Väljund:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Ülaltoodud koodi loogika pole kaugeleulatuv. Massiivi indekseerimine algab nullist. Seega helistamine anArray [i] tavaliselt kordub indeks nullist kolme, kuna ülaltoodud massiiv sisaldab nelja üksust.

Seega on ühe eemaldamine massiivi pikkusest ja tingimuse seadmine suuremaks või võrdseks nulliga, nagu me tegime, üsna mugav - eriti kui kasutate massiivi oma iteratsiooni aluseks.

See hoiab massiiviindeksit ühe võrra vähem kui selle pikkus. Tingimus i> = 0 sunnib loenduse massiivi viimase üksuse peal peatuma.

Seotud: JavaScripti massiivi meetodid, mida peaksite täna õppima

JavaScript iga jaoks

Kuigi te ei saa JavaScripti abil kahandada igaühele, see on sageli vähem sõnakas kui toores eest silmus. See toimib nii, et valite ühe eseme teise järel ilma eelmist meelde jätmata.

Siin on JavaScripti üldine süntaks igaühele:

array.forEach (element => {
tegevus
})

Vaadake, kuidas see praktikas toimib:

olgu anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Väljund:
1
3
5
6 

Nüüd kasutage seda iga elemendi jaoks lihtsa matemaatilise toimingu tegemiseks, nagu te tegite eelmises jaotises:

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

Kuidas kasutada JavaScripti ahelas ...

The eest... sisse silmus JavaScriptis kordab läbi massiivi ja tagastab selle indeksi.

Seda on lihtne kasutada eest... sisse kui olete tuttav Python on silmus kuna need on lihtsuse ja loogika poolest sarnased.

Vaadake selle üldist süntaksi:

for (let element massiivis) {
tegevus 
}

Seega eest... sisse loop määrab massiivi iga elemendi sulgudes deklareeritud muutujale (elemendile).

Seega tagastab elemendi logimine otse silmusesse massiiviindeksi, mitte üksused ise:

olgu anArray = [1, 3, 5, 6];
jaoks (las ma annan massiivi) {
console.log (i)
}
Väljund:
0
1
2
3 

Selle asemel iga üksuse väljastamiseks tehke järgmist.

olgu anArray = [1, 3, 5, 6];
jaoks (las ma annan massiivi) {
console.log (anArray [i])
}
Väljund:
1
3
5
6 

Nagu kahandussilmuse kasutamisel, on ka väljundit lihtne tagasi pöörata eest... sisse:

olgu anArray = [1, 3, 5, 6];
// Eemaldage üks massiivi pikkusest ja määrake see muutujale:
olgu v = anArray.length - 1; 
// Kasutage massiivi iteratsiooni ajal indeksi alusena ülaltoodud muutujat:
jaoks (las ma annan massiivi) {
console.log (anArray [v])
v -= 1;
}
Väljund:
6
5
3
1 

Ülaltoodud kood on loogiliselt sarnane sellele, mida tegite kahandussilmuse kasutamisel. See on siiski loetavam ja selgemalt välja toodud.

JavaScript for... of Loop

The ... jaoks silmus on sarnane eest... sisse silmus.

Siiski, erinevalt eest... sisse, see ei kordu läbi massiiviindeksi, vaid üksused ise.

Selle üldine süntaks näeb välja selline:

jaoks (las i massiivi) {
tegevus 
}

Kasutame seda silmusmeetodit massiivi järkjärguliseks kordamiseks, et näha, kuidas see töötab:

olgu anArray = [1, 3, 5, 6];
eest (olgu iArray) {
console.log (i)
}
Väljund:
1
3
5
6 

Seda meetodit saate kasutada ka massiivi kordamiseks ja väljundi tagasipööramiseks. See on sarnane sellega, kuidas te seda kasutate eest... sisse:

olgu anArray = [1, 3, 5, 6];
olgu v = anArray.length - 1;
jaoks (olgu x anArray) {
console.log (anArray [v])
v -= 1;
}
Väljund:
6
5
3
1

Ahelas töötamiseks toimige järgmiselt.

olgu anArray = [1, 3, 5, 6];
olgu v = anArray.length - 1;
jaoks (olgu x anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Väljund:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Kuigi silmus

The samas tsükkel töötab pidevalt, kuni määratud tingimus on tõene. Seda kasutatakse sageli lõpmatu silmusena.

Näiteks kuna null on alati väiksem kui kümme, töötab allolev kood pidevalt:

las i = 0;
samas (ma <10) {
console.log (4)
}

Ülaltoodud kood logib lõputult "4".

Kordame massiivi abil, kasutades samas silmus:

las i = 0;
samas (i console.log (anArray [i])
i += 1
}
Väljund:
1
3
5
6 

JavaScript ei... samas Loop

The tee... samal ajal loop aktsepteerib ja täidab toimingute komplekti selgesõnaliselt a -s teha süntaks. Seejärel kirjeldatakse selle toimingu tingimusi samas silmus.

See näeb välja selline:

tee {
toimingud
}
samas (
konsitsioon
)

Nüüd kordame massiivi, kasutades seda silmusmeetodit:

tee {
console.log (anArray [i])
i += 1
}
samas (
i )
Väljund:
1
3
5
6 

Tutvuge JavaScripti silmustega

Kuigi oleme siin esile toonud erinevaid JavaScripti loopimismeetodeid, võimaldab iteratsiooni põhitõdede valdamine programmeerimisel neid paindlikult ja enesekindlalt oma programmides kasutada. Sellegipoolest töötavad enamik neist JavaScripti silmustest samamoodi, nende üldjoontes ja süntaksides on vaid mõned erinevused.

Silmused on aga enamiku kliendipoolse massiivi renderdamise aluseks. Nii et võite neid silmusmeetodeid vabalt kohandada, kui soovite. Näiteks nende kasutamine keerukamate massiividega annab teile JavaScripti silmustest parema ülevaate.

JavaScripti if-else avalduse kasutamine

Väide if-else on teie esimene samm rakenduste loogika programmeerimise suunas.

Loe edasi

Autori kohta