JavaScript Essentials: kuidas oma pea ümber silmuste keerutada

Oletame, et soovite käitada funktsiooni bounceBall neli korda. Kuidas sa seda teeksid? Nagu nii?

funktsioon bounceBall () {
  // põrgata siin palli
}
bounceBall ()
bounceBall ()
bounceBall ()
bounceBall ()

See lähenemisviis on suurepärane, kui peate põrgatama ainult mõne korra. Mis juhtub, kui peate sada korda pommima?

Parem viis on läbi aasa.

"For" silmus

For silmus töötab koodiploki nii mitu korda kui soovite. Siin on silmus, mis töötab põrgatavapalli kümme korda:

jaoks (las i = 0; i <10; i ++) {
  bounceBall ()
}

See on jagatud neljaks osaks - algne väljendus, tingimus, järkjärguline avaldus ja avaldus:

jaoks (esialgne avaldus; seisund; juurdekasvu avaldamine) {
  avaldus
}

Enne silmuse loomist peab teil olema avaldus. See avaldus on koodiplokk, mida soovite mitu korda käivitada. Siia saab kirjutada suvalise arvu koodiridu. Võite isegi funktsioone kasutada.

Siit näeb välja for loop, mille väljavõttel on bounceBall:

jaoks (esialgne avaldus; seisund; juurdekasvu avaldamine) {
  bounceBall ()
}

Järgmisena vajate silmuse alustamiseks algset avaldist. Siin kuulutate muutuja. Enamiku silmuste korral nimetatakse seda muutujat i. Samuti on see seatud väärtusele 0.

Kuidas see välja näeb, kui panete esmase ekspressiooni ahelasse:

jaoks (olgu i = 0; tingimus; juurdekasvu väljendus) {
  bounceBall ()
}

Pärast avalduse käivitamist muutujat i suurendatakse või vähendatakse. Te suurendate või vähendate i väärtust juurdekasvu avaldis.

I väärtuse suurendamiseks ühe võrra määrake i ümber nii, et see muutuks i + 1 väärtuseks i = i + 1. Selle ümberpaigutamise lühend on i ++, mida leiate kõige rohkem silmuste jaoks.

I väärtuse vähendamiseks ühe võrra määrate i ümber nii, et see muutuks i-1 väärtuseks i = i - 1. Selle ümberpaigutamise lühend on i--, mis on veel üks variant sellest, mida saate silmuste jaoks kõige rohkem leida .

Ülaltoodud bounceBall näites suurendasime muutuja i iga kord, kui kood käivitatakse:

jaoks (las i = 0; tingimus; i ++) {
  bounceBall ()
}

Kuid kas peaksite i suurendama või vähendama?

Vastus peitub seisukorras. See tingimuslause hindab kas tõeseks või valeks. Kui avaldus osutub tõeseks, siis lause töötab.

Kui avaldus on jooksnud, käivitab JavaScript juurdekasvu avalduse ja kontrollib, kas tingimus hindab uuesti tõeseks. See kordab seda protseduuri, kuni seisund osutub valeks.

Kui seisund on muutunud valeks, jätab JavaScript silmuse ja liigub koos ülejäänud koodiga edasi.

Niisiis, kui te ei soovi, et silmus töötab, saate seada tingimuse, mis hindab kohe valeks:

// See silmus ei tööta, kuna tingimuse väärtus on vale
jaoks (las i = 0; i <0; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('Pall on põrkunud' + kordaBounce + 'korda')
}
// Te näete ainult seda
console.log ('järgmine koodirida')

Kui soovite, et ahel töötaks kaks korda, muudate tingimust nii, et kui juurdekasvu avaldis on kaks korda kulgenud, osutub see valeks.

// See silmus töötab kaks korda
jaoks (las i = 0; i <2; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('Pall on põrkunud' + kordaBounced + 'korda') ")
}
console.log ('järgmine koodirida')

Kui soovite, et silmus töötab kümme korda, siis muudate tingimust nii, et kui väärtuse avaldis on kümme korda kulgenud, osutub see valeks.

// See silmus töötab kümme korda
jaoks (las i = 0; i <10; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('Pall on põrkunud' + kordaBounced + 'korda') ")
}
console.log ('järgmine koodirida')

Lõpmatud silmused

Lõpmatud silmused tekivad siis, kui teie silmuste tingimus on alati tõene. Kui kasutate lõpmatut silmust, ripub teie brauser.

Lõpmatust ahelast taastumiseks peate brauserist jõuliselt loobuma. Maci puhul tähendab see, et klõpsate oma brauseri ikoonil paremklõpsuga ja valite “sunnige väljumine.” Akna masinas avate Windowsi tööhalduri klahvikombinatsiooniga ctrl + alt + del, valite brauseri ja klõpsate “Lõpeta toiming”.

Silmus läbi massiivide

Praktikas ei kirjuta te peaaegu kunagi silmust, mis jookseb kümme korda nagu ülalpool toodud bounceBall näites. Teil on alati võimalus massiivist või objektist läbi lüüa.

Kui massiivi silitate (või itereerite), läbite massiivi iga üksuse üks kord. Selleks võite kasutada tingimuseks pikkust või massiivi:

const fruitBasket = ['banaan', 'pirn', 'guajaav']
// fruitBasket.length on 3
jaoks (las i = 0; i 
// => Korvis on banaan
// => Korvis on pirn
// => Korvis on guajaav

Teine võimalus silmuse kirjutamiseks on kasutada negatiivset juurdekasvu avaldist. See versioon töötab veidi kiiremini kui ülaltoodud silmus, kuid seob massiivi selle asemel otsast üles.

jaoks (las i = fruitBasket.length - 1; i> = 0; i--) {
  console.log ("Korvis on" + fruitBasket [i] + "")
}
// => Korvis on guajaav
// => Korvis on pirn
// => Korvis on banaan

"Massiivi" massiivide silmus

Veel üks (palju parem) viis massiivi silmuseks on kasutada silmuse jaoks .... See on ES6-ga kaasasolev uus silmuse süntaks. See näeb välja selline:

const fruitBasket = ['banaan', 'pirn', 'guajaav']
jaoks (las puuviljakorv) {
  console.log (puuvili)
}
// => Korvis on banaan
// => Korvis on pirn
// => Korvis on guajaav

Silmuse for ... jaoks on eelistatav silmuse standard, kuna see silub massiivi alati üks kord. Pole vaja kirjutada massiivi.length, mis muudab teie koodi lugemise ja hooldamise palju lihtsamaks.

Saate kasutada ... mis tahes korratava objektiga. Need on objektid, mis sisaldavad atribuuti Symbol.iterator. Massiivid on üks selline objekt. Kui lohistate lohistama tühja massiivi, näete, et selle üheks võtmeks on Symbol.iterator (võtme massiivi __proto__ sees):

Loogika silmustes

Saate kasutada if / else või mõnda muud loogikat.

Oletagem näiteks, et teil on numbrite loend ja soovite luua teise numbriloendi, mis on väiksem kui 20.

Selle eesmärgi saavutamiseks läbige kõigepealt numbrid.

konstandenumbrid = [25, 22, 12, 56, 8, 18, 34]
jaoks (las num numbrid) {
  // tee siin midagi
}

Siin soovite kontrollida, kas iga arv on väiksem kui 20.

konstandenumbrid = [25, 22, 12, 56, 8, 18, 34]
jaoks (las num numbrid) {
  if (num <20) {
    // tee midagi
  }
}

Kui num on väiksem kui 20, soovite selle lisada mõnda teise massiivi. Selleks kasutate tõukemeetodit.

konstandenumbrid = [25, 22, 12, 56, 8, 18, 34]
lase väiksemThan20 = []
jaoks (las num numbrid) {
  if (num <20) {
    väiksemThan20.push (num)
  }
}
// väiksemThan20 === [12, 8, 18]

Pakkimine üles

Loopi silmust kasutatakse siis, kui soovite sama ülesannet (või ülesannete komplekti) mitu korda täita.

Teil oleks kood harva täpselt kümme korda läbi. Tavaliselt soovite selle asemel massiivi lükata.

Massiivi täpselt ühe korra läbimiseks võite kasutada silmuse for ..., mida on palju lihtsam kirjutada ja mõista kui silmuse traditsioonilist.

Pidage meeles, et silmustesse saate kirjutada suvalises koguses loogikat. Võite kasutada funktsioone, kui / else avaldusi, või isegi kasutada silmuseid silmustes.

Kui teile see artikkel meeldis, siis on teil tore õppida õppima JavaScripti - kursust, mis aitab teil Javascripti abil tõelisi komponente nullist ehitada. Kui soovite teada saada JavaScripti kohta lisateabe saamiseks klõpsake siin.

(Oh, muide, kui teile see artikkel meeldis, oleksin väga tänulik, kui saaksite seda jagada. )

Algselt avaldati saidil zellwk.com.