So konstruieren Sie For-Schleifen in JavaScript

Einführung

Loops werden in der Programmierung verwendet, um sich wiederholende Aufgaben zu automatisieren. Die grundlegendsten Arten von Schleifen, die in JavaScript verwendet werden, sind die Anweisungenwhile unddo...while, die Sie unter „https://www.digitalocean.com/community/tutorials/using-while-and-“ überprüfen können. do-while-Schleifen in Javascript [So konstruieren Sie While- und Do-While-Schleifen in JavaScript]. “

Da die Anweisungenwhile unddo...whileconditionally based sind, werden sie ausgeführt, wenn eine bestimmte Anweisung als Auswertung zutrue zurückgegeben wird. Ähnlich wie sie auch bedingt basieren, enthalten die Anweisungen vonforzusätzliche Funktionen wieloop counter, mit denen Sie die Anzahl der Iterationen der Schleife im Voraus festlegen können.

In diesem Tutorial lernen wir die Anweisungforkennen, einschließlich der Anweisungenfor...of undfor...in, die wesentliche Elemente der Programmiersprache JavaScript sind.

Für Schleife

Die Anweisungfor ist eine Art Schleife, die bis zu drei optionale Ausdrücke verwendet, um die wiederholte Ausführung eines Codeblocks zu implementieren.

Schauen wir uns ein Beispiel an, was das bedeutet.

for (initialization; condition; final expression) {
    // code to be executed
}

In der obigen Syntax gibt es drei Ausdrücke in der Anweisungfor:initialization,condition undfinal expression, auch Inkrementierung genannt.

Lassen Sie uns anhand eines einfachen Beispiels veranschaulichen, was jede dieser Anweisungen bewirkt.

forExample.js

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    // Print each iteration to the console
    console.log(i);
}

Wenn wir den obigen Code ausführen, erhalten wir die folgende Ausgabe:

Output0
1
2
3

Im obigen Beispiel haben wir diefor-Schleife mitlet i = 0 initialisiert, wodurch die Schleife bei0 beginnt. Wir setzen die Bedingung aufi < 4, was bedeutet, dass die Schleife weiter ausgeführt wird, solangei weniger als4 ergibt. Unser letzter Ausdruck voni++ erhöht die Anzahl für jede Iteration durch die Schleife. Dieconsole.log(i) drucken die Zahlen aus, beginnend mit0 und endend, sobaldi als4 ausgewertet wird.

Ohne die Verwendung einer Schleife hätten wir dieselbe Ausgabe mit dem folgenden Code erzielen können.

noLoop.js

// Set initial variable to 0
let i = 0;

// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

Ohne die vorhandene Schleife wiederholt sich der Codeblock und besteht aus mehreren Zeilen. Wenn wir mehr Zahlen inkrementieren müssten, müssten wir noch mehr Codezeilen schreiben.

Lassen Sie uns jeden Ausdruck in der Schleife durchgehen, um sie vollständig zu verstehen.

Initialisierung

Unser erster Ausdruck istinitialization. So sieht es aus.

let i = 0;

Wir deklarieren eine Variable namensi mit dem Schlüsselwortlet (das Schlüsselwortvar kann ebenfalls verwendet werden) und geben ihr den Wert0. Während die Variable beliebig benannt werden kann, wird am häufigsteni verwendet. Die Variablei steht füriteration, ist konsistent und hält den Code kompakt.

Bedingung

Genau wie wir in den Schleifenwhile unddo...while gesehen haben, enthalten die Schleifen vonfor normalerweisecondition. Hier ist unsere Zustandserklärung.

i < 4;

Wir haben bereits festgestellt, dass unsere Iterationsvariablei0 für den Start darstellt. Jetzt sagen wir, dass die Bedingungtrue ist, solangei in diesem Beispiel kleiner als4 ist.

Endgültiger Ausdruck

final expression ist eine Anweisung, die am Ende jeder Schleife ausgeführt wird. Es wird am häufigsten zum Inkrementieren oder Dekrementieren eines Werts verwendet, kann jedoch für jeden Zweck verwendet werden.

i++

In unserem Beispiel erhöhen wir die Variable um eins miti++. Dies entspricht dem Ausführen voni = i + 1.

Im Gegensatz zu den Initialisierungs- und Bedingungsausdrücken endet der endgültige Ausdruck nicht mit einem Semikolon.

Etwas zusammensetzen

Nachdem wir unsere drei in derfor-Schleife enthaltenen Ausdrücke überprüft haben, können wir uns erneut die vollständige Schleife ansehen.

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    console.log(i);
}

Zuerst deklarieren wiri und setzen es auf0. Dann legen wir eine Bedingung für die Ausführung der Schleife fest, bisi kleiner als4 ist. Schließlich erhöhen wiri um eine 1 pro Iteration. Unser Codeblock gibt den Wert voni an die Konsole aus, sodass unser Ergebnis0,1,2 und3 als Ausgabe ist.

Optionale Ausdrücke

Alle drei Ausdrücke in derfor-Schleife sind optional. Zum Beispiel können wir dieselbefor-Anweisung ohne den Initialisierungsausdruck schreiben, indem wir die Variable außerhalb der Schleife initialisieren.

// Declare variable outside the loop
let i = 0;

// Initialize the loop
for (; i < 4; i++) {
    console.log(i);
}

Output0
1
2
3

In diesem Fall ist das erste; erforderlich, um anzugeben, ob sich die Anweisung auf Initialisierung, Bedingung oder endgültigen Ausdruck bezieht, auch wenn sie weggelassen wird.

Unten können wir auch die Bedingung aus der Schleife entfernen. Wir werden eineif-Anweisung in Kombination mitbreak verwenden, um die Schleife anzuweisen, die Ausführung zu beenden, sobaldi größer als3 ist, was die Umkehrung vontrue ist Bedingung.

// Declare variable outside the loop
let i = 0;

// Omit initialization and condition
for (; ; i++) {
    if (i > 3) {
        break;
    }
    console.log(i);
}

Output0
1
2
3

[.note] #Warning: Die Anweisungbreakmust wird eingefügt, wenn die Bedingung weggelassen wird. Andernfalls wird die Schleife für immer alsinfinite loop ausgeführt und stürzt möglicherweise den Browser ab.
#

Zuletzt kann der letzte Ausdruck entfernt werden, indem er stattdessen am Ende der Schleife eingefügt wird. Beide Semikolons müssen noch enthalten sein, sonst funktioniert die Schleife nicht.

// Declare variable outside the loop
let i = 0;

// Omit all statements
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}

Output0
1
2
3

Wie aus den obigen Beispielen hervorgeht, liefert das Einschließen aller drei Anweisungen im Allgemeinen den präzisesten und lesbarsten Code. Es ist jedoch nützlich zu wissen, dass Aussagen weggelassen werden können, falls Sie in Zukunft darauf stoßen.

Ändern eines Arrays

Wir könnenfor-Schleifen verwenden, umarray zu ändern.

Im nächsten Beispiel erstellen wir ein leeres Array und füllen es mit der Schleifenzählervariablen.

modifyArray.js

// Initialize empty array
let arrayExample = [];

// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
    // Update array with variable value
    arrayExample.push(i);
    console.log(arrayExample);
}

Das Ausführen des obigen JavaScript-Codes führt zur folgenden Ausgabe.

Output[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

Wir legen eine Schleife fest, die ausgeführt wird, bisi < 3 nicht mehrtrue ist, und weisen die Konsole an, das ArrayarrayExample am Ende jeder Iteration auf der Konsole zu drucken. Mit dieser Methode können wir sehen, wie das Array mit den neuen Werten aktualisiert wird.

Länge eines Arrays

Manchmal möchten wir, dass eine Schleife mehrmals ausgeführt wird, ohne sicher zu sein, wie viele Iterationen ausgeführt werden. Anstatt wie in den vorherigen Beispielen eine statische Zahl zu deklarieren, können wir dielength property eines Arrays verwenden, damit die Schleife so oft ausgeführt wird, wie Elemente im Array vorhanden sind.

loopThroughArray.js

// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];

// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
    // Print each item to the console
    console.log(fish[i]);
}

Wir erhalten die folgende Ausgabe.

Outputflounder
salmon
pike

In diesem Beispiel erhöhen wir jeden Index des Arrays mitfish[i] (z. Die Schleife wird umfish[0],fish[1] usw. erhöht. Dadurch wird der Index bei jeder Iteration dynamisch aktualisiert.

Weitere Details zufor statement is available on the Mozilla Developer Network.

Für ... In Loop

Die Anweisungfor...initeriert über die Eigenschaften eines Objekts. Zur Demonstration erstellen wir ein einfachesshark-Objekt mit einigenname:value-Paaren.

shark.js

const shark = {
    species: "great white",
    color: "white",
    numberOfTeeth: Infinity
}

Mit derfor...in-Schleife können wir leicht auf jeden der Eigenschaftsnamen zugreifen.

// Print property names of object
for (attribute in shark) {
    console.log(attribute);
}

Outputspecies
color
numberOfTeeth

Wir können auch auf die Werte jeder Eigenschaft zugreifen, indem wir den Eigenschaftsnamen als Indexwert des Objekts verwenden.

// Print property values of object
for (attribute in shark) {
    console.log(shark[attribute]);
}

Outputgreat white
white
Infinity

Wenn wir sie zusammenfügen, können wir auf alle Namen und Werte eines Objekts zugreifen.

// Print names and values of object properties
for (attribute in shark) {
    console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}

OutputSPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity

Wir haben die MethodetoUpperCase()verwendet, um den Eigenschaftsnamen zu ändern, und anschließend den Eigenschaftswert. for...in ist eine äußerst nützliche Methode, um Objekteigenschaften zu durchlaufen.

Überprüfen Siefor...in on the Mozilla Developer Network auf detailliertere Informationen.

Für ... von Loop

Die Anweisungfor...in ist nützlich, um Objekteigenschaften zu durchlaufen. Um jedoch iterierbare Objekte wiearrays undstrings zu durchlaufen, können Sie die Anweisungfor...of verwenden. Die Anweisungfor...of ist eine neuere Funktion abECMAScript 6. ECMAScript (oder ES) ist eine Skriptsprachenspezifikation, die zur Standardisierung von JavaScript erstellt wurde.

In diesem Beispiel einerfor...of-Schleife erstellen wir ein Array und drucken jedes Element im Array an die Konsole.

sharks.js

// Initialize array of shark species
let sharks = [ "great white", "tiger", "hammerhead" ];

// Print out each type of shark
for (let shark of sharks) {
    console.log(shark);
}

Wir erhalten Folgendes als Ausgabe der Anweisungfor...of.

Outputgreat white
tiger
hammerhead

Es ist auch möglich, den den Indexelementen zugeordneten Index mit der Methodeentries()auszudrucken.

sharks.js

...
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
    console.log(index, shark);
}

Output0 'great white'
1 'tiger'
2 'hammerhead'

Ein String kann wie ein Array durchlaufen werden.

sharkString.js

// Assign string to a variable
let sharkString = "sharks";

// Iterate through each index in the string
for (let shark of sharkString) {
    console.log(shark);
}

Outputs
h
a
r
k
s

In diesem Fall haben wir jedes Zeichen in der Zeichenfolge durchlaufen und sie nacheinander gedruckt.

Eine detailliertere Darstellung der Unterschiede zwischenfor...in undfor...of finden Sie unterfor...of loops on the Mozilla Developer Network.

Fazit

In diesem Tutorial haben wir gelernt, wie manfor-Schleifen in JavaScript erstellt, die aus den Anweisungenfor,for...of undfor...in bestehen.

Schleifen sind ein wesentlicher Bestandteil der Programmierung in JavaScript und werden verwendet, um sich wiederholende Aufgaben zu automatisieren und den Code übersichtlicher und effizienter zu gestalten.

TOC