JavaScript voor lus
Loops kunnen een codeblok een aantal keren uitvoeren.
JavaScript-lussen
Loops zijn handig als je dezelfde code steeds opnieuw wilt uitvoeren, telkens met een andere waarde.
Vaak is dit het geval bij het werken met arrays:
In plaats van te schrijven:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
Je kan schrijven:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Verschillende soorten lussen
JavaScript ondersteunt verschillende soorten loops:
for- een aantal keer door een codeblok looptfor/in- doorloopt de eigenschappen van een objectfor/of- doorloopt de waarden van een itereerbaar objectwhile- doorloopt een codeblok terwijl een opgegeven voorwaarde waar isdo/while- Loopt ook door een codeblok terwijl een opgegeven voorwaarde waar is
De For-loop
De forlus heeft de volgende syntaxis:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
Statement 1 wordt (eenmalig) uitgevoerd voordat het codeblok wordt uitgevoerd.
Statement 2 definieert de voorwaarde voor het uitvoeren van het codeblok.
Statement 3 wordt (elke keer) uitgevoerd nadat het codeblok is uitgevoerd.
Voorbeeld
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Uit bovenstaand voorbeeld kun je lezen:
Stelling 1 stelt een variabele in voordat de lus begint (laat i = 0).
Verklaring 2 definieert de voorwaarde voor het uitvoeren van de lus (i moet kleiner zijn dan 5).
Verklaring 3 verhoogt een waarde (i++) elke keer dat het codeblok in de lus is uitgevoerd.
Stelling 1
Normaal gesproken gebruik je statement 1 om de variabele die in de lus wordt gebruikt te initialiseren (let i = 0).
Dit is niet altijd het geval, JavaScript maakt niet uit. Stelling 1 is optioneel.
U kunt veel waarden starten in statement 1 (gescheiden door komma's):
Voorbeeld
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
En je kunt statement 1 weglaten (zoals wanneer je waarden zijn ingesteld voordat de lus begint):
Voorbeeld
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Verklaring 2
Vaak wordt statement 2 gebruikt om de toestand van de initiële variabele te evalueren.
Dit is niet altijd het geval, JavaScript maakt niet uit. Verklaring 2 is ook optioneel.
Als statement 2 true retourneert, begint de lus opnieuw, als het false retourneert, eindigt de lus.
Als u stelling 2 weglaat, moet u een onderbreking in de lus aanbrengen. Anders houdt de lus nooit op. Hierdoor crasht je browser. Lees over pauzes in een later hoofdstuk van deze tutorial.
Verklaring 3
Vaak verhoogt statement 3 de waarde van de initiële variabele.
Dit is niet altijd het geval, JavaScript maakt niet uit en statement 3 is optioneel.
Stelling 3 kan alles doen, zoals negatieve toename (i--), positieve toename (i = i + 15), of iets anders.
Stelling 3 kan ook worden weggelaten (zoals wanneer u uw waarden binnen de lus verhoogt):
Voorbeeld
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Loopbereik
varIn een lus gebruiken :
Voorbeeld
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
letIn een lus gebruiken :
Voorbeeld
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
In het eerste voorbeeld, met behulp van var, wordt de variabele gedeclareerd in de lus opnieuw gedeclareerd buiten de lus.
In het tweede voorbeeld, waarbij wordt gebruikt let, wordt de variabele gedeclareerd in de lus niet opnieuw gedeclareerd buiten de lus.
Wanneer letwordt gebruikt om de variabele i in een lus te declareren, is de variabele i alleen zichtbaar binnen de lus.
For/Of en For/In-lussen
De for/inlus en de for/oflus worden in het volgende hoofdstuk uitgelegd.
While-lussen
De whilelus en de do/whileworden in de volgende hoofdstukken uitgelegd.