Loops kan udføre en kodeblok et antal gange.
Loops er praktiske, hvis du vil køre den samme kode igen og igen, hver tid med en anden værdi.
Ofte er dette tilfældet, når du arbejder med arrays:
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>";
}Prøv det selv →
<!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 understøtter forskellige slags loops:
for - går gennem en kodeblok et antal gange
for/in - går gennem et objekts egenskaber
for/of - sløjfer gennem værdierne af en iterable objekt
mens - går gennem en kodeblok, mens en specificeret betingelse er sand
do/while - går også gennem en kodeblok, mens en specificeret betingelse er sand
for-løkkenfor-sætningen opretter en løkke med 3 valgfrie udtryk:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}Udtryk 1 udføres (en gang) før afviklingen af kodeblokken.
Udtryk 2 definerer betingelsen for at udføre kodeblokken.
Udtryk 3 udføres (hver gang), efter at kodeblokken er blevet eksekveret.
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Prøv det selv →
<!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>
Fra eksemplet ovenfor kan du læse:
Udtryk 1 sætter en variabel før løkken starter (lad i=0).
Udtryk 2 definerer betingelsen for, at løkken kan køre (i skal være mindre end 5).
Udtryk 3 øger en værdi (i++) hver gang kodeblokken i løkken har blevet henrettet.
Normalt vil du bruge udtryk 1 til at initialisere den variabel, der bruges i løkken (lad i=0).
Dette er ikke altid tilfældet. JavaScript er ligeglad. Udtryk 1 er valgfri.
Du kan starte mange værdier i udtryk 1 (adskilt med komma):
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}Prøv det selv →
<!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>
Og du kan udelade udtryk 1 (som når dine værdier er indstillet før løkken starter):
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}Prøv det selv →
<!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>
Ofte bruges udtryk 2 til at evaluere tilstanden af den oprindelige variabel.
Dette er ikke altid tilfældet. JavaScript er ligeglad. Udtryk 2 er også valgfrit.
Hvis udtryk 2 returnerer sandt, starter løkken forfra. Hvis det returnerer falsk, vil sløjfen slutter.
Hvis du udelader udtryk 2, skal du angive en pause inde i sløjfe. Ellers vil løkken aldrig ende. Dette vil nedbryde din browser. Læs om pauser i et senere kapitel i denne øvelse.
Ofte øger udtryk 3 værdien af den indledende variabel.
Dette er ikke altid tilfældet. JavaScript er ligeglad. Udtryk 3 er valgfri.
Udtryk 3 kan gøre alt som negativ stigning (i--), positiv stigning (i=i + 15) eller noget andet.
Udtryk 3 kan også udelades (som når du øger dine værdier inde i løkken):
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}Prøv det selv →
<!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>
Brug af var i en sløjfe:
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10Prøv det selv →
<!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>
Brug let i en sløjfe:
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5Prøv det selv →
<!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ørste eksempel, ved hjælp af var, er variablen erklæret i løkken generklærer variablen uden for løkken.
I det andet eksempel, ved hjælp af let, er variablen erklæret i løkken generklærer ikke variablen uden for løkken.
Når let bruges til at erklære i-variablen i en løkke, variabel vil kun være synlig i løkken.
For/Af og For/In løkkerfor/in-løkken og for/of-løkken er forklaret i næste kapitel.
mens sløjferwhile-løkken og do/while er forklaret i de næste kapitler.