Detailed explanation of for loop and double for loop in JavaScript

for loop

The for loop loops through the elements of an array.

grammar:

for (initialization variable; conditional expression; iteration statement) {
The code block to be executed;
}

Initialization variables: generally used to initialize and assign values to loop variables.
Conditional expression: As a loop condition, an expression containing comparison operators is used to limit the boundaries of the loop variable. If the value of the loop variable exceeds the limit, the execution of the loop statement is stopped.
Iteration statement: used to change the value of the loop variable, thereby controlling the number of loops, usually by increasing or decreasing the value of the loop variable.

For loop execution order:

// 1. Declare variables;
// 2. Determine the loop execution condition;
// 3. Code block execution;
// 4. Variable increment;

Example: Find the sum of even numbers from 1 to 100

var num=0
    for(var i=0;i<=100;i+=2){ //i+=2 means i=i+2
      num +=i         
    }
    console.log("Sum of even numbers: "+num)

Double for loop

Nested loops refer to the grammatical structure of defining another loop statement within a loop statement. For example, in a for loop statement, you can nest another for loop. We call such a for loop statement a double for loop.

grammar:

for (outer initialization variable; outer conditional expression; outer iteration statement) {
for (inner initialization variable; inner conditional expression; inner iteration statement) {
The code block to be executed;
}
}

The inner loop can be regarded as the execution statement of the outer loop
The outer loop executes once, and the inner loop executes all

The essence of the double for loop is:

The outer for loop controls the height (number of rows) of the loop;
The inner for loop controls the width of the loop (number of columns);

Example: Output the multiplication table

 for(var i= 0 ; i <= 9 ; i++){
     for(var aa = 1 ; aa <i+1 ; aa++){
       document.write(aa+"*"+i+"="+i*aa);
     }
     document.write("<br />");
   }

You can add some styles to make it more beautiful (add a span element to define the width of the body, change the span element to an inline-block element, and set its fixed width)

<head>
<style> body{
    width:2000px;
  }
  span{
    display:inline-block;
    width:80px;
  } </style>
</head>
<body> 
<script> for(var i= 0 ; i <= 9 ; i++){
     for(var aa = 1 ; aa <i+1 ; aa++){ document.write("<span>"+aa+"*"+i+"="+i*aa+"</span>");
     }
     document.write("<br />");
   } </script>
</body>

Summarize

This concludes this article about for loops and double for loops in JavaScript. For more information about JavaScript double for loops, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Using for loop to traverse array in JavaScript
Problems in deleting array elements in a for loop in JavaScript
JavaScript for loop performance test example
In-depth understanding of the for loop in JavaScript
A brief introduction to JavaScript arrays
Commonly used JavaScript array methods
JavaScript basics for loop and array

<<: How to import/save/load/delete images locally in Docker

>>: mysql solves the problem of finding records where two or more fields are NULL

How to allow remote access to open ports in Linux

Detailed explanation of for loop and double for loop in JavaScript

for loop

Double for loop

Summarize

How to allow remote access to open ports in Linux

React non-parent-child component parameter passing example code

Detailed explanation of the use of Linux seq command

Linux sftp command usage

js realizes a gradually increasing digital animation

Why should the number of rows in a single MySQL table not exceed 5 million?

Installation and use of Linux operation and maintenance tool Supervisor (process management tool)

CSS pseudo-element::marker detailed explanation

How to use bar charts in Vue and modify the configuration yourself

Vue recursively implements custom tree components

Recommend

CSS3 realizes the graphic falling animation effect

In-depth understanding of HTML relative path (Relative Path) and absolute path (Absolute Path)

Linux's fastest text search tool ripgrep (the best alternative to grep)

Vue custom component implements two-way binding

How to implement parent-child component communication with Vue

Automatically install the Linux system based on cobbler

Implementation of docker view container log command

Docker configures the storage location of local images and containers

Example of stars for CSS rating effect

What are the ways to import CSS? What is the difference between link and @import? How to choose

Vue+echart realizes double column chart

Detailed explanation of tinyMCE usage and experience

Detailed explanation of the processing of the three Docker Nginx Logs

HTML table mouse drag sorting function

MYSQL8.0.13 free installation version configuration tutorial example detailed explanation