JS loop learning: use of for loop statements (detailed examples)

In the previous article "JS Loop Learning: The Use of While Loop Statements (Detailed Examples)", we briefly learned about the while loop and the do while loop, and today we will introduce another loop—— for loop statement, hope it helps everyone!

1: for loop

The for loop will pre-define the variable that controls the number of loops in for statement, so the for loop statement can perform loop operations according to the known number of loops, which is suitable for situations where the number of times the script needs to be run is clearly known.

The syntax format of the for loop is as follows:

for (初始化语句; 循环条件; 变量更新--自增或自减) {
    语句块;   
}

The for loop statement can be disassembled into 4 parts: three of the () Expressions and "statement blocks" in {}, let's analyze them below.

Statement analysis:

• Initialization statement (expression 1): mainly initializes a variable value, used to set a counter, that is, the value at the beginning of the loop ; This statement is only executed during the first loop and will not be executed again in the future.

• Loop condition (expression 2): Restriction condition for loop execution, used to control whether to execute the code in the loop body; if the condition is TRUE, the loop continues, if the condition is FALSE , the loop ends and exits the loop immediately.
  

• Variable update (expression 3): an expression with an increment or decrement operation. Every time the loop is executed, the value of the counter is immediately modified so that the loop The conditions gradually become "untenable".
  

• Statement block: Several codes that need to be executed when the condition is judged to be true.
  

Is the above description a bit convoluted? Let’s take a look at the execution flow chart of the for loop statement to understand the execution of the for loop more intuitively. Process:

# Now that we understand the execution process of the for loop, let’s do the actual operation and do a small question to see if we have mastered it!

Example: Calculate the sum from 1 to 100

<script type="text/javascript">
	var sum=0;
	for(var i=1; i<=100; i++){
		sum+=i;
	}
	console.log(&#39;1 + 2 + 3 +...+ 99 + 100 = &#39;+sum);
</script>

##Three expressions in a for loop

JS The three expressions in brackets in the for loop can be omitted, but the semicolon used to separate the three expressions cannot be omitted, as shown in the following example:

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

2: For loop nesting

No matter what kind of loop, it can be nested (that is, one or more loops can be defined in a loop).

Grammar format:

for (初始化语句1; 循环条件; 变量更新--自增或自减) {
    //语句块1;   
    for (初始化语句2; 循环条件; 变量更新--自增或自减) {
        //语句块2;
        for (初始化语句3; 循环条件; 变量更新--自增或自减) {
            //语句块3; 
            .....  
        }
    }
}

Here, we define three nestings of for loops. Of course, we can nest as many for loops as we want. .

Case: for loop to implement multiplication table

First of all, let’s observe the multiplication table

We can draw the pattern of the chart:

• There are a total of 9 rows and 9 columns, and there are several expressions in each row.

• In line i, the expression starts from i*1 and ends at i*i. There are a total of i expressions (we can achieve this effect through a loop).

Therefore, a double loop is needed to control the output. The outer loop controls the number of rows i (i is minimum 1 and the maximum is 9), and the inner loop controls column j (j is minimum 1, the maximum is equal to i).

Implementation code:

for(var i = 1; i <= 9; i++){     //外层循环控制行
	for(var j = 1; j <= i; j++) //内层循环控制列
	{
		document.write(j+"*"+i+"="+j*i+"   ");
	}
	document.write("</br>");
}

Output result:

We can also put the 99 multiplication table as shown in the beginning picture Output into a table:

document.write("<table>");

for (var i = 1; i <= 9; i++) { //外层循环控制行
	document.write("<tr>");
	for (var j = 1; j <= i; j++) //内层循环控制列
	{
		document.write("<td>" + j + "*" + i + "=" + j * i + "</td>");
	}
	//换行，控制每行的输出几个表达式
	document.write("</tr>");
}
document.write("</table>");

Then add css style to modify it:

table {
	width: 600px;
	border-collapse: separate;
}

table td {
	border: #000 1px solid;
	text-align: center;
}

Look at the output:

[Recommended learning:

javascript advanced tutorial]

The above is the detailed content of JS loop learning: use of for loop statements (detailed examples). For more information, please follow other related articles on the PHP Chinese website!