JavaScript medan Loop


Innehållsförteckning

    Visa innehållsförteckning


Slingor kan exekvera ett kodblock så länge ett angivet villkor är sant.


while-slingan

while loopar genom ett kodblock så länge som ett specificerat villkor är sant.

Syntax

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

Exempel

I följande exempel kommer koden i slingan att köras, om och om igen, så länge som en variabel (i) är mindre än 10:

Exempel

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

Prova själv →

<!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>

Om du glömmer att öka variabeln som används i villkoret kommer loopen aldrig att ta slut. Detta kommer att krascha din webbläsare.


gör medan-slingan

do while-loopen är en variant av while-loopen. Denna slinga kommer exekvera kodblocket en gång innan du kontrollerar om villkoret är sant, då kommer det att göra det upprepa slingan så länge villkoret är sant.

Syntax

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

Exempel

I exemplet nedan används en do while-loop. Slingan kommer alltid att vara exekveras minst en gång, även om villkoret är falskt, eftersom kodblocket exekveras innan villkoret testas:

Exempel

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

Prova själv →

<!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>

Glöm inte att öka variabeln som används i villkoret, annars slingan kommer aldrig att ta slut!



Jämför for och while

Om du har läst föregående kapitel, om for-slingan, kommer du att upptäcka att en while-loop är ungefär samma som en for-loop, med påstående 1 och påstående 3 utelämnade.

Slingan i det här exemplet använder en för-slinga för att samla in bilen namn från bilarrayen:

Exempel

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

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

Prova själv →

<!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>

Slingan i det här exemplet använder en while-loop för att samla in bilnamn från bilarrayen:

Exempel

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

Prova själv →

<!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>