JavaScript voor Loop
Voorbeeld
Loop (herhaal over) een codeblok vijf keer:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Loop (herhaal over) een array om autonamen te verzamelen:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- De lus begint in positie 0 (
let i = 0). - De lus wordt automatisch verhoogd
ivoor elke run. - De lus loopt zo lang als
i < cars.length.
Hieronder meer voorbeelden.
Definitie en gebruik
De forinstructie definieert een codeblok dat wordt uitgevoerd zolang een voorwaarde is
true.
Opmerking
Als u stelling 2 weglaat, moet u een onderbreking in de lus aanbrengen.
Anders houdt de lus nooit op. Hierdoor crasht je browser.Zie ook:
Syntaxis
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Parameters:
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
JavaScript-lusverklaringen
| Stelling | Beschrijving | |
| pauze | Breekt uit een lus | |
| doorgaan | Slaat een waarde in een lus over | |
| terwijl | Loopt een codeblok in een lus terwijl een voorwaarde waar is | |
| doen terwijl | Loopt een codeblok één keer in een lus, en dan terwijl een voorwaarde waar is | |
| voor | Loopt een codeblok in een lus terwijl een voorwaarde waar is | |
| voor...van | Loopt de waarden van elke iterable in een lus | |
| voor in | Loopt de eigenschappen van een object in een lus |
Meer voorbeelden
Start meerdere waarden in de eerste parameter:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Laat de eerste parameters weg (stel de waarden in voordat de lus begint):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Gebruik continue- Loop door een codeblok, maar sla de waarde 3 over:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Gebruik break- Loop een codeblok door, maar verlaat de lus wanneer i == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Laat de tweede parameter weg.
Gebruik breakom de lus te verlaten, anders zal de lus nooit eindigen en zal uw browser crashen:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Loop over een array in aflopende volgorde (negatieve toename):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Laat de laatste parameter weg en verhoog de waarden binnen de lus:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Loop een NodeList en verander de kleur van alle p-elementen in de lijst:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Een geneste lus (een lus in een lus):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Browserondersteuning
for is een ECMAScript1 (ES1)-functie.
ES1 (JavaScript 1997) wordt volledig ondersteund in alle browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |