JavaScript for-statement

Definitie en gebruik

De for-statement maakt een lus, die wordt uitgevoerd zolang de voorwaarde waar is.

De lus blijft draaien zolang de voorwaarde waar is. Het stopt alleen wanneer de voorwaarde vals wordt.

JavaScript ondersteunt verschillende soorten herhalingen:

  • for - Herhalingscodeblokken
  • for/in - Loopen over de eigenschappen van een object
  • for/of - Loop door de waarden van een iterable object
  • while - Loop een codeblok als de voorwaarde waar is
  • do/while - Loop een codeblok een keer en herhaal de loop als de voorwaarde waar is

Tip:Gebruik de break-statement om de loop te verlaten, gebruik de continue-statement om een waarde in de loop over te slaan.

voorbeeld

Loop de codeblokken vijf keer:

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "Het getal is " + i + "<br>";

probeer het zelf

Er zijn meer TIY-exempelen onder de pagina.

Syntax

for (statement 1; statement 2; statement 3) {
  code block om te worden uitgevoerd

Parameterwaarde

Parameter Beschrijving
statement1

Optioneel. Voer dit uit voordat de loop (codeblok) begint. Dit statement wordt meestal gebruikt om tellervariabelen te initialiseren. Voor het initialiseren van meerdere waarden, scheid deze met komma's.

Opmerking:Deze parameter kan worden overgeslagen. Maar wees erop gewezen dat de puntkomma ";" niet mag worden overgeslagen.
statement2

Optioneel. Definieer de voorwaarde voor het uitvoeren van de loop (codeblok). Dit statement wordt meestal gebruikt om de voorwaarde van een tellervariabele te evalueren. Als het true retourneert, begint de loop opnieuw, als het false retourneert, eindigt de loop.

Opmerking:Deze parameter kan worden overgeslagen. Maar wees erop gewezen dat de puntkomma ";" niet mag worden overgeslagen. Bovendien moet er een break worden gegeven als deze parameter wordt overgeslagen. Anders zal de loop nooit eindigen, wat kan leiden tot een crash van uw browser.
statement3

Optioneel. Voer deze uit na elke uitvoering van de loop (codeblok). Dit statement wordt meestal gebruikt om tellervariabelen te verhogen of te verminderen.

Opmerking:Deze parameter kan worden overgeslagen (bijvoorbeeld het toevoegen/verminderen van de waarde binnen de loop).

Technische details

JavaScript versie: ECMAScript 1

Meer voorbeelden

voorbeeld

De loop doorloopt de indices van het array en verzamelt de namen van de auto's uit het array cars:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";

probeer het zelf

Voorbeeld uitleg:

  • Eerst stellen we een variabele in voordat de loop begint (var i = 0;)
  • Daarna definiëren we de voorwaarde voor de loop. Zolang de variabele kleiner is dan de lengte van het array (dus 4), zal de loop doorgaan:
  • Elke keer dat de loop wordt uitgevoerd, wordt de variabele met één verhoogd (i++)
  • Zodra de variabele niet langer kleiner is dan 4 (de lengte van het array), is de voorwaarde vals en eindigt de loop:

voorbeeld

Initialiseer meerdere waarden in de eerste parameter:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) { 
  text += cars[i] + "<br>";

probeer het zelf

voorbeeld

Oversla de eerste parameter (waarde instellen voordat de loop begint):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";

probeer het zelf

voorbeeld

Gebruik de continue-statement - Loopcodeblok, maar spring '3' over:

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  
  text += "Het getal is " + i + "<br>";

probeer het zelf

voorbeeld

Gebruik een break-statement - voer een stuk code uit, maar kom uit de lus wanneer de variabele i gelijk is aan "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  
  text += "Het getal is " + i + "<br>";

probeer het zelf

voorbeeld

De tweede parameter wordt weggelaten. In dit voorbeeld gebruiken we ook een break-statement om uit de lus te komen wanneer i gelijk is aan "3" (als de tweede parameter wordt weggelaten, moet er binnen de lus een break worden gegeven. Anders zal de lus nooit eindigen en zal uw browser crashen):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  
  text += cars[i] + "<br>";

probeer het zelf

voorbeeld

Loop in aflopende volgorde door de indices van het array (negatieve incrementatie):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";

probeer het zelf

voorbeeld

Laat het laatste parameter weg en verhoog de waarde binnen de lus:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
for (; i < len;) { 
  text += cars[i] + "<br>";
  i++;

probeer het zelf

voorbeeld

loop door de knopen van de NodeList-object en verander de achtergrondkleur van alle <p>-elementen in de lijst:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";

probeer het zelf

voorbeeld

voorbeeld van een geneste lus (lus binnen lus):

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";

probeer het zelf

browserondersteuning

zinnen Chrome IE Firefox Safari Opera
voor ondersteuning ondersteuning ondersteuning ondersteuning ondersteuning

gerelateerde pagina's

JavaScript handleiding:JavaScript For loop

JavaScript reference manual:JavaScript for ... in statement

JavaScript reference manual:JavaScript break statement

JavaScript reference manual:JavaScript continue statement

JavaScript reference manual:JavaScript while statement