JavaScript for-lause

Määrittely ja käyttö

for-lause luo silmukan, joka suorittaa koodia niin kauan kuin ehto on totta.

Silmukka jatkuu suorittamistaan niin kauan kuin ehto on totta. Se lopettaa, kun ehto muuttuu epätodelliseksi.

JavaScript tukee erilaisia silmukkamalleja:

  • for - moninkertainen silmukka
  • for/in - kulkee objektin ominaisuuksien läpi
  • for/of - Toista läpi iteroidun objektin arvot
  • while - Toista koodipalikkaa, kunnes ehto on totuusarvo
  • do/while - Toista koodipalikkaa kerran ja sitten toista toisto, kunnes ehto on totuusarvo

Vinkki:Käytä break-lauseketta poistuaksesi toistosta, käytä continue-lauseketta ohittaaksesi toistossa olevan arvon.

Esimerkki

Toista koodipalikkaa viisi kertaa:

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Kokeile itse

Sivun alhaalla on lisää TIY-esimerkkejä.

Syntaksi

for (statement 1; statement 2; statement 3) {
  Suoritettava koodipalikka
}

Parametrin arvo

Parametri Kuvaus
statement1

Valinnainen. Suoritetaan ennen toiston (koodipalikan) alkua. Tavallisesti tämä lauseke käytetään laskurimuuttujan alustamiseen. Jos haluat alustaa useita arvoja, erottele ne pilkulla.

Kommentti:Tämä parametri voidaan jättää pois. Mutta älä jätä pois colons ";"
statement2

Valinnainen. Määritellään toiston (koodipalikan) suoritusolo. Tavallisesti tämä lauseke käytetään arvioimaan laskurimuuttujan ehtoa. Jos palauttaa true, toisto aloitetaan uudelleen, jos palauttaa false, toisto päättyy.

Kommentti:Tämä parametri voidaan jättää pois. Mutta älä jätä pois colons ";". Lisäksi, jos jätät tämän parametrin pois, sinun täytyy tarjota break-komento toistoon. Muuten toisto ei koskaan pääty, mikä voi aiheuttaa selaimen kaatumisen.
statement3

Valinnainen. Suoritetaan joka kerta toiston (koodipalikan) jälkeen. Tavallisesti tämä lauseke käytetään laskurimuuttujien lisäämiseen tai vähentämiseen.

Kommentti:Voit jättää parametrin pois (esimerkiksi lisätä/vähentää arvoa toistossa).

Tekninen yksityiskohta

JavaScript-versio: ECMAScript 1

Lisää esimerkkejä

Esimerkki

Toisto käy läpi taulukon indeksejä ja kerää autojen nimiä cars-taulukosta:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Kokeile itse

Esimerkki selityksestä:

  • Asetetaan ensin muuttuja toiston alkamisen yhteydessä (var i = 0;)
  • Määritellään sitten toiston suoritusolo. Toisto jatkuu niin kauan kuin muuttuja on pienempi kuin taulukon pituus (eli 4)
  • Muuttuja lisätään yhdellä (i++) joka kerran toiston suoritettaessa
  • Kun muuttuja ei ole enää pienempi kuin 4 (taulukon pituus), ehdotus on epätosi, ja toisto päättyy

Esimerkki

Alusta useita arvoja ensimmäisessä parametrissa:

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

Kokeile itse

Esimerkki

Ohita ensimmäinen parametri (aseta arvo ennen toiston alkua):

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

Kokeile itse

Esimerkki

Käytä continue-lauseketta - toistokoodipalikka, mutta ohita "3" arvo:

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    jatka;
  }
  text += "The number is " + i + "<br>";
}

Kokeile itse

Esimerkki

Käytä break-lauseen - suorita koodi silmukan aikana, mutta poistu silmukasta, kun muuttuja i on "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "The number is " + i + "<br>";
}

Kokeile itse

Esimerkki

Ohita toinen parametri. Tässä esimerkissä käytämme myös break-lauseen poistuaksemme silmukasta, kun i on "3" (jos ohitetaan toinen parametri, silmukassa täytyy olla break. Muuten silmukka ei koskaan päättynyt, ja selain kaatuisi):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

Kokeile itse

Esimerkki

Lajittele arvot laskuvinä indekseissä (negatiivinen lisäys):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

Kokeile itse

Esimerkki

Ohita viimeinen parametri ja lisää arvo silmukan sisällä:

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

Kokeile itse

Esimerkki

Kierretään NodeList-objektin solmuja ja muutetaan luettelossa olevien kaikki <p>-elementtien taustaväri:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

Kokeile itse

Esimerkki

Sisäkkäisten silmukoiden esimerkki (silmukoiden sisällä oleva silmukka):

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

Kokeile itse

Selaimen tuki

Lausunnot Chrome IE Firefox Safari Opera
for Tuki Tuki Tuki Tuki Tuki

Liittyvät sivut

JavaScript ohje:JavaScriptin for-silmukka

JavaScriptin viittauskirja:JavaScript for ... in -lause

JavaScriptin viittauskirja:JavaScriptin break-lause

JavaScriptin viittauskirja:JavaScriptin continue-lause

JavaScriptin viittauskirja:JavaScriptin while-lause