JavaScript For-silmukka

Silmukat voivat suorittaa koodikohdan useita kertoja.

JavaScript silmukat

Jos sinun täytyy suorittaa koodia useita kertoja ja käyttää eri arvoja kerrallaan, silmukka (loop) on erittäin kätevä.

Yleensä kohtaamme esimerkkejä, joissa käytetään taulukoita:

Ei tarvitse kirjoittaa näin:

text += autojen[0] + "<br>"; 
text += autojen[1] + "<br>"; 
text += autojen[2] + "<br>"; 
text += autojen[3] + "<br>"; 
text += autojen[4] + "<br>"; 
text += cars[5] + "<br>";

Voit kirjoittaa näin:

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

Kokeile itse

Eri tyypit silmukoita

JavaScript tukee erilaisia silmukoita:

  • for - Suorita koodikappale useita kertoja
  • for/in - Käy läpi objektin ominaisuuksia
  • while - Suorita koodikappale silmukan ehdollisuuden ollessa true
  • do/while - Suorita koodikappale silmukan ehdollisuuden ollessa true

For-silmukka

For-silmukka on työkalu, jota käytetään usein silmukoiden luomiseen.

For-silmukan syntaksi on seuraava:

for (Lause 1; Lause 2; Lause 3) {
     Suoritettava koodikappale
}

Lause 1 suoritetaan silmukan (koodikappaleen) alussa.

Lause 2 määrittää silmukan (koodikappaleen) suoritusedellytyksen.

Lause 3 suoritetaan silmukan (koodikappaleen) jokaisen suorituksen jälkeen.

Esimerkki

for (i = 0; i < 5; i++) {
     text += "Luku on " + i + "<br>";
}

Kokeile itse

Yllä olevasta koodista voit oppia:

Lause 1 asettaa muuttujan silmukan alussa (var i = 0).

Lause 2 määrittää silmukan suoritusedellytyksen (i on pienempi kuin 5).

Lause 3 lisää arvoa koodikappaleen jokaisen suorituksen jälkeen (i++).

Lause 1

Yleensä käytät lauseen 1 alustamaan silmukan käytössä olevat muuttujat (i = 0).

Mutta tilanne ei aina ole tällainen, JavaScript ei välitä. Lause 1 on myös valinnainen.

Voit alustaa useita arvoja lauseessa 1 ( pilkulla erotettuna):

Esimerkki

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

Kokeile itse

Ja voit myös jättää lauseen 1 pois (esim. asettaa arvon silmukan alussa):

Esimerkki

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

Kokeile itse

Lause 2

Yleensä lause 2 käytetään alkuperäisen muuttujan ehdollisen laskemiseen.

Mutta tilanne ei aina ole tällainen, JavaScript ei välitä. Lause 2 on myös valinnainen.

Jos lause 2 palauttaa true, silmukka alkaa uudelleen, jos palauttaa false, silmukka päätyy.

Jos lause 2 jätetään pois, silmukkaan on tarjottava break. Jos et tee niin, silmukka ei koskaan pääty. Lue seuraavassa luvussa lisää breakista.

Lause 3

Yleensä lause 3 lisää alkuperäisen muuttujan arvoa.

Mutta tilanne ei aina ole tällainen, JavaScript ei välitä. Lause 3 on myös valinnainen.

Lause 3 voi tehdä mitä tahansa, kuten negatiivinen lisäys (i--), positiivinen lisäys (i = i + 15) tai mikä tahansa muu.

Lauseke 3 voidaan myös jättää pois (esimerkiksi, kun lisäät arvoa silmukan sisällä):

Esimerkki

var i = 0;
var len = cars.length;
for (; i < len; ) { 
    text += cars[i] + "<br>";
      i++;
}

Kokeile itse

For/In-silmukan

JavaScript for/in Lauseke käy läpi objektin ominaisuudet:

Esimerkki

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

Kokeile itse

While-silmukan

Opimme seuraavassa luvussa while-silmukan ja do/while-silmukan.

Oppikirjat

Lisätietoja JavaScript for-lausekeLisätietoja, lue JavaScript-ylpeä oppituntiin liittyvä sisältö:

ECMAScript-iteraatiolauseet
Iteratiolauseet, joita kutsutaan myös silmukkalauseiksi, ovat neljä ECMAScript tarjoamaa iteratiolauseita.