JavaScript för Loop


Innehållsförteckning

    Visa innehållsförteckning


Slingor kan exekvera ett kodblock ett antal gånger.


JavaScript-loopar

Slingor är praktiska om du vill köra samma kod om och om igen, var och en tid med ett annat värde.

Ofta är detta fallet när man arbetar med arrayer:

Istället för att skriva:

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

Du kan skriva:

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

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

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

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

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

</body>
</html>

Olika typer av slingor

JavaScript stöder olika typer av loopar:

  • för - går igenom ett kodblock ett antal gånger

  • för/in - går igenom egenskaperna för ett objekt

  • för/av - går igenom värdena för en iterable objekt

  • while - loopar genom ett kodblock medan ett angivet villkor är sant

  • do/while - går också igenom ett kodblock medan ett angivet villkor är sant


for-slingan

for-satsen skapar en loop med tre valfria uttryck:

for (expression 1; expression 2; expression 3) {
      // code block to be executed
 }

Uttryck 1 exekveras (en gång) före exekveringen av kodblocket.

Uttryck 2 definierar villkoret för exekvering av kodblocket.

Uttryck 3 exekveras (varje gång) efter att kodblocket har exekveras.

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

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

<script>
let text = "";

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

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

</body>
</html>

Från exemplet ovan kan du läsa:

Uttryck 1 sätter en variabel innan loopen startar (låt i=0).

Uttryck 2 definierar villkoret för att slingan ska köras (i måste vara mindre än 5).

Uttryck 3 ökar ett värde (i++) varje gång kodblocket i slingan har avrättats.



Uttryck 1

Normalt använder du uttryck 1 för att initiera variabeln som används i slingan (låt i=0).

Detta är inte alltid fallet. JavaScript bryr sig inte. Uttryck 1 är frivillig.

Du kan initiera många värden i uttryck 1 (avgränsade med kommatecken):

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

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

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Och du kan utelämna uttryck 1 (som när dina värden är inställda innan loopen börjar):

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

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

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";

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

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

</body>
</html>

Uttryck 2

Ofta används uttryck 2 för att utvärdera tillståndet för den initiala variabeln.

Detta är inte alltid fallet. JavaScript bryr sig inte. Uttryck 2 är också valfritt.

Om uttryck 2 returnerar sant kommer loopen att börja om igen. Om det returnerar falskt, visas slinga kommer att sluta.

Om du utelämnar uttryck 2 måste du ange en paus inuti slinga. Annars kommer slingan aldrig att ta slut. Detta kommer att krascha din webbläsare. Läs om pauser i ett senare kapitel i denna handledning.


Uttryck 3

Ofta ökar uttryck 3 värdet på den initiala variabeln.

Detta är inte alltid fallet. JavaScript bryr sig inte. Uttryck 3 är frivillig.

Uttryck 3 kan göra allt som negativt inkrement (i--), positivt ökning (i=i + 15), eller något annat.

Uttryck 3 kan också utelämnas (som när du ökar dina värden inuti slingan):

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

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

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

let i = 0;
let len = cars.length;
let text = "";

for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Loop Scope

Använda var i en slinga:

Exempel

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

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

<script>
var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

Använda let i en slinga:

Exempel

let i = 5;

for (let i = 0; i < 10; i++) {
    // some code
}

// Here i is 5

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

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

<script>
let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

I det första exemplet, med var, deklarerade variabeln i loopen omdeklarerar variabeln utanför loopen.

I det andra exemplet, med let, deklarerade variabeln i loopen omdeklarerar inte variabeln utanför loopen.

När let används för att deklarera i-variabeln i en slinga, variabeln kommer endast att vara synlig inom loopen.


For/Of och For/In loopar

för/in-slingan och för/of-slingan förklaras i nästa kapitel.


while loopar

while-slingan och do/while förklaras i nästa kapitel.