JavaScript Essentials: kuinka kietoa pääsi ympäri silmukoita

Oletetaan, että haluat suorittaa bounceBall-toiminnon neljä kertaa. Kuinka tekisit sen? Kuten tämä?

toiminto bounceBall () {
  // pomppia pallo täällä
}
bounceBall ()
bounceBall ()
bounceBall ()
bounceBall ()

Tämä lähestymistapa on hieno, jos haluat pomppia pallon vain muutaman kerran. Mitä tapahtuu, jos joudut pomppimaan palloa sata kertaa?

Parempi tapa on silmukan kautta.

"For" -silmukka

For-silmukka ajaa koodilohkon niin monta kertaa kuin haluat. Tässä on silmukka, joka kulkee bounceBall-kymmenen kertaa:

varten (olkoon i = 0; i <10; i ++) {
  bounceBall ()
}

Se on jaettu neljään osaan - alkuperäiseen ilmaisuun, ehtoon, kasvavaan ilmaisuun ja lauseeseen:

varten (alkuperäinenExpression; kunto; lisäysExpression) {
  selvitys
}

Ennen kuin silmukka, sinulla on oltava lausunto. Tämä lause on koodilohko, jonka haluat suorittaa useita kertoja. Voit kirjoittaa minkä tahansa määrän riviä koodia tähän. Voit jopa käyttää toimintoja.

Tässä on for-silmukka näyttää, kun bounceBall on sen lausunto:

varten (alkuperäinenExpression; kunto; lisäysExpression) {
  bounceBall ()
}

Seuraavaksi tarvitset alkulausekkeen silmukan aloittamiseksi. Tässä ilmoitat muuttujan. Useimmissa silmukoissa tätä muuttujaa kutsutaan i: ksi. Se on myös asetettu arvoon 0.

Näin näyttää siltä, ​​kun laitat alkuperäisen ilmaisun for-silmukkaan:

varten (olkoon i = 0; ehto; lisäysExpression) {
  bounceBall ()
}

Lauseen suorittamisen jälkeen muuttujaa i kasvatetaan tai vähennetään. Voit kasvattaa tai vähentää i: n arvoa inkrementtilausekkeessa.

Jos haluat lisätä i: n arvoa yhdellä, määrität uudelleen i: n siten, että siitä tulee i + 1, kun i = i + 1. Tämän uudelleenosoituksen lyhenne on i ++, mitä löydät useimmista silmukoista.

Jos haluat pienentää i: n arvoa yhdellä, määritä uudelleen i siten, että siitä tulee i - 1, kun i = i - 1. Lyhennys sanalle i on i--, joka on toinen muunnelma siitä, mitä löydät useimmista silmukoista. .

Yllä olevassa esimerkissä bounceBall korotimme muuttujaa i yhdellä kertaa, kun koodi käy:

varten (olkoon i = 0; ehto; i ++) {
  bounceBall ()
}

Mutta pitäisikö sinun lisätä tai vähentää sitä?

Vastaus on kunnossa. Tämä ehtolause arvioidaan joko totta tai väärin. Jos lausunto arvioidaan totta, lause suoritetaan.

Kun käsky on kulunut, JavaScript suorittaa lisäyslausekkeen ja tarkistaa, arvioidaanko ehto jälleen totta. Se toistaa tätä prosessia, kunnes ehto muuttuu vääriksi.

Kun ehto on arvioitu vääriksi, JavaScript ohittaa silmukan ja siirtyy eteenpäin muun koodin kanssa.

Joten, jos et halua, että silmukka suoritetaan, voit asettaa ehdon, joka arvioidaan vääriksi välittömästi:

// Tämä silmukka ei toimi, koska ehto arvioidaan vääriksi
varten (olkoon i = 0; i <0; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('Pallo on pomppinut' + kertaaPuhelut + 'kertaa')
}
// Näet vain tämän
console.log ('seuraava koodirivi')

Jos haluat silmukan toimivan kahdesti, muutat ehtoa siten, että se arvioidaan vääriksi, kun lisäyslauseke on suoritettu kahdesti.

// Tämä silmukka toimii kahdesti
varten (olkoon i = 0; i <2; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('Pallo on pomppinut' + kertaaBounced + 'kertaa') ")
}
console.log ('seuraava koodirivi')

Jos haluat silmukan käyvän kymmenen kertaa, muutat ehtoa siten, että se arvioidaan vääriksi, kun lisäyslauseke on käynyt kymmenen kertaa.

// Tämä silmukka toimii kymmenen kertaa
varten (olkoon i = 0; i <10; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('Pallo on pomppinut' + kertaaBounced + 'kertaa') ")
}
console.log ('seuraava koodirivi')

Äärettömät silmukat

Äärettömiä silmukoita esiintyy, kun silmukoitasi koskevat ehdot palaavat aina totta. Selaimesi jumittuu, jos sinulla on ääretön silmukka.

Palautuaksesi äärettömästä silmukasta sinun on lopetettava selaimesi voimakkaasti. Macissa tämä tarkoittaa sitä, että napsautat hiiren oikealla painikkeella selaimesi kuvaketta ja valitset ”pakota lopettamaan”. Ikkunan koneessa avaat Windowsin Tehtävienhallinnan näppäimillä ctrl + alt + del, valitset selaimen ja napsautat “Lopeta tehtävä”.

Silmukka ryhmien läpi

Käytännössä et milloinkaan kirjoita silmukkaa, joka kulkee kymmenen kertaa kuten yllä olevassa bounceBall-esimerkissä. Silmukit aina taulukon tai objektin läpi.

Kun siirrät (tai iteroit) taulukon läpi, käydät jokaisen taulukon kohteen läpi kerran. Voit käyttää niin pituutta tai taulukkoa ehtona:

const fruitBasket = ['banaani', 'päärynä', 'guajava']
// fruitBasket.length on 3
varten (olkoon i = 0; i 
// => Korissa on banaania
// => Korissa on päärynä
// => Korissa on guajava

Vaihtoehtoinen tapa kirjoittaa tämä silmukalle on käyttää negatiivista lisäyslauseketta. Tämä versio toimii hieman nopeammin kuin yllä oleva silmukka, mutta silmukoi taulukon sen sijaan lopusta.

varten (olkoon i = fruitBasket.length - 1; i> = 0; i--) {
  console.log ("Korissa on" + fruitBasket [i] + "")
}
// => Korissa on guajava
// => Korissa on päärynä
// => Korissa on banaania

Silmukoiden läpi ryhmien kanssa "for"

Vielä yksi (paljon parempi) tapa silmukoida taulukon läpi on käyttää ... silmukkaa. Tämä on uusi silmukka-syntaksi, joka tulee ES6: n mukana. Se näyttää tältä:

const fruitBasket = ['banaani', 'päärynä', 'guajava']
(anna hedelmien hedelmätKori) {
  console.log (hedelmät)
}
// => Korissa on banaania
// => Korissa on päärynä
// => Korissa on guajava

Silmukan for ... on parempi kuin silmukkastandardi, koska se silmukoi aina taulukon kerran. Ei tarvitse kirjoittaa taulukon pituutta, mikä tekee koodisi lukemisen ja ylläpidon paljon helpommaksi.

Voit käyttää ... kaikissa toistettavissa olevissa kohteissa. Nämä ovat esineitä, jotka sisältävät Symbol.iterator -ominaisuuden. Ryhmät ovat yksi tällainen kohde. Jos console.log tyhjää taulukkoa, huomaat, että sillä on Symbol.iterator yhtenä avaimista (taulukon __proto__-avaimessa):

Sisäänkirjautuminen silmukoihin

Voit käyttää if / else tai mitä tahansa muuta logiikkaa for for-silmukassa.

Oletetaan esimerkiksi, että sinulla on luettelo numeroista ja haluat luoda toisen luettelon numeroista, jotka ovat pienempiä kuin 20.

Tämän tavoitteen saavuttamiseksi kiertää ensin numerot.

konstoluvut = [25, 22, 12, 56, 8, 18, 34]
(laske numeroita) {
  // tee jotain täällä
}

Täällä haluat tarkistaa, onko kukin numero pienempi kuin 20.

konstoluvut = [25, 22, 12, 56, 8, 18, 34]
(laske numeroita) {
  if (num <20) {
    // tee jotain
  }
}

Jos num on pienempi kuin 20, haluat lisätä sen toiseen taulukkoon. Voit käyttää niin push-menetelmää.

konstoluvut = [25, 22, 12, 56, 8, 18, 34]
anna pienempiThan20 = []
(laske numeroita) {
  if (num <20) {
    smallerThan20.push (num)
  }
}
// pienempiThan20 === [12, 8, 18]

Käärimistä

A-silmukkaa käytetään, kun haluat suorittaa saman tehtävän (tai tehtäväjoukon) useita kertoja.

Kiertoajoittaisit koodia harvoin kymmenen kertaa. Yleensä haluat sen sijaan käydä läpi taulukon.

Voit silmukoida taulukon läpi tarkalleen kerran käyttämällä silmukan for ... -sivua, jota on paljon helpompi kirjoittaa ja ymmärtää kuin perinteiseen silmukkaan.

Muista, että voit kirjoittaa minkä tahansa määrän logiikkaa silmukoihin. Voit käyttää toimintoja, jos / else-lauseita, tai jopa käyttää silmukoita silmukoissa.

Jos rakastat tätä artikkelia, rakastat oppimaan Opi JavaScript - kurssi, jonka avulla voit oppia rakentamaan oikeita komponentteja tyhjästä Javascriptin avulla. Napsauta tätä saadaksesi lisätietoja Learn JavaScriptista, jos olet kiinnostunut.

(Voi, muuten, jos pidit tästä artikkelista, olisin kiitollinen siitä, jos voisit jakaa sen. )

Alun perin julkaistu osoitteessa zellwk.com.