For, While en Do While LOOP in JavaScript met voorbeeld

Wat is een lus in JavaScript?

Loops zijn handig wanneer u dezelfde coderegels herhaaldelijk moet uitvoeren, gedurende een bepaald aantal keren of zolang een specifieke voorwaarde waar is. Stel dat u 100 keer een 'Hallo'-bericht op uw webpagina wilt typen. Natuurlijk moet je dezelfde regel 100 keer kopiëren en plakken. Als u lussen gebruikt, kunt u deze taak in slechts 3 of 4 regels voltooien.

Elke lus is opgebouwd uit dezelfde drie onderdelen, ongeacht de syntaxis: een beginwaarde, een voorwaarde die bepaalt of een volgende iteratie wordt uitgevoerd, en een update die de lus naar de uitgang brengt. Het onderstaande diagram illustreert deze herhalende cyclus.

Verschillende soorten lussen in JavaScript

Er zijn hoofdzakelijk vier soorten lussen in JavaScript.

1. for loop
2. for/in-lus
3. herhalingslus
4. do… while loop

MODERN JavaHet script voegt de for…of-lus toe om direct door waarden te itereren, waardoor er in de praktijk vijf vormen beschikbaar zijn. De onderstaande tabel laat zien welke vorm in een bepaalde situatie het meest geschikt is.

for loop

Syntax:

for(statement1; statement2; statment3)
{
lines of code to be executed
}

1. De instructie1 wordt eerst uitgevoerd, zelfs voordat de loo wordt uitgevoerd.ping code. Deze instructie wordt normaal gesproken gebruikt om waarden toe te wijzen aan variabelen die binnen de lus worden gebruikt.
2. De instructie2 is de voorwaarde om de lus uit te voeren.
3. De instructie 3 wordt elke keer na de loo uitgevoerd.ping De code wordt uitgevoerd.

Probeer dit zelf:

<html>
<head>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		document.write("<b>Using for loops </b><br />");
		for (i=0;i<students.length;i++)
		{
		document.write(students[i] + "<br />");
		}
	</script>
</head>
<body>
</body>
</html>

Output:

Using for loops
John
Ann
Aaron
Edwin
Elizabeth

De teller begint bij 0 omdat de eerste index van een reeks is nul, en de voorwaarde gebruikt students.length zodat de lus zich automatisch aanpast wanneer namen worden toegevoegd of verwijderd.

herhalingslus

Syntax:

while(condition)
{
lines of code to be executed
}

De "while loop" wordt uitgevoerd zolang de opgegeven voorwaarde waar is. Binnen de while loop moet u de statement opnemen die de loop op een bepaald moment zal beëindigen. Anders zal uw loop nooit eindigen en kan uw browser crashen.

Probeer dit zelf:

<html>
<head>
	<script type="text/javascript">
		document.write("<b>Using while loops </b><br />");
		var i = 0, j = 1, k;
		document.write("Fibonacci series less than 40<br />");
		while(i<40)
		{
			document.write(i + "<br />");
			k = i+j;
			i = j;
			j = k;
		}
	</script>
</head>
<body>
</body>
</html>

Output:

Using while loops
Fibonacci series less than 40
0
1
1
2
3
5
8
13
21
34

do… while loop

Syntax:

do
{
block of code to be executed
} while (condition)

De do…while-lus lijkt erg op de while-lus. Het enige verschil is dat in de do…while-lus het codeblok één keer wordt uitgevoerd, zelfs voordat de voorwaarde wordt gecontroleerd.

Probeer dit zelf:

<html>
<head>
	<script type="text/javascript">
		document.write("<b>Using do...while loops </b><br />");
		var i = 2;
		document.write("Even numbers less than 20<br />");
		do
		{
			document.write(i + "<br />");
			i = i + 2;
		}while(i<20)
	</script>
</head>
<body>
</body>
</html>

Output:

Using do...while loops
Even numbers less than 20
2
4
6
8
10
12
14
16
18

Het verschil wordt zichtbaar wanneer de voorwaarde vanaf het begin onwaar is. Een while-lus print niets, terwijl een do…while-lus nog steeds één regel print voordat hij stopt.ping.

voor…in lus

De for…in-lus doorloopt de opsombare eigenschapsnamen van een object. Bij elke iteratie wordt de volgende sleutel aan de lusvariabele toegewezen en de waarde wordt ingelezen met behulp van de haakjesnotatie.

const student = {
    name: "Ann",
    age: 21,
    course: "JavaScript"
};

for (const key in student) {
    console.log(key + " : " + student[key]);
}

Output:

name : Ann
age : 21
course : JavaScript

for…of-lus en forEach

De `for…of`-lus leest de waarden van elk iterable object, inclusief arrays, strings, maps en sets. De `forEach`-methode bereikt hetzelfde resultaat met een callbackfunctie en geeft toegang tot de index.

const students = ["John", "Ann", "Aaron"];

// for...of reads each value directly
for (const name of students) {
    console.log(name);
}

// forEach supplies the value and the index
students.forEach(function (name, index) {
    console.log(index + " - " + name);
});

// strings are iterable too
for (const letter of "Ann") {
    console.log(letter);
}

Output:

John
Ann
Aaron
0 - John
1 - Ann
2 - Aaron
A
n
n

Een belangrijk praktisch verschil is dat je binnen een `for…of`-lus kunt `break` en `continue` kunt gebruiken, maar niet binnen een `forEach`-lus, omdat elke callback een aparte functie is.

onderbreking en vervolgverklaringen

Twee sleutelwoorden veranderen de normale gang van zaken in een lus. De `break`-instructie verlaat de lus volledig, en de `continue`-instructie breekt de huidige iteratie af en springt naar de volgende.

const numbers = [4, 7, 10, 13, 16, 19];

// continue: skip odd numbers
for (const n of numbers) {
    if (n % 2 !== 0) {
        continue;
    }
    console.log("even: " + n);
}

// break: stop at the first value above 12
for (const n of numbers) {
    if (n > 12) {
        console.log("first value above 12: " + n);
        break;
    }
}

Output:

even: 4
even: 10
even: 16
first value above 12: 13

Lussen komen in vrijwel elk script dat je schrijft voor. Ga verder met de praktisch JavaScriptcodevoorbeelden, opnieuw bezoeken JavaScript array-methoden voor de iteratiehulpmiddelen die bovenop deze lussen zijn gebouwd, en lees intern en extern JavaScript om te beslissen waar het voltooide script moet worden opgeslagen.

Veelgestelde vragen