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

Detailed explanation of for loop and double for loop in JavaScript

for loop

Double for loop

Summarize

MySQL full-text index to achieve a simple version of the search engine example code

jQuery treeview tree structure application

getdata table table data join mysql method

How to implement rounded corners with CSS3 using JS

Navicat connects to MySQL8.0.11 and an error 2059 occurs

VMware Workstation installation Linux (Ubuntu) system

Docker Basics

Implementation of positioning CSS child elements relative to parent elements

A solution to the abnormal exit of Tomcat caused by semaphore

When to use Map instead of plain JS objects

Recommend

Native JS to implement breathing carousel

Top 10 Js Image Processing Libraries

Detailed steps for configuring Tomcat server in IDEA 2020

Detailed explanation of various HTTP return status codes

Pure CSS to solve the ceiling and bottom suction in H5 layout implementation steps

Solve the problem of wireless and audio not working after Windows Server installation

Description of the execution mechanisms of static pages and dynamic pages

Vue+Element UI realizes the encapsulation of drop-down menu

Detailed explanation of how to install mysql5.7.16 from source code in centos7 environment

How to center images horizontally and vertically in DIV or DIV

Linux yum package management method

Understanding v-bind in vue

A brief analysis of understanding Vue components from an object-oriented perspective

Disable input text box input implementation properties

JS 4 super practical tips to improve development efficiency