JavaScript silmukan aikana

Sisällysluettelo

    Näytä sisällysluettelo

Silmukat voivat suorittaa koodilohkon niin kauan kuin määritetty ehto on tosi.

while-silmukka

while-silmukka kiertää koodilohkon läpi niin kauan kuin määritetty ehto on tosi.

Syntaksi

while (condition) {
      // code block to be executed
 }

Esimerkki

Seuraavassa esimerkissä silmukan koodi suoritetaan yhä uudelleen ja uudelleen, niin kauan kuin muuttuja (i) on pienempi kuin 10:

Esimerkki

while (i < 10) {
    text += "The number is " + i;
    i++;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript While Loop</h2>

<p id="demo"></p>

<script>
let text = "";
let i = 0;
while (i < 10) {
  text += "<br>The number is " + i;
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Jos unohdat suurentaa ehdossa käytettyä muuttujaa, silmukka ei lopu koskaan. Tämä kaataa selaimesi.

do while -silmukka

do while-silmukka on while-silmukan muunnos. Tämä silmukka tulee Suorita koodilohko kerran, ennen kuin tarkistat, onko ehto tosi, niin se tekee toista silmukkaa niin kauan kuin ehto on tosi.

Syntaksi

do {
      // code block to be executed
}
while (condition);

Esimerkki

Alla olevassa esimerkissä käytetään do while -silmukkaa. Silmukka tulee aina olemaan suoritetaan vähintään kerran, vaikka ehto olisi epätosi, koska koodilohko suoritetaan ennen ehdon testaamista:

Esimerkki

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Do While Loop</h2>

<p id="demo"></p>

<script>
let text = ""
let i = 0;

do {
  text += "<br>The number is " + i;
  i++;
}
while (i < 10);  

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Älä unohda suurentaa ehdossa käytettyä muuttujaa, muuten kierre ei lopu koskaan!

for ja while vertailu

Jos olet lukenut edellisen luvun for-silmukasta, huomaat, että while-silmukka on sama kuin for-silmukka, käsky 1 ja lause 3 jätetty pois.

Tämän esimerkin silmukka käyttää for-silmukkaa auton keräämiseen nimet autovalikoimasta:

Esimerkki

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for (;cars[i];) {
    text += cars[i];
   
i++;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

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

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Tämän esimerkin silmukka käyttää while-silmukkaa kerätäkseen autojen nimet autovalikoimasta:

Esimerkki

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";
 
 while (cars[i]) {
    text += cars[i];
   
i++;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
while (cars[i]) {
  text += cars[i] + "<br>";
  i++;
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>