Geekflare wird von unserem Publikum unterstützt. Wir können Affiliate-Provisionen durch den Kauf von Links auf dieser Website verdienen.
Teilen:

Jeder JavaScript-Schleifentyp erklärt: [Mit Codeblöcken und Beispielen]

Jeder-JavaScript-Loop-Typ-erklärt
Invicti Web Application Security Scanner – die einzige Lösung, die eine automatische Verifizierung von Schwachstellen mit Proof-Based Scanning™ bietet.

JavaScript gehört zu den am häufigsten verwendeten Programmiersprachen. Entwickler, die JavaScript-Ingenieure werden möchten, müssen die Grundlagen von Schleifen, ihre Typen und ihre Funktionsweise lernen. 

Eine JavaScript-Schleife ist ein Werkzeug, das verwendet wird, um wiederholte Aufgaben basierend auf einer bestimmten Bedingung auszuführen. Andererseits ist „iterate“ ein allgemeiner Begriff, der im Kontext der Schleife „repeat“ bedeutet. Eine Schleife wird so lange wiederholt, bis eine Stoppbedingung erfüllt ist. 

Um es besser zu verstehen, können Sie es sich als ein Computerspiel vorstellen, bei dem Sie angewiesen werden, X Schritte nach Norden und dann Y Schritte nach links zu machen. 

Sie können vertreten take 7 steps northwards wie; 

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

Wenn der obige Codeblock ausgeführt wird, haben Sie dies;

Bild-144

Warum werden normalerweise Schleifen verwendet?

  • Sich wiederholende Aufgaben ausführen: Sie können Schleifen verwenden, um Anweisungen auszuführen, bis bestimmte Bedingungen erfüllt sind. 
  • Über Objekte oder Arrays iterieren: Mit Schleifen können Sie Eigenschaften eines Objekts oder Elemente eines Arrays durchlaufen, sodass Sie bestimmte Aktionen für jede Eigenschaft oder jedes Element ausführen können. 
  • Daten filtern: Sie können eine Schleife verwenden, um Daten basierend auf bestimmten Bedingungen zu filtern. 

JavaScript-Schleifen gibt es in verschiedenen Formen; For, While, Do...While, For...of und For...in. Lassen Sie uns sie im Detail untersuchen und zeigen, wie sie funktionieren. 

For loop

A for Die Schleife wird wiederholt, bis eine angegebene Bedingung als wahr ausgewertet wird. Eine for-Schleife hat drei optionale Ausdrücke, gefolgt von einem Codeblock. 

for (initialization; condition; finalExpression) {

  // code

}
  • Das initialization Ausdruck kommt, bevor die erste Schleife ausgeführt wird. Dieser Ausdruck initialisiert normalerweise einen oder mehrere Zähler. 
  • A condition Ausdruck wird jedes Mal vor dem überprüft for Schleife läuft. Der Code in der Schleife oder Anweisung wird jedes Mal ausgeführt, wenn der Ausdruck als wahr ausgewertet wird. Andererseits stoppt die Schleife, wenn der Ausdruck als falsch ausgewertet wird. Wenn der Ausdruck jedoch ausgelassen wird, wird der Ausdruck automatisch als wahr ausgewertet. 
  • Das finalExpression wird nach jedem Schleifendurchlauf ausgeführt. Der Ausdruck wird meistens verwendet, um einen Zähler zu inkrementieren.

Sie können {}, Blockanweisung, verwenden, um mehrere Anweisungen zu gruppieren und auszuführen. Wenn Sie die Schleife vorzeitig verlassen möchten, bevor der Bedingungsausdruck als falsch ausgewertet wird, verwenden Sie die break-Anweisung. 

Beispiele for Schleifen mit Code 

  1. Nutzen Sie den for Schleife zu iterate;
for (let i = 0; i < 7; i++) {

  console.log(i);

}

In diesem Codeblock;

  • Die Variable i wird auf Null initialisiert (es sei i=0). 
  • Die Bedingung ist, dass i kleiner als 7 sein sollte (i=7). 
  • Die Schleife wird wiederholt durchlaufen, wenn der Wert von i kleiner als 7 ist (i<7>. 
  • Die Iteration fügt dem Wert von i nach jeder Iteration 1 hinzu (++1). 
For-Schleife
  1. Nutzen Sie den break Anweisung zum Verlassen der Schleife, bevor die Bedingung als falsch ausgewertet wird;
for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + i);

}
  • Der Codeblock iteriert von 1 bis 10 (i < 11).
  • Die Schleife initialisiert eine Variable i mit einem Wert von 1 (es sei i = 1). 
  • Die Schleifenbedingung wird weiter ausgeführt, wenn der Wert von i kleiner als 11 ist (i < 11). 
  • Der Wert der i erhöht sich nach jeder Iteration um 2 (i += 2). 
Break-Anweisung

Die if-Anweisung wertet aus, ob der Wert von i=9 ist. Wenn die Bedingung wahr ist, wird die break Anweisung ausgeführt und die Schleife beendet. 

(Bild)

For…of loop

Das for…of Schleife iteriert über iterierbare Objekte wie z Map, Array, Arguments und Set. Diese Schleife ruft einen benutzerdefinierten Iterations-Hook mit Anweisungen auf, die für den Wert jeder einzelnen Eigenschaft ausgeführt werden. 

Die Grundstruktur einer for…loop ist;

for (variable of object)

  statement

Beispiele for…of Schleife in Aktion

  1. For…of Schleife, die über ein iteriert array
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];

for (let i of frontendLanguages) {

  console.log(i);

}

In diesem Code;

  • Wir definieren ein Array namens frontendLanguages
  • Das Array hat drei Elemente; "HTML", "CSS",  "JavaScript" and “React”
  • Das for…of loop iteriert über jedes Element in frontendLanguages.
  • Das i im Codeblock nimmt den Wert jedes Elements während jeder Iteration und die auf der Konsole ausgegebenen Werte auf. 
Forof-Array
  1. For…of Schleife, die über a iteriert Set
const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

In diesem Codeblock;

  • Wir deklarieren eine Variable s, die wir a zuordnen new Set mit dem Set()-Konstruktor.
  • Mit der Methode add() werden dem Code zwei Elemente hinzugefügt
  • Das for….of iteriert über das Elements-Objekt.
  • Die Schleife weist vor der Ausführung das aktuelle Element n zu console.log(n) Aussage. 
Forof-Set
  1. For…of Schleife, die über a iteriert Map
const m = new Map();

m.set(4, "rabbit");

m.set(6, "monkey");

m.set(8, "elephant");

m.set(10, "lion");

m.set(12, "leopard");

for (let n of m) {

  console.log(n);

}

In diesem Codeblock;

  • Wir verwenden Map() -Konstruktor, um ein neues Map-Objekt zu erstellen.
  • Eine Variable m wird deklariert.
  • Die .set() -Methode fügen wir fünf Schlüssel-Wert-Paare hinzu.
  • A for…of loop iteriert über Elemente des Map-Objekts m. 
Forof-Karte

For…in loop

A for…in Schleife wird verwendet, um die Eigenschaften eines Objekts zu durchlaufen. Die Grundstruktur einer for…in Schleife ist;

for (property in object) {

  // code

}

Sie können verwenden for…in Schleife, um zu iterieren arrays funktioniert array-like objects

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };

for (const vegetable in shoppingList) {

  console.log(vegetable);

}

In diesem Codeblock;

  • Wir führen ein JavaScript-Objekt ein und benennen es shoppingList
  • Wir verwenden eine for-Schleife, um über jede Eigenschaft auf der zu iterieren shoppingList mit dem in-Operator. 
  • Bei jeder Iteration weist die Schleife den aktuellen Eigenschaftsnamen in der zu shoppingList
Bild-145

While

Das while Schleife wertet a . aus condition, wenn es das findet true, wird der Codeblock ausgeführt. Wenn jedoch die condition is false, endet die Schleife und der Codeblock wird nicht ausgeführt.

Dies ist die Grundstruktur von a while Schleife;

 

while (condition)

    Statement

Die Testbedingung muss vor der Ausführung der Anweisung in der Schleife auftreten. Sie können mehrere Anweisungen mit {}- oder Blockanweisungen ausführen. 

Beispiel von while Schleife in Aktion

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

In diesem Code;

  • Eine Variable n wird mit einem Nullwert initialisiert (n = 0).
  • Die Schleife wird so lange ausgeführt, wie der Wert von n ist kleiner als 9 (n<9)
  • Der Wert der n wird auf der Konsole angezeigt und nach jeder Iteration um 1 erhöht (n++)
  • Die Ausführung des Codes wird bei 8 beendet. 
Während

Do … While Loop

A do…while Schleife iteriert, bis eine bestimmte Bedingung ausgewertet wird false

Die allgemeine Struktur von a do…while Aussage ist;

do

  statement

while (condition);

Die Anweisung wird einmal ausgeführt, jedoch vor dem Prüfen der Bedingung. Die Anweisung wird ausgeführt, wenn die condition is true. Allerdings, wenn die ausgewertet condition is false, wird die Ausführung angehalten, und die Steuerung wird an die Anweisung nach übergeben do..while. Code in a do…while Die Schleife wird garantiert mindestens einmal ausgeführt, auch wenn die Bedingung zu ausgewertet wird true

Beispiel von do…while

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

In diesem Code;

  • Wir führen eine Variable ein n und setze seinen Anfangswert auf 0 (n = 0).
  • Unsere Variable n tritt in eine do…while-Schleife ein, in der ihr Wert nach jeder Iteration um 1 erhöht wird (n+=1)
  • Der Wert der n wird protokolliert.
  • Die Schleife wird so lange ausgeführt, wie der Wert von n kleiner als 7 ist (n < 7). 

Wenn Sie diesen Code ausführen, zeigt die Konsole Werte von n von 1 bis 7 an, während die Schleife 7 Mal ausgeführt wird.

Do-Während

Nested Loop

Eine verschachtelte Schleife ist eine Situation, in der wir eine Schleife in einer Schleife haben. Zum Beispiel können wir eine for-Schleife in einer anderen for-Schleife verschachteln. 

for (let outer = 0; outer < 5; outer += 2) {

  for (let inner = 0; inner < 6; inner += 2) {

    console.log(`${outer}-${inner}`);

  }

}
  • Es gibt zwei Variablen; outer funktioniert inner und beide werden mit dem Wert Null initialisiert.
  • Beide Variablen werden nach jeder Iteration um 2 erhöht
  • Das outer funktioniert inner Schleifen werden jeweils dreimal durchlaufen. 
Bild-146

Loop control statements

Loop control Anweisungen, die manchmal auch als „Sprunganweisungen“ bezeichnet werden, unterbrechen den normalen Ablauf eines Programms. Break funktioniert continue sind Beispiele für Schleifensteuerungsanweisungen.

Anweisungen brechen

Break Anweisungen beenden eine Schleife sofort, auch wenn die Bedingung nicht erfüllt ist. 

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("Loop stops here. We have reached the break statement");

    break;

  }

  console.log(n);

}

Der gerenderte Code erscheint als;

Bild-147

Aussagen fortsetzen

Continue Anweisungen werden verwendet, um einen bestimmten Codeblock zu überspringen und eine Iteration für die neue Schleife auszuführen. 

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

Der gerenderte Code erscheint als;

Bild-148

Fazit

Oben sind die üblichen Schleifen, auf die Sie in Vanilla JavaScript und seinen Frameworks/Bibliotheken stoßen werden. Wie hervorgehoben, hat jeder Schleifentyp seinen Anwendungsfall und unterschiedliche Verhaltensweisen. Wenn Sie den falschen Schleifentyp auswählen, treten wahrscheinlich Fehler auf, und Ihr Code zeigt wahrscheinlich unerwartetes Verhalten. 

Wenn Sie es mit a zu tun haben JavaScript-Framework oder Bibliothek, überprüfen Sie immer deren Dokumentation und verwenden Sie die eingebauten Schleifen. 

Danke an unsere Sponsoren
Weitere großartige Lektüre zum Thema Entwicklung
Treiben Sie Ihr Geschäft an
Einige der Tools und Dienste, die Ihr Unternehmen beim Wachstum unterstützen.
  • Invicti verwendet das Proof-Based Scanning™, um die identifizierten Schwachstellen automatisch zu verifizieren und innerhalb weniger Stunden umsetzbare Ergebnisse zu generieren.
    Versuchen Sie es mit Invicti
  • Web-Scraping, Wohn-Proxy, Proxy-Manager, Web-Unlocker, Suchmaschinen-Crawler und alles, was Sie zum Sammeln von Webdaten benötigen.
    Versuchen Sie es mit Brightdata
  • Semrush ist eine All-in-One-Lösung für digitales Marketing mit mehr als 50 Tools in den Bereichen SEO, Social Media und Content-Marketing.
    Versuchen Sie es mit Semrush
  • Intruder ist ein Online-Schwachstellenscanner, der Cyber-Sicherheitslücken in Ihrer Infrastruktur findet, um kostspielige Datenschutzverletzungen zu vermeiden.
    MIT DER INTELLIGENTEN SCHADENKALKULATION VON Intruder