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

Practice of using Tinymce rich text to customize toolbar buttons in Vue

Table of contents Install tinymce, tinymce ts, ti...

Web Design: The Accurate Location and Use of Massive Materials

Three times of memorization allows you to remembe...

Will CSS3 really replace SCSS?

When it comes to styling our web pages, we have t...

On Visual Design and Interaction Design

<br />In the entire product design process, ...

Web form creation skills

In fact, the three tables above all have three ro...

The current better way to make select list all options when selected/focused

During development, I encountered such a requireme...

Correct use of Vue function anti-shake and throttling

Preface 1. Debounce: After a high-frequency event...

CSS to achieve compatible text alignment in different browsers

In the front-end layout of the form, we often nee...

How to open MySQL binlog log

binlog is a binary log file, which records all my...

CSS Tricks to Create Wave Effects

It has always been very difficult to achieve wave...

Solution to mysql server 5.5 connection failure

The solution to the problem that mysql cannot be ...

The use of setState in React and the use of synchronous and asynchronous

In react, if you modify the state directly using ...

js to call the network camera and handle common errors

Recently, due to business reasons, I need to acce...

How to create, start, and stop a Docker container

1. A container is an independently running applic...

MySql8 WITH RECURSIVE recursive query parent-child collection method

background When developing a feature similar to c...