JS-Tutorial

JS-HAUS JS-Einführung JS Wohin JS-Ausgabe JS-Anweisungen JS-Syntax JS-Kommentare JS-Variablen JS Let JS Konst JS-Operatoren JS-Arithmetik JS-Aufgabe JS-Datentypen JS-Funktionen JS-Objekte JS-Ereignisse JS-Strings JS-String-Methoden Suche nach JS-Strings JS-String-Vorlagen JS-Nummern JS-Zahlenmethoden JS-Arrays JS-Array-Methoden JS-Array-Sortierung JS-Array-Iteration JS-Array-Konstante JS-Daten JS-Datumsformate JS Date Get-Methoden JS-Datumssatzmethoden JS Math JS Zufällig JS Boolesche Werte JS-Vergleiche JS-Bedingungen JS-Schalter JS-Schleife für JS-Schleife für In JS-Schleife für Of JS-Schleife While JS Pause JS-Iterables JS-Sets JS-Karten JS Typeof JS-Typkonvertierung JS Bitweise JS RegExp JS-Fehler JS-Bereich JS Heben Strenger JS-Modus JS dieses Schlüsselwort JS-Pfeilfunktion JS-Klassen JS JSON JS-Debugging JS-Styleguide JS Best Practices JS-Fehler JS-Leistung JS Reservierte Wörter

JS-Versionen

JS-Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-Geschichte

JS-Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsmethoden Objektkonstruktoren Objekt-Prototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS-Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion anwenden Funktionsschließungen

JS-Klassen

Klasse Einführung Klassenvererbung Klasse statisch

JS asynchron

JS-Rückrufe JS asynchron JS verspricht JS Async/Warten

JS-HTML-DOM

DOM-Einführung DOM-Methoden DOM-Dokument DOM-Elemente DOM-HTML DOM-Formulare DOM-CSS DOM-Animationen DOM-Ereignisse DOM-Ereignis-Listener DOM-Navigation DOM-Knoten DOM-Sammlungen DOM-Knotenlisten

Stückliste des JS-Browsers

JS-Fenster JS-Bildschirm JS-Standort JS-Geschichte JS-Navigator JS-Popup-Warnung JS-Timing JS-Cookies

JS-Web-APIs

Web-API-Einführung Web Forms-API Webprotokoll-API Webspeicher-API Web Worker-API Web-Fetch-API Web-Geolocation-API

JS AJAX

AJAX-Einführung AJAX-XMLHttp AJAX-Anfrage AJAX-Antwort AJAX-XML-Datei AJAX-PHP AJAX ASP AJAX-Datenbank AJAX-Anwendungen AJAX-Beispiele

JS JSON

JSON-Einführung JSON-Syntax JSON vs. XML JSON-Datentypen JSON-Parsing JSON-Stringify JSON-Objekte JSON-Arrays JSON-Server JSON-PHP JSON-HTML JSON JSONP

JS vs. jQuery

jQuery-Selektoren jQuery-HTML jQuery-CSS jQuery-DOM

JS-Grafik

JS-Grafik JS-Leinwand JS Plotly JS Chart.js JS Google-Diagramm JS D3.js

JS-Beispiele

JS-Beispiele JS-HTML-DOM JS-HTML-Eingabe JS-HTML-Objekte JS-HTML-Ereignisse JS-Browser JS-Editor JS-Übungen JS-Quiz JS-Zertifikat

JS-Referenzen

JavaScript-Objekte HTML-DOM-Objekte


JavaScript- For-Schleife


Schleifen können einen Codeblock mehrmals ausführen.


JavaScript-Schleifen

Schleifen sind praktisch, wenn Sie denselben Code immer wieder ausführen möchten, jedes Mal mit einem anderen Wert.

Bei der Arbeit mit Arrays ist dies oft der Fall:

Anstatt zu schreiben:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Du kannst schreiben:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Verschiedene Arten von Schleifen

JavaScript unterstützt verschiedene Arten von Schleifen:

  • for - Durchläuft einen Codeblock mehrmals
  • for/in - durchläuft die Eigenschaften eines Objekts
  • for/of - durchläuft die Werte eines iterierbaren Objekts
  • while - Durchläuft einen Codeblock, während eine angegebene Bedingung wahr ist
  • do/while - Durchläuft auch einen Codeblock, während eine angegebene Bedingung wahr ist

Die For-Schleife

Die forSchleife hat folgende Syntax:

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Anweisung 1 wird (einmal) vor der Ausführung des Codeblocks ausgeführt.

Anweisung 2 definiert die Bedingung für die Ausführung des Codeblocks.

Anweisung 3 wird (jedes Mal) ausgeführt, nachdem der Codeblock ausgeführt wurde.

Beispiel

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Aus dem obigen Beispiel können Sie lesen:

Anweisung 1 setzt eine Variable, bevor die Schleife beginnt (es sei i = 0).

Anweisung 2 definiert die Bedingung für die Ausführung der Schleife (i muss kleiner als 5 sein).

Anweisung 3 erhöht einen Wert (i++) jedes Mal, wenn der Codeblock in der Schleife ausgeführt wurde.



Aussage 1

Normalerweise verwenden Sie Anweisung 1, um die in der Schleife verwendete Variable zu initialisieren (lassen Sie i = 0).

Dies ist nicht immer der Fall, JavaScript kümmert sich nicht darum. Aussage 1 ist optional.

Sie können viele Werte in Anweisung 1 einleiten (durch Komma getrennt):

Beispiel

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

Und Sie können Anweisung 1 weglassen (wie wenn Ihre Werte festgelegt werden, bevor die Schleife beginnt):

Beispiel

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Aussage 2

Oft wird Anweisung 2 verwendet, um den Zustand der Anfangsvariablen auszuwerten.

Dies ist nicht immer der Fall, JavaScript kümmert sich nicht darum. Aussage 2 ist ebenfalls optional.

Wenn Anweisung 2 wahr zurückgibt, beginnt die Schleife erneut, wenn sie falsch zurückgibt, endet die Schleife.

Wenn Sie Anweisung 2 weglassen, müssen Sie innerhalb der Schleife einen Break angeben. Sonst endet die Schleife nie. Dies wird Ihren Browser zum Absturz bringen. Lesen Sie mehr über Pausen in einem späteren Kapitel dieses Tutorials.


Erklärung 3

Oft erhöht Anweisung 3 den Wert der Anfangsvariablen.

Dies ist nicht immer der Fall, JavaScript kümmert sich nicht darum, und Anweisung 3 ist optional.

Anweisung 3 kann so etwas wie negatives Inkrement (i--), positives Inkrement (i = i + 15) oder irgendetwas anderes tun.

Anweisung 3 kann auch weggelassen werden (wie wenn Sie Ihre Werte innerhalb der Schleife erhöhen):

Beispiel

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

Schleifenumfang

Verwendung varin einer Schleife:

Beispiel

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Verwendung letin einer Schleife:

Beispiel

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

Im ersten Beispiel vardeklariert die in der Schleife deklarierte Variable mithilfe von die Variable außerhalb der Schleife neu.

Im zweiten Beispiel, bei letdem die in der Schleife deklarierte Variable verwendet wird, wird die Variable außerhalb der Schleife nicht erneut deklariert.

Wenn letverwendet wird, um die i-Variable in einer Schleife zu deklarieren, ist die i-Variable nur innerhalb der Schleife sichtbar.


For/Of- und For/In-Schleifen

Die for/inSchleife und die for/ofSchleife werden im nächsten Kapitel erklärt.


While-Schleifen

Die whileSchleife und die do/whilewerden in den nächsten Kapiteln erklärt.


Testen Sie sich mit Übungen

Übung:

Erstellen Sie eine Schleife, die von 0 bis 9 verläuft.

let i;
 ( = ;  < ; ) {
  console.log(i);
}