How to use nested for loops in JavaScript?-JS Tutorial-php.cn

How to use nested for loops in JavaScript?

WBOY

Release： 2023-09-05 10:45:02

forward

1025 people have browsed it

How to use nested for loops in JavaScript?

We use JavaScript’s for loop statement to repeat a set of statements in the loop body a specified number of times. Nested for loops, as the name suggests, are composed of multiple for loops, one loop nested inside another loop. This allows us to loop over multidimensional data structures such as matrices.

Nested for loops in JavaScript

A simple for loop executes a specified number of times based on initialization values and termination conditions. Nested for loops, on the other hand, have one or more for loops residing inside the outer for loop.

grammar

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

Copy after login

This will create a simple for loop that executes limit times. This means that it executes the statements within the loop body limited times.

In a nested loop, the statement in the for loop body is another for loop. This causes the inner for loop to execute on each iteration of the outer for loop.

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

Copy after login

The inner loop in this example runs limit times for each iteration of the outer loop. Therefore, the loop runs a total of limit x limit times.

The initialization values, termination conditions and updates of loop variables of the two loops are independent of each other.

Let’s see how nested for loops work through an example.

Example 1

Here we will use nested for loops to create a "#" two-dimensional matrix.

Let’s take a look at the same 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>

Copy after login

In the above code, we get the input of the number of rows and columns, and then use nested loops to create the specified matrix. Note, the termination condition of the outer loop determines the number of rows of the matrix, and the termination condition of the inner loop determines the number of columns of the matrix.

You can adjust the parameters of the loop (initialization value, termination condition, update), and use nested loops to implement almost any type of nested traversal.

Let's see how to print the pyramid using nested loops.

Example 2

Here we will create a pyramid using the * symbol and the height provided by the user. Let's take a look at the same 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>

Copy after login

In the code above, as shown in the output, we can visualize many different traversal patterns after changing the loop parameters.

NoteThe outer loop (loop 1) in the program determines the height of the pyramid. The first inner loop (loop 2) determines the number of space characters at the beginning of each line. The second inner loop (loop 3) prints as many * characters as the height of the pyramid in the current iteration.

in conclusion

Nested loops are a very useful structure that are widely used and frequently used.

The above is the detailed content of How to use nested for loops in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!