JavaScript-Schleifen für Anfänger: Lernen Sie die Grundlagen

Es ist ein trüber Montag und Sie sind bei der Arbeit. Wir alle wissen, wie deprimierend Montage sein können, nicht wahr? Ihr Chef kommt auf Sie zu und sagt: „Hey, ich habe 300 ungeöffnete E-Mails, die wir am Wochenende erhalten haben. Ich möchte, dass Sie jede einzelne öffnen, den Namen des Absenders aufschreiben und die E-Mails löschen, wenn Sie fertig sind.“

Diese Aufgabe sieht sehr ermüdend aus, wenn Sie versuchen, sie manuell auszuführen. Als Nächstes denken Sie wahrscheinlich daran, bei Google nach einer Software zu suchen, die diesen Prozess automatisieren und Ihnen das Leben leichter machen kann, oder?

Nun, wir haben ähnliche Situationen beim Programmieren. Es gibt Zeiten, in denen Sie wiederholte Aufgaben ausführen müssen, bis sie erledigt sind. Wie lösen Sie dieses Problem? In JavaScript haben wir das, was wir als Schleifen bezeichnen. Schleifen ermöglichen es uns, wiederholte Aufgaben zu lösen, indem wir die Menge an Code reduzieren, die zum Abschließen der Aufgabe erforderlich ist.

In diesem Artikel erläutern wir, was eine Schleife ist, wie sie funktioniert und welche verschiedenen Methoden wir verwenden können, um sie in unseren Programmen anzuwenden.

Was ist eine Schleife?

Schleifen werden in JavaScript verwendet, um wiederholte Aktionen einfach auszuführen. Sie basieren auf einer Bedingung, die „true“ oder „false“ zurückgibt.

Eine Bedingung ist ein Ausdruck, der übergeben werden muss, damit eine Schleife ausgeführt wird. Eine Schleife wird ausgeführt, wenn die angegebenen Bedingungen einen wahren Wert zurückgeben, und wird angehalten, wenn sie einen falschen Wert zurückgeben.

Wann müssen Sie eine Schleife verwenden?

Schleifen sind nützlich, um sich wiederholende Aufgaben auszuführen. Beispielsweise verkürzt die Verwendung einer Schleife den Code, der zur Lösung eines Problems erforderlich ist. Dies spart Zeit, optimiert die Speichernutzung und verbessert die Flexibilität.

Die wahre Bedeutung einer Schleife geht über die Reduzierung der Codelänge und die Begrenzung der Wiederholung hinaus. Sie helfen auch beim Arbeiten mit Daten in einem Array, Objekt oder anderen Strukturen. Darüber hinaus fördern Schleifen die Codemodularität, indem sie repetitiven Code reduzieren und die Wiederverwendbarkeit des Codes erhöhen, wodurch es möglich wird, Codes zu erstellen, die in verschiedenen Teilen Ihres Projekts verwendet werden können.

Arten von Schleifen

Es gibt zwei Hauptkategorien von Schleifen: eintrittsgesteuerte Schleifen und ausgangsgesteuerte Schleifen.

Eintragsgesteuerte Schleifen bewerten die Bedingung am „Eingang der Schleife“, bevor der Hauptteil der Schleife ausgeführt wird. Wenn die Bedingung erfüllt ist, wird der Hauptteil ausgeführt. Wenn nicht, wird der Hauptteil nicht ausgeführt. Die for und while -Schleifen sind Beispiele für eintragsgesteuerte Schleifen.

Bei ausgangsgesteuerten Schleifen steht der Hauptteil der Schleife im Vordergrund, nicht die Testbedingung. Dadurch wird sichergestellt, dass der Hauptteil der Schleife mindestens einmal ausgeführt wird, bevor die Testbedingung ausgewertet wird. Ein gutes Beispiel für eine ausgangsgesteuerte Schleife ist die do-while Schleife.

Sehen wir uns einige Beispiele für eintragsgesteuerte Schleifen an:

While-Schleife

Eine while Schleife hat die folgende Syntax.

 while (condition) { // loop's body }

Die folgende Liste erläutert die Funktionalität einer While-Schleife:

1. Die while Schleife nimmt eine Testbedingung in Klammern an.

   
   

2. Das Programm prüft, ob die Bedingung erfüllt ist oder nicht.

   
   

3. Der Code im Hauptteil der Schleife wird ausgeführt, solange die Bedingung erfüllt ist.

   
   

4. Das Programm beendet seinen Betrieb, sobald die Testbedingung fehlschlägt.

Sehen wir uns unten ein praktisches Beispiel für die while Schleife an:

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. Der obige Codeausschnitt initialisiert die Variablen „arr“, „i“ und „num“.

   
   

2. Die Variable „ arr“ ist ein Array, das die Werte enthält, die die Testbedingung erfüllen.

   
   

3. Die Variable „i“ verfolgt jedes Inkrement nach jeder Iteration.

   
   

4. Die Variable „Zahl“ vergleicht nach jeder Iteration den Wert von „i“ mit ihrem Wert (5).

   
   

5. Der Code im Hauptteil der Schleife schiebt jeden Wert von „i“ nach jeder Iteration in das Array, solange „i“ kleiner oder gleich „Zahl“ ist.

   
   

6. Sobald der aktuelle Wert von „i“ die Bedingung nicht mehr erfüllt (in diesem Fall, wenn der Wert von „i“ größer als die „Zahl“ ist, also 6), wird die Schleife angehalten.

   
   

Die push() Methode ist eine integrierte JavaScript-Funktion, die am Ende eines Arrays ein neues Element hinzufügt.

Ausgabe

 [1, 2, 3, 4, 5]

do-while-Schleife

Eine do-while Schleife ähnelt stark der while-Schleife. Der Hauptunterschied zwischen der while und der do-while Schleife besteht darin, dass die do-while Schleife die Codeausführung mindestens einmal sicherstellt, bevor der Zustand der Schleife ausgewertet wird. Die do-while Schleife hat die folgende Syntax.

 do { // loop's body } while (//condition)

Die do-while Schleife ist ein hervorragendes Beispiel für eine exit-gesteuerte Schleife. Dies liegt daran, dass exit-gesteuerte Schleifen dem Hauptteil der Schleife Vorrang vor der Testbedingung einräumen. Sehen wir uns nun ein praktisches Codebeispiel an, das die do-while Schleife verwendet.

Beispiel:

 let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num);

Lassen Sie uns nun diesen Codeausschnitt aufschlüsseln:

1. Wir haben die Variablen „i“ und „num“ initialisiert.

   
   

2. Die Konsole protokolliert den Wert von „i“ (1), bevor der Zustand der Schleife ausgewertet wird.

   
   

3. Die Bedingung wird überprüft und der Wert von „i“ nach jeder Iteration um +1 erhöht.

   
   

4. Die Schleife beendet ihre Ausführung, sobald „i“ größer als „num“ ist.

   
   

Ausgabe

 1 2 3 4 5

Obwohl die do-while Schleife der while Schleife sehr ähnlich ist, gibt es feine Unterschiede, die wir beachten müssen. Sehen wir uns ein weiteres Beispiel an, das die Unterschiede zwischen der while und do-while Schleife vergleicht.

 let i = 5; let num = 4 while( i < num) { console.log(i) }

Die obige while Schleife gibt kein Ergebnis an die Konsole zurück. Warum ist das so?

1. Wir haben die Variablen „i“ und „num“ mit den Werten 5 bzw. 4 initialisiert.

   
   

2. Die Bedingung prüft, ob der Wert von „i“ kleiner als „num“ ist.

   
   

3. Wenn wahr, wird der jeweilige Wert protokolliert.

   
   

4. Da der Anfangswert von „i“ den von „num“ überschreitet, wird die Schleife nie ausgeführt.

   
   

Betrachten wir nun ein ähnliches Beispiel mit der do-while -Schleife.

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

Ausgabe

 5

Die do-while Schleife sorgt für die Ausführung des Codeblocks, der 5 in die Konsole zurückgibt, obwohl "i" anfangs einen höheren Wert als "num" hat, wird es dennoch einmal in der Konsole protokolliert. Diese Darstellung zeigt Ihnen den Unterschied in der Funktionalität zwischen der do-while und while Schleife.

For-Schleife

Die for loop ist ein einzigartiger Schleifentyp und eine der von Programmierern am häufigsten verwendeten Schleifen. Die for loop ist eine Schleife, die einen Codeblock abhängig von einer Bedingung eine bestimmte Anzahl von Malen ausführt. Die For-Schleife hat die folgende Syntax.

 for (Expression1...; Expression2....; Expression3...{    //code block }

Ausdruck 1: Dieser Teil einer for loop wird auch als Initialisierungsbereich bezeichnet. Er ist der Anfang unserer for loop und der Bereich, in dem die Zählervariable definiert ist. Die Zählervariable wird verwendet, um die Anzahl der Schleifendurchläufe zu verfolgen und als Wert zu speichern.

Ausdruck 2: Dies ist der zweite Teil der Schleife. Dieser Teil definiert die bedingte Anweisung, die die Schleife ausführen würde.

Ausdruck 3: Hier endet die Schleife; die Zählervariable in diesem Abschnitt aktualisiert ihren Wert nach jeder Iteration, indem sie den Wert entweder erhöht oder verringert, wie in der Bedingung angegeben.

Sehen wir uns ein Beispiel mit der For-Schleife an.

 for (let i = 0; i < 100; i++) {  console.log("Hello World" ) }

Lassen Sie uns den obigen Codeausschnitt gemeinsam analysieren.

1. Zuerst haben wir die Zählervariable „ i“ mit dem Wert Null initialisiert.

   
   

2. Als Nächstes haben wir die bedingte Anweisung erstellt, die den Code am Laufen hält.

   
   

3. Wir haben den Wert von „i“ mit 100 verglichen; wenn dieser Test besteht, wird „Hallo Welt“ protokolliert.

   
   

4. Dieser Vorgang wiederholt sich, wobei der Zähler nach jeder Iteration um +1 erhöht wird.

   
   

5. Die Schleife endet, sobald der Zählerwert 100 erreicht.

   
   

Ausgabe

 Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ...

for-each-Schleife

Die for-each Schleife ist eine Methode in JavaScript, die ein Array durchläuft und auf jedes Element in diesem Array eine Rückruffunktion anwendet. Eine Rückruffunktion ist einfach eine weitere Funktion, die als Parameter an eine Funktion übergeben wird. Die Rückruffunktion funktioniert, indem sie nach der Ausführung der Hauptfunktion sequenziell ausgeführt wird.

Sehen wir uns die grundlegende Syntax einer for-each Schleife an.

 array.forEach(function(currentValue, index, arr))

Der oben bereitgestellte Code erklärt die Funktionsweise einer for-each Schleife.

• Diese Schleife akzeptiert drei Parameter, nämlich den aktuellen Wert, einen Index und ein Array.

• Der aktuelle Wert stellt den gegenwärtigen Wert des Elements im Array dar.

• Der Index ist ein optionaler Parameter, der Ihnen die nummerierte Position des aktuellen Elements in diesem Array angibt.

• „arr“ ist ein weiterer optionaler Parameter, der Ihnen angibt, zu welchem Array das Element gehört.

  
  

 let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); });

Lassen Sie uns das obige Beispiel aufschlüsseln:

1. Wir haben ein Array mit dem Variablennamen „myArray“ initialisiert und es mit ganzen Zahlen im Bereich von 1 bis 5 gespeichert.

   
   

2. Die for-each -Array-Methode verwendet drei Parameter und wendet eine Rückruffunktion auf das Array an.

   
   

3. Diese Zeile; arr[index] = num * 2 multipliziert den Wert des aktuellen Elements mit 2 und weist den zurückgegebenen Wert dem Index des aktuellen Elements zu.

   
   

Beachten Sie: Die for-each -Array-Methode gibt kein neues Array zurück, sondern ändert das ursprüngliche Array und gibt es zurück.

Ausgabe

 [2, 4, 6, 8, 10]

Was sind For... In- und For... of-Schleifen in JavaScript?

Die for... in und for... of -Schleifen sind sehr nützlich, wenn es darum geht, über iterierbare Objekte zu iterieren. Iterierbare Objekte beziehen sich auf alle Elemente, die in einer Schleife durchlaufen werden können. Gängige Beispiele für iterierbare Objekte sind Arrays, Zeichenfolgen, Mengen usw.

„ for... in und for... of ähneln sich in der Art und Weise, wie sie Objekte durchlaufen/durchlaufen. Der Hauptunterschied zwischen ihnen zeigt sich in der Art und Weise, wie sie Werte zurückgeben.

für ... in Schleifen

Eine for... in Schleife ist nützlich, wenn Sie die Schlüssel/Eigenschaften aus einem Objekt und die entsprechenden Eigenschaften aus dem übergeordneten Objekt extrahieren müssen. Die for... in Schleife kann manchmal ein Objekt auf eine Weise durchlaufen, die von der in diesem bestimmten Objekt definierten Weise abweicht. Sehen wir uns ein Beispiel für eine for... in -Schleife in Aktion an.

 let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray);

Im obigen Beispiel haben wir ein Objekt namens studentScores definiert, das mehrere Studentennamen und die entsprechenden Punktzahlen enthält. Durch die Verwendung for... in konnten wir nur die Namen der Studenten abrufen, die die Schlüssel des Objekts studentScores darstellen, und sie mithilfe der Methode push() in einem Array speichern.

Ausgabe

 ["John", "Dan", "Tricia", "Jamal", "Jane"]

für ... von Schleifen

Die for... of Schleife ist ein spezieller Schleifentyp, der über die Werte iterierbarer Objekte wie Arrays, Strings, Maps usw. iteriert. for... of -Schleifen befassen sich nicht mit den Schlüsseln oder Eigenschaften eines Objekts, sondern zeigen lediglich die Prioritäten der Werte an.

Die for... of Schleife kann nicht über reguläre Objekte iterieren und gibt einen Fehler aus, da sie nicht iterierbar sind. Sehen wir uns ein Beispiel mit der for.. of Schleife an.

 let numArray = [1,2,3,4,5] for (const value of numArray) {   console.log(value) } // Output = 1,2,3,4,5

Zusammenfassend sind die for... in und for... of -Schleifen eine großartige Möglichkeit, um durch iterierbare Objekte zu schleifen. Der Hauptunterschied besteht darin, dass eine for... in -Schleife den Schlüssel eines Objekts zurückgibt, während die for... of Schleife nur die Werte iterierbarer Objekte zurückgibt.

Was ist eine Endlosschleife und wie können wir sie vermeiden?

Eine Endlosschleife ist eine Schleife, die unendlich lange ausgeführt wird. Dies tritt auf, wenn für eine Schleife keine definierte Beendigungsbedingung vorliegt. Endlosschleifen sind gefährlich, da sie Ihren Browser zum Absturz bringen und zu unerwünschten Aktionen in Ihrem Programm führen können.

 // infinite loop sample while (true) { console.log("keep on running") }

Um Endlosschleifen in Ihrem Programm zu vermeiden, stellen Sie immer sicher, dass innerhalb Ihrer Schleife eine Beendigungsbedingung definiert ist.

Abschluss

Vielen Dank, dass Sie bis zum Ende dieses Artikels gelesen haben. Schleifen in Javascript sind ein wichtiges Konzept, das jeder Entwickler beherrschen muss, da es für die Erstellung eines guten und optimierbaren Programms sehr wertvoll ist. Ich glaube, dass Sie mit diesem Artikel die Grundlagen und Feinheiten der Verwendung von Schleifen in Ihrem Programm verstehen werden.