Für, Während und Do Während Schleifen in JavaSkript mit Beispiel

Was ist eine Schleife in JavaSkript?

Schleifen sind nützlich, wenn Sie dieselben Codezeilen wiederholt ausführen müssen, für eine bestimmte Anzahl von Malen oder solange eine bestimmte Bedingung erfüllt ist. Angenommen, Sie möchten 100 Mal eine „Hallo“-Nachricht auf Ihrer Webseite eingeben. Natürlich müssen Sie dieselbe Zeile 100 Mal kopieren und einfügen. Wenn Sie stattdessen Schleifen verwenden, können Sie diese Aufgabe in nur 3 oder 4 Zeilen erledigen.

Jede Schleife besteht unabhängig von der Syntax aus denselben drei Teilen: einem Startwert, einer Bedingung, die entscheidet, ob ein weiterer Durchlauf erfolgt, und einer Aktualisierung, die die Schleife ihrem Ausgang nähert. Das folgende Diagramm veranschaulicht diesen sich wiederholenden Zyklus.

Verschiedene Arten von Schleifen in JavaSkript

Es gibt hauptsächlich vier Arten von Schleifen JavaSkript.

1. for-Schleife
2. for/in Schleife
3. while-Schleife
4. do… while-Schleife

Modernes JavaDas Skript fügt eine for…of-Schleife zur direkten Iteration über Werte hinzu, sodass in der Praxis fünf Formen zur Verfügung stehen. Die folgende Tabelle zeigt, welche in einer bestimmten Situation zu verwenden ist.

for-Schleife

Syntax:

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

1. Die Anweisung 1 wird zuerst ausgeführt, noch bevor die loo-Anweisung ausgeführt wird.ping Code. Diese Anweisung wird also normalerweise verwendet, um Variablen Werte zuzuweisen, die innerhalb der Schleife verwendet werden.
2. Die Anweisung2 ist die Bedingung zum Ausführen der Schleife.
3. Die Anweisung 3 wird jedes Mal nach dem Öffnen der Toilette ausgeführt.ping Der Code wird ausgeführt.

Probieren Sie es selbst aus:

<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>

Ausgang:

Using for loops
John
Ann
Aaron
Edwin
Elizabeth

Der Zähler beginnt bei 0, weil der erste Index eines Array ist null, und die Bedingung verwendet students.length, sodass sich die Schleife automatisch anpasst, wenn Namen hinzugefügt oder entfernt werden.

while-Schleife

Syntax:

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

Die „while-Schleife“ wird ausgeführt, solange die angegebene Bedingung erfüllt ist. Innerhalb der while-Schleife sollten Sie die Anweisung einfügen, die die Schleife zu einem bestimmten Zeitpunkt beendet. Andernfalls wird Ihre Schleife nie beendet und Ihr Browser kann abstürzen.

Probieren Sie es selbst aus:

<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>

Ausgang:

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

do… while-Schleife

Syntax:

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

Die do…while-Schleife ist der while-Schleife sehr ähnlich. Der einzige Unterschied besteht darin, dass der Codeblock in der do…while-Schleife einmal ausgeführt wird, noch bevor die Bedingung geprüft wird.

Probieren Sie es selbst aus:

<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>

Ausgang:

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

Der Unterschied wird sichtbar, wenn die Bedingung von Anfang an falsch ist. Eine while-Schleife gibt nichts aus, wohingegen eine do…while-Schleife vor dem Stopp immer noch eine Zeile ausgibt.ping.

for…in loop

Die for…in-Schleife durchläuft die aufzählbaren Eigenschaftsnamen eines Objekts. In jedem Durchlauf wird der nächste Schlüssel der Schleifenvariablen zugewiesen, und der Wert wird mithilfe der Klammernotation ausgelesen.

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

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

Ausgang:

name : Ann
age : 21
course : JavaScript

for…of-Schleife und forEach

Die for…of-Schleife liest die Werte beliebiger iterierbarer Objekte, einschließlich Arrays, Strings, Maps und Sets. Die forEach-Methode erzielt dasselbe Ergebnis mit einer Callback-Funktion und ermöglicht den Zugriff auf den 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);
}

Ausgang:

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

Ein praktischer Unterschied ist wichtig: Innerhalb von for…of können break und continue ausgeführt werden, innerhalb von forEach jedoch nicht, da jeder Callback eine separate Funktion ist.

Unterbrechung und Fortsetzung der Aussagen

Zwei Schlüsselwörter verändern den normalen Ablauf einer Schleife. Die `break`-Anweisung verlässt die Schleife vollständig, und die `continue`-Anweisung bricht den aktuellen Schleifendurchlauf ab und springt zum nächsten.

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;
    }
}

Ausgang:

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

Schleifen kommen in fast jedem Skript vor, das Sie schreiben werden. Fahren Sie fort mit dem praktisch JavaSkriptcodebeispiele, erneut besuchen JavaSkript-Array-Methoden für die auf diesen Schleifen aufbauenden Iterationshilfsfunktionen und lesen Sie intern und extern JavaSkript um zu entscheiden, wo das fertige Drehbuch gespeichert werden soll.

Häufig gestellte Fragen