Heim > Artikel > Web-Frontend > Wie verwende ich verschachtelte for-Schleifen in JavaScript?

Wie verwende ich verschachtelte for-Schleifen in JavaScript?

WBOYnach vorne: 2023-09-05 10:45:02960Durchsuche

Wir verwenden die for-Schleifenanweisung von JavaScript, um eine Reihe von Anweisungen im Schleifenkörper eine bestimmte Anzahl von Malen zu wiederholen. Verschachtelte for-Schleifen bestehen, wie der Name schon sagt, aus mehreren for-Schleifen, wobei eine Schleife in einer anderen Schleife verschachtelt ist. Dadurch können wir mehrdimensionale Datenstrukturen wie Matrizen durchlaufen.

Verschachtelte for-Schleifen in JavaScript

Eine einfache for-Schleife wird basierend auf Initialisierungswerten und Beendigungsbedingungen eine bestimmte Anzahl von Malen ausgeführt. Verschachtelte for-Schleifen hingegen verfügen über eine oder mehrere for-Schleifen, die sich innerhalb der äußeren for-Schleife befinden.

Grammatik

for(let i = 0 ; i < limit; i++){
   // statement
}

Dadurch wird eine einfache for-Schleife erstellt, die limitierte Mal ausgeführt wird. Das bedeutet, dass die Anweisungen im Schleifenkörper begrenzt mal ausgeführt werden.

In verschachtelten Schleifen ist die Anweisung im for-Schleifenkörper eine weitere for-Schleife. Dadurch wird die innere for-Schleife bei jedem Durchlauf der äußeren for-Schleife ausgeführt.

for(let i = 0 ; i < limit; i++){
   for(let j = 0 ; j < limit; j++){
      // statement
   }
   // statement for outer loop
}

Die innere Schleife in diesem Beispiel wird begrenzt Mal für jede Iteration der äußeren Schleife ausgeführt. Daher läuft die Schleife insgesamt limit x limit mal.

Die Initialisierungswerte, Beendigungsbedingungen und Aktualisierungen der Schleifenvariablen der beiden Schleifen sind unabhängig voneinander.

Sehen wir uns anhand eines Beispiels an, wie verschachtelte for-Schleifen funktionieren.

Beispiel 1

Hier verwenden wir verschachtelte for-Schleifen, um eine zweidimensionale Matrix „#“ zu erstellen.

Sehen wir uns denselben Code an.

<!DOCTYPE html>
<html>
<body>
   <h3> The nested for loop in JavaScript</h3>
   <p> Enter number of rows and columns to create matrix</p>
   <form>
      <label >Rows : </label>
      <input type = "text" id = "rows"><br><br>
      <label > Columns : </label>
      <input type = "text" id = "cols"><br><br>
      <input type = "button" onclick = "fun()" value = "Create Matrix">
   </form>
   <br><br>
   <div id="result"></div>
   <script>
      function fun(){
         var text = "";
         var rows = document.getElementById("rows").value;
         var cols = document.getElementById("cols").value;
         for(let i = 0 ; i < rows; i++){
            for(let j = 0 ; j < cols ; j++){
               text += "#"
            }
            text += "<br>";
         }
         document.getElementById("result").innerHTML = text;
      }
   </script>
</body>
</html>

Im obigen Code nehmen wir die Eingabe der Anzahl der Zeilen und Spalten und erstellen dann die angegebene Matrix mithilfe verschachtelter Schleifen. Beachten Sie, dass die Abschlussbedingung der äußeren Schleife die Anzahl der Zeilen der Matrix bestimmt und die Abschlussbedingung der inneren Schleife die Anzahl der Spalten der Matrix bestimmt.

Sie können die Parameter der Schleife anpassen (Initialisierungswert, Beendigungsbedingung, Aktualisierung) und verschachtelte Schleifen verwenden, um nahezu jede Art von verschachteltem Durchlauf zu implementieren.

Sehen wir uns an, wie man mithilfe verschachtelter Schleifen eine Pyramide druckt.

Beispiel 2

Hier erstellen wir eine Pyramide mit dem *-Symbol und der vom Benutzer angegebenen Höhe. Schauen wir uns den gleichen Code an.

<!DOCTYPE html>
<html>
<body>
   <h3>The nested for loop in javascript</h3>
   <p>Enter the height of the pyramid:</p>
   <form>
      <label>Height : </label>
      <input type="text" id="height"><br><br>
      <input type="button" onclick="fun()" value="Create Pyramid">
   </form>
   <br><br>
   <div id="result"></div>
   <script>
      function fun() {
         var text = "";
         var height = document.getElementById("height").value;

         // loop 1
         for (let i = 0; i < height; i++) {
            // loop 2
            for (let j = 0; j < height - i; j++) {
               text += " "
            }
            // loop 3
            for (let j = 0; j <= i; j++) {
               text += "*";
            }
            text += "<br>";
         }
         document.getElementById("result").innerHTML = text;
      }
   </script>
</body>
</html>

Im obigen Code können wir, wie in der Ausgabe gezeigt, eine Reihe verschiedener Durchlaufmuster visualisieren, nachdem wir die Schleifenparameter geändert haben.

HinweisDie äußere Schleife (Schleife 1) im Programm bestimmt die Höhe der Pyramide. Die erste innere Schleife (Schleife 2) bestimmt die Anzahl der Leerzeichen am Anfang jeder Zeile. Die zweite innere Schleife (Schleife 3) gibt so viele *-Zeichen aus, wie die Höhe der Pyramide in der aktuellen Iteration beträgt.

Fazit

Nested Loop ist eine sehr nützliche Struktur, die vielseitig ist und häufig verwendet wird.

Das obige ist der detaillierte Inhalt vonWie verwende ich verschachtelte for-Schleifen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie konvertiere ich Bindestriche in JavaScript in CamelCase?Nächster Artikel：Wie konvertiere ich Bindestriche in JavaScript in CamelCase?

In Verbindung stehende Artikel

Mehr sehen