Wie ich versucht habe, das Innere einer verschachtelten For-Schleife in JavaScript zu verstehen

Was steht in diesem Leitfaden?

Dies ist eine grundlegende Anleitung, in der ich versucht habe, verschachtelte „for-Schleifen“ in JavaScript Schritt für Schritt zu erklären. Die Logik und Iterationen der Schleife im Detail aufschlüsseln, indem ein Programm geschrieben wird, das ein durchgehendes quadratisches Muster auf der Browserkonsole druckt. Ich werde erklären, was im Kopf einer Schleife passiert, sowie die Iterationen innerhalb der verschachtelten Schleife und ihre Arbeitsreihenfolge.

Für wen ist der Leitfaden gedacht?

Der Leitfaden richtet sich an absolute Anfänger, die die grundlegenden JavaScript-Grundlagen erlernt haben oder sich über die Funktionsweise der „for-Schleife“ im Klaren sind.

Voraussetzung: Grundlegendes JavaScript, Datentypen (Zeichenfolge, Zahl), Operatoren (=, <, >, , =) und For-Schleife.

Dieser Artikel wurde ursprünglich unter Webdevstack.hashnode.dev veröffentlicht

Einführung

Das Drucken eines einfarbigen quadratischen Musters ist eine Herausforderung für Anfänger. Die Herausforderung besteht darin, ein Programm zu schreiben, das anhand eines bestimmten Zeichens ein Muster ausgibt, das die Form eines festen Quadrats auf der Konsole erzeugt. In dieser Anleitung werden wir das Programm Schritt für Schritt mit der for-Schleife schreiben, um zu verstehen, wie die Schleife funktioniert, und jeden Schritt im Detail aufschlüsseln, was passiert, wenn eine for-Schleife zu funktionieren beginnt.

Das Problem verstehen

Visualisieren Sie ein Muster in Form eines ausgefüllten Quadrats aus einem beliebigen Zeichen, z. B. #, in einer Rastergröße von 4 × 4 Zeichen. Das bedeutet, dass vier Zeilen mit je vier Zeichen das ausgefüllte Quadrat der Größe 4 x 4 (Spalte und Zeile) bilden. So sollte es auf der Konsole aussehen.

Es ist notwendig, die Reihenfolge des Musters zu verstehen. Jedes neue Zeichen besteht aus 4 Zeichen (als Spaltenanzahl) und ergibt eine Zeile. Wir müssen diesen Satz in jeder neuen Zeile viermal wiederholen, um unser spezifisches Muster zu drucken.

Starten des Basic

Beginnen wir zunächst mit der Deklaration von Variablen zum Speichern einiger Werte. Die erste Variable ist die Größe, die die Zahl 4 speichert, die zur Berechnung des Musters erforderlich ist. Das zweite ist result, dem eine leere Zeichenfolge zugewiesen wird, um die endgültige Ausgabe zu speichern. Da es einen String-Wert enthält, wird dem Ergebnis ein leerer String als Anfangswert zugewiesen. (Sie können die Ausgabe am Ende überprüfen, was sie zurückgibt, wenn Sie keine leere Zeichenfolge speichern)

let size = 4;
let result = "";

(Es ist möglich, dies zu tun, ohne Variablen zu initialisieren, aber die Variable wird zur besseren Wartung verwendet. Abgesehen von der for-Schleife könnte das Programm auch mit einer while-Schleife oder mit anderen Methoden geschrieben werden, aber das ist nicht unser Ziel dieser Anleitung)

Schreiben wir zum Beispiel unsere grundlegende „for-Schleife“, um die Schleife zu verstehen, indem wir sie in kleine Schritte unterteilen. Wenn wir die Grundlagen klar verstehen, können wir unseren nächsten Schritt leichter in Betracht ziehen.

let size = 4;
let result = "";

Grundlegendes zur Grundeinrichtung

• Variablen-Setup

  Größe = 4; – Anzahl der Schleifeniterationen.

  result = ""; – Leere Zeichenfolge zum Speichern der endgültigen Ausgabe.

• Schleifeninitialisierung: count = 0; legt den Startwert für die „For-Schleife“ fest.

• Schleifenkonditionierung: Anzahl < Größe; Prüft, ob count kleiner als size ist. Die Schleife läuft, bis die Bedingung „falsch“ zurückgibt.

• Schleifenkörper: result = "#"; Hängt ein „#“-Zeichen an das Ergebnis bei jeder for-Schleifeniteration an.

• Schleifenvariable aktualisieren: count ; Inkremente zählen am Ende jeder Iteration um 1.

  Anzahl → Anzahl = Anzahl 1

  Eine Inkrementierung ist erforderlich, sonst läuft die Schleife endlos.

Anhängen: Hinzufügen eines neuen Werts am Ende des vorhandenen Werts. Lassen Sie beispielsweise text = „Hallo“; Wenn ich einen anderen Wert mit der Textvariablen verkette, z. B. text = „World“; Es hängt die Zeichenfolge „World“ an den vorhandenen Wert „Hello“ an, was zur Ausgabe „HelloWorld“ führt. text = „Welt“ → text = text „Welt“ → text = „Hallo“ „Welt“ → text = „HalloWelt“

Was passiert bei jeder Iteration?

Größe = 4; result = „“;

Iteration 1:

• count = 0; → zählen < Größe; → 0 < 4 → Bedingung wahr → Schleifenkörper

• result = „#“; → result = result „#“; → result = „“ „#“ → result = „#“;

• Anzahl → Anzahl = Anzahl 1 → Anzahl = 0 1 → Anzahl = 1

Iteration 2:

• Anzahl = 1; → zählen < Größe; → 1 < 4 → wahr → Schleifenkörper

• result = „#“; → result = result „#“; → result = „#“ „#“ → result = „##“;

• Anzahl → Anzahl = Anzahl 1 → Anzahl = 1 1 → Anzahl = 2

Iteration 3:

• Anzahl = 2; → 2 < 4 → wahr → Schleifenkörper

• result = „#“; → Ergebnis ist „###“

• Anzahl → Anzahl ist 3

Iteration 4:

• Anzahl = 3; → 3 < 4 → wahr → Schleifenkörper

• result = „#“; → Ergebnis ist „####“

• Anzahl → Anzahl ist 4

Das Ende der Iteration:

• Anzahl = 4; → 4 < 4 → falsch → Schleife stoppt.

console.log(result); Gibt den Endwert aus dem Ergebnis an die Konsole aus. Der Endwert ist der zuletzt aktualisierte Wert. In diesem Fall Ausgabe: ####

Das Nest bauen – Musterkonstruktion

Bisher haben wir mithilfe einer For-Schleife vier „#“-Zeichen (jedes Zeichen könnte als Spalte betrachtet werden) in einer Zeile (die wir Zeile nennen) gedruckt. Wir benötigen insgesamt 4 Zeilen mit ähnlichen Zeichensätzen ####, um die Dimension für ein Quadrat zu bilden. ✅

Wir können dies erreichen, indem wir unsere gesamte Schleife viermal wiederholen, indem wir die Schleife in eine neue Schleife einfügen. Diese neue Schleife erstellt jeden Satz #### von Zeichen viermal. Dies bildet eine verschachtelte Schleife, also eine Schleife innerhalb einer anderen Schleife, eine innere Schleife und eine äußere Schleife.

?Jedes Mal, wenn die äußere Schleife ausgeführt wird, wird die innere Schleife ausgeführt, die ebenfalls viermal iteriert. Das bedeutet, dass vier Iterationen der äußeren Schleife die innere Schleife viermal ausführen, was insgesamt 16 Iterationen für die innere Schleife ergibt. Das sieht wie folgt aus.

Ändern wir unseren Code entsprechend unserer Idee und aktualisieren wir auch die Variablennamen der Schleifen entsprechend. Der Name für die innere Schleife lautet „col“, da Zeichen durch die Spaltenanzahl platziert werden, und für die äußere Schleife lautet er „row“.

let size = 4;
let result = "";

Beide Schleifen werden so lange wiederholt, bis die Bedingungszeile < Größe und Farbe < Größe wird falsch. Die Zeile und die Spalte erhöhen in jeder Iteration nacheinander ihre eigenen Werte.

Wenn wir nun unseren Code ausführen, sieht die Ausgabe wie folgt aus: ################, was nicht unsere gewünschte Ausgabe ist. Dies liegt daran, dass wir nicht für jede Zeile eine neue Zeile eingefügt haben.

• Als innere Schleife, die für jeden Satz #### verantwortlich ist, hängen wir das neue Zeilenzeichen „n“ an dasselbe Variablenergebnis an, nach der inneren Schleife, aber immer noch innerhalb des Körpers der äußeren Schleife: result = „n“. ";

for(let count = 0; count < size; count++){
    result += "#";
}
console.log(result);
// Play with this code on a code playground or on console.

• Für jede Zeile hängt die innere Schleife das Zeichen „#“ an das Ergebnis an. Sobald das Zeichen hinzugefügt und beendet wurde, hängt die äußere Schleife „n“ an die Ergebnisvariable an, um in eine neue Zeile zu wechseln.

Bremsen der verschachtelten Iterationen

➿ Äußere Schleife

Iteration1: Zeile = 0 → Zeile < Größe → 0 < 4 → wahr

-- Äußerer Schleifenkörper

--- Innere Schleife

--- Iteration1: Spalte = 0: Ergebnis = „#“, also wird Ergebnis zu „#“, Spalte

--- Iteration2: Spalte = 1: Ergebnis = „#“, also wird Ergebnis zu „##“, Spalte

--- Iteration3: Spalte = 2: Ergebnis = „#“, sodass das Ergebnis zu „###“ wird, Spalte

--- Iteration4: Spalte = 3: Ergebnis = „#“, sodass das Ergebnis zu „####“ wird, Spalte

--- Ausgang der inneren Schleife

--result = „n“: Ein Zeilenumbruchzeichen wird hinzugefügt, sodass das Ergebnis zu „####n“ wird.

Zeile → Wert der Zeile auf 1 erhöhen

Iteration2: Zeile = 1 → Zeile < Größe → 1 < 4 → wahr

-- Äußerer Schleifenkörper

--- Innere Schleife

--- Iteration1: Spalte = 0: Ergebnis = „#“, also wird das Ergebnis zu „####n#“, Spalte

--- Iteration2: col = 1: result = „#“, also wird das Ergebnis zu „####n##“, col

--- Iteration3: col = 2: result = „#“, also wird das Ergebnis zu „####n###“, col

--- Iteration4: Spalte = 3: Ergebnis = „#“, also wird das Ergebnis zu „####n####“, Spalte

--- Ausgang der inneren Schleife

-- result = „n“: Ein Zeilenumbruchzeichen wird hinzugefügt, sodass das Ergebnis zu „####n####n“ wird.

Zeile → Wert der Zeile auf 2 erhöhen

Der nachfolgende Vorgang wird wiederholt

-Iteration3: Zeile = 2 → 2 < 4 → wahr → „####n####n####n“ → Zeile erhöht den Wert auf 3

-Iteration4: Zeile = 3 → 3 < 4 → wahr → „####n####n####n####n“ → Zeile erhöht den Wert auf 4

-End Iteration: row = 2 → 2 < 4 → false → Stoppt

➿ Ausgänge der äußeren Schleife

Letzte Zeile console.log(result); druckt den Endwert.

„####n####n####n####n“ ist der Endwert, den die Ergebnisvariable am Ende speichert. Das „n“ führt den Zeilenumbruch aus, während die Ausgabe auf der Konsole ausgegeben wird.

let size = 4;
let result = "";

Abschluss

Das Ausführen komplexer Aufgaben wie das Iterieren und Anzeigen mehrdimensionaler Datenstrukturen erfordert häufig die Verwendung verschachtelter Schleifen. Bisher haben wir eine verschachtelte Schleife eines Basisprogramms untersucht, um eine Grundlage für ein grundlegendes Verständnis zu schaffen. Wir haben die Iterationsschritte für eine Basisschleife und die verschachtelte Schleife aufgeschlüsselt. Für mehr Übung schlage ich vor, verschiedene Variationen dieses Programms zu schreiben, z. B. dem Benutzer die Möglichkeit zu geben, Größe und Zeichen für das Muster einzugeben, ein Rechteckmuster zu erstellen oder dasselbe Programm mit einer anderen Methode zu implementieren.

console.log(“Danke fürs Lesen”);

Das obige ist der detaillierte Inhalt vonWie ich versucht habe, das Innere einer verschachtelten For-Schleife in JavaScript zu verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!