Detailed explanation of for loop and double for loop in JavaScript

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

Recommend

Problems and solutions for installing Docker on Alibaba Cloud

question When installing Docker using Alibaba Clo...

MySQL 5.7.18 winx64 installation and configuration method graphic tutorial

The installation of compressed packages has chang...

Are you still Select *?

There are many reasons why an application is as s...

Collection of 12 practical web online tools

1. Favicon.cc To create ico icon websites online,...

Mobile Internet Era: Responsive Web Design Has Become a General Trend

We are in an era of rapid development of mobile In...

CSS3 countdown effect

Achieve results Implementation Code html <div ...

CSS3 animation: the image gradually gets bigger when the mouse is on it and gradually shrinks when the mouse leaves it

Effect check address: Tour plan (uplanok.com) Cod...

Linux jdk installation and environment variable configuration tutorial (jdk-8u144-linux-x64.tar.gz)

It is recommended to use the sudo su command to s...

Vue project realizes paging effect

The paging effect is implemented in the vue proje...

CSS Sticky Footer Implementation Code

This article introduces the CSS Sticky Footer imp...

HTML allows partial forced scroll bars to not destroy the overall style and layout

First post the effect picture: A scroll bar appear...

Paragraph layout and line breaks in HTML web pages

The appearance of a web page depends largely on i...

Example of how to increase swap in CentOS7 system

Preface Swap is a special file (or partition) loc...

Pure CSS to modify the browser scrollbar style example

Use CSS to modify the browser scroll bar style ::...

3 functions of toString method in js

Table of contents 1. Three functions of toString ...