Slingor kan exekvera ett kodblock ett antal gånger.
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:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
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>
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
-slinganfor
-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.
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.
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):
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):
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>
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.
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):
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>
Använda var
i en slinga:
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:
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
looparför/in
-slingan och för/of
-slingan förklaras i nästa kapitel.
while
looparwhile
-slingan och do/while
förklaras i nästa kapitel.