Does JavaScript have a for loop?

青灯夜游
Release: 2022-03-01 11:41:26
Original
2213 people have browsed it

There is a for loop in JavaScript. The for loop in JavaScript language is used to execute code blocks multiple times. It is a commonly used loop tool in JS and is suitable for use when the number of loops is known; the syntax "for (initialization expression; conditional expression; variable update) { condition Code that is executed when the expression is true}".

Does JavaScript have a for loop?

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

There is a for loop in JavaScript.

The for loop in JavaScript language is used to execute code blocks multiple times. It is the most commonly used loop tool in JavaScript and can also be used for array traversal loops, etc.

Why do we use for loop? For example, if we want the console to output all numbers between 1 and 1000, if we write the output statement alone, we have to write 1000 lines of code, but if we use a for loop, it can be achieved with just a few lines of code. In short, using for loops can make us write code more conveniently and quickly (of course, otherwise why would we need it).

JS for loop syntax

JS for loop is suitable for use when the number of loops is known. The syntax format is as follows:

for(初始化表达式; 条件表达式; 变量更新) { // 条件表达式为true时执行的代码 }
Copy after login
  • Initialization expression: usually used to declare the initial value of a counter, that is, the value at the beginning of the loop.

  • Conditional expression: Defines the condition for running the loop code block, which is used to control whether to execute the code in the loop body. If the condition is FALSE, the loop will exit immediately.

  • Variable update: executed after each loop code block is executed; each time the loop is executed, the counter value is immediately modified;

The execution flow of the for loop statement is shown in the figure below:

Does JavaScript have a for loop?

Example 1:

For example, in an HTML file, we write The following code implements calculation of the sum from 1 to 100:

var result = 0; for(var i = 1; i <= 100; i++) { result = result + i; } alert(result);
Copy after login

When you open this file in the browser, a pop-up layer will pop up. The pop-up layer displays the sum from 1 to 100:


In the above code, we declare a variableresultand assign it a value of 0, indicating that the initial sum is 0.

Then three statements in theforloop:

  • Variable initializationi = 1, which means starting from 1.
  • Conditional expressioni <= 100means that as long asiis less than or equal to 100, the loop will continue to execute. Wheniis greater than 100, the loop will continue. will stop.
  • Variable updatei, we learned it before when we learned operators. This is the increment operator, which means that its operand is increased by 1.

At this point we can look at thisforloop step by step:

第一次循环: result = 0 + 1 // 此时result值为0, i的值为1 第二次循环: result = 1 + 2 // 此时result值为0+1,i的值为2 第三次循环: result = 3 + 3 // 此时result值为1+2,i的值为3 第四次循环: result = 6 + 4 // 此时result值为3+3,i的值为4 第五次循环: result = 10 + 5 // 此时result值为6+4,i的值为5 ...
Copy after login

We just need to figure out the execution in theforloop The principle is that there is no need to manually calculate the sum. As long as the code is written, the computer will quickly tell us the sum from 1 to 100 after executing the code.

Let me add that in the above code,result = result i, we can also writeresult = i, which is the addition assignment operator we have learned before. do you remember?

Example 2:

Let’s look at another example. For example, we can use theforloop to implement array traversal. First define an arraylst:

var lst = ["a", "b", "c", "d", "e"];
Copy after login

When writing theforloop, the first thing to do is to understand the three statements in the parentheses, because we can get it through the subscript index of the element in the array The value of the element, and the index of the array starts from 0, so the variable initialization can be set toi = 0. The second conditional expression, because the last index in the array islst.length - 1, so as long as it is less than or equal tolst.length - 1, the loop will continue to execute. Andi <= lst.length - 1is equivalent toi. The third variable is updated. Each time the loop loops, the index value is incremented by one, so it isi.

So the loop can be written like this:

for(i = 0; i
        
Copy after login

Output:

a b c d e
Copy after login

In fact, there is a better way to traverse the array, which is to usefor... inloop statement to traverse the array.

The three expressions in the for loop

JS The three expressions in brackets in the for loop can be omitted, but use The semicolon that separates 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++; }
Copy after login

for loop nesting

No matter which Loops can be nested (that is, one or more loops are defined within a loop). Let's take the for loop as an example to demonstrate the nested use of loops:

for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { document.write(j + " x " + i + " = " + (i * j) + " "); } document.write("
"); }
Copy after login

Running results:

Does JavaScript have a for loop?

扩展知识:for 循环变体--for…in 循环

for...in循环主要用于遍历数组或对象属性,对数组或对象的属性进行循环操作。for...in循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

语法如下:

for (变量 in 对象) { // 代码块 }
Copy after login

for循环括号内的变量是用来指定变量,指定的可以是数组对象或者是对象属性。

示例:

使用for...in循环遍历我们定义好的lst数组:

var lst = ["a", "b", "c", "d", "e"];for(var l in lst){ console.log(lst[l]);}
Copy after login

输出:

a b c d e
Copy after login

除了数组,for...in循环还可以遍历对象,例如我们遍历侠侠的个人基本信息:

var object = { 姓名:'侠侠', 年龄:'22', 性别:'男', 出生日期:'1997-08-05', 职业:'程序员', 特长:'跳舞' } for(var i in object) { console.log(i + ":" + object[i]); }
Copy after login

输出:

姓名: 侠侠 年龄: 22 性别: 男 出生日期: 1997-08-05 职业:程序员 特长:跳舞
Copy after login

【相关推荐:javascript学习教程

The above is the detailed content of Does JavaScript have a for loop?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!