Comment utiliser les boucles for imbriquées en JavaScript ?-js tutoriel-php.cn

Comment utiliser les boucles for imbriquées en JavaScript ?

WBOY

Libérer： 2023-09-05 10:45:02

avant

890 Les gens l'ont consulté

Comment utiliser les boucles for imbriquées en JavaScript ?

Nous utilisons l'instruction de boucle for de JavaScript pour répéter un ensemble d'instructions dans le corps de la boucle un nombre de fois spécifié. Les boucles for imbriquées, comme leur nom l'indique, sont composées de plusieurs boucles for, une boucle imbriquée dans une autre boucle. Cela nous permet de parcourir des structures de données multidimensionnelles telles que des matrices.

Boucles for imbriquées en JavaScript

Une simple boucle for s'exécute un nombre de fois spécifié en fonction des valeurs d'initialisation et des conditions de fin. En revanche, les boucles for imbriquées ont une ou plusieurs boucles for résidant à l'intérieur de la boucle for externe.

Grammaire

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

Copier après la connexion

Cela créera une boucle for simple qui exécute limit fois. Cela signifie qu'il exécute les instructions dans le corps de la boucle limitées fois.

Dans les boucles imbriquées, l'instruction à l'intérieur du corps de la boucle for est une autre boucle for. Cela provoque l’exécution de la boucle for interne à chaque itération de la boucle for externe.

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

Copier après la connexion

La boucle interne dans cet exemple s'exécute limit fois pour chaque itération de la boucle externe. Par conséquent, la boucle s'exécute sur un total de limit x temps limites.

Les valeurs d'initialisation, les conditions de terminaison et les mises à jour des variables de boucle des deux boucles sont indépendantes l'une de l'autre.

Voyons comment fonctionnent les boucles for imbriquées à travers un exemple.

Exemple 1

Ici, nous utiliserons des boucles for imbriquées pour créer une matrice bidimensionnelle "#".

Jetons un coup d'œil au même code.

<!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>

Copier après la connexion

Dans le code ci-dessus, nous prenons la saisie du nombre de lignes et de colonnes, puis créons la matrice spécifiée à l'aide de boucles imbriquées. Notez que la condition de terminaison de la boucle externe détermine le nombre de lignes de la matrice et la condition de terminaison de la boucle interne détermine le nombre de colonnes de la matrice.

Vous pouvez ajuster les paramètres de la boucle (valeur d'initialisation, condition de fin, mise à jour) et utiliser des boucles imbriquées pour implémenter presque n'importe quel type de parcours imbriqué.

Voyons comment imprimer une pyramide à l'aide de boucles imbriquées.

Exemple 2

Ici, nous allons créer une pyramide en utilisant le symbole * et la hauteur fournie par l'utilisateur. Jetons un coup d'œil au même code.

<!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>

Copier après la connexion

Dans le code ci-dessus, comme indiqué dans le résultat, nous pouvons visualiser de nombreux modèles de parcours différents après avoir modifié les paramètres de la boucle.

RemarqueLa boucle extérieure (boucle 1) dans le programme détermine la hauteur de la pyramide. La première boucle interne (boucle 2) détermine le nombre de caractères d'espacement au début de chaque ligne. La deuxième boucle interne (boucle 3) imprime autant de caractères * que la hauteur de la pyramide dans l'itération en cours.