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(initialization; condition; increment) {
// 要执行的代码
}
The for loop contains three optional expressions initialization, condition and increment, among which:
- Initialization: For an expression or variable declaration, we usually call this step "initializing the counter variable" and it will only be executed once during the loop;
- condition: It is a conditional expression, which has the same function as the conditional expression in the while loop. It is usually used to compare with the value of the counter to determine whether to loop. This expression can set the number of loops;
- increment: is an expression used to update (increment or decrement) the value of the counter after each loop.
The sample code is as follows:
for (var i = 1; i <= 10; i++) {
document.write(i + " ");
}
operation result:
1 2 3 4 5 6 7 8 9 10
In the above code, it will be executed before the loop starts var i = 1;, and the variable i will be used as a counter; then it will be judged i <= 10whether it is true. If it is true, { }the code in progress will be executed. If it fails, the for loop will exit; after each loop execution is completed, the i++operation will be executed. , that is, update the counter value.
[Example] Use a for loop to traverse the contents of an array:
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
for(var i = 0; i < fruits.length; i++) {
document.write(fruits[i] + " ");
}
operation result:
Apple Banana Mango Orange Papaya
Three expressions in JS for loop
The three expressions in parentheses in the JS 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++;
}
JS for loop nesting
No matter what kind of loop it is, it can be used in nests (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("<br>");
}
operation result:
1 x 1 = 1
1 x 2 = 2 2 x 2 = 4
1 x 3 = 3 2 x 3 = 6 3 x 3 = 9
1 x 4 = 4 2 x 4 = 8 3 x 4 = 12 4 x 4 = 16
1 x 5 = 5 2 x 5 = 10 3 x 5 = 15 4 x 5 = 20 5 x 5 = 25
1 x 6 = 6 2 x 6 = 12 3 x 6 = 18 4 x 6 = 24 5 x 6 = 30 6 x 6 = 36
1 x 7 = 7 2 x 7 = 14 3 x 7 = 21 4 x 7 = 28 5 x 7 = 35 6 x 7 = 42 7 x 7 = 49
1 x 8 = 8 2 x 8 = 16 3 x 8 = 24 4 x 8 = 32 5 x 8 = 40 6 x 8 = 48 7 x 8 = 56 8 x 8 = 64
1 x 9 = 9 2 x 9 = 18 3 x 9 = 27 4 x 9 = 36 5 x 9 = 45 6 x 9 = 54 7 x 9 = 63 8 x 9 = 72 9 x 9 = 81
for loop variations
In order to more conveniently traverse objects, arrays, strings, etc., JS also supports two for loop variants, namely for in loop and for of loop.
The JS for in loop is a special type of loop and a variant of the ordinary for loop. It is mainly used to traverse objects. It can be used to loop out the attributes in the object in sequence. Its syntax format is as follows:
for (variable in object) {
// 要执行的代码
}
Among them, variable is a variable. This variable will be assigned a different value each time it loops. We can{ }
Use this variable to perform a series of operations; object is the object to be traversed. In each loop, the key of an attribute in the object object will be assigned to the variable variable until all attributes in the object have been traversed.
JS for in loop sample code:
// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
document.write("<p>" + prop + " = " + person[prop] + "</p>");
}
operation result:
name = Clark
surname = Kent
age = 36
Note that the JS for in loop is created for traversing objects. Although it can also traverse arrays, it is not recommended. To traverse arrays, you can use for loops or for of loops.
The JS for of loop is a newly added loop method in ECMAScript6. It is similar to the for in loop and is also a variant of the ordinary for loop. Use the for of loop to easily traverse arrays or other traversable objects, such as strings, objects, etc.
The syntax format of JS for of loop is as follows:
for (variable of iterable) {
// 要执行的代码
}
Among them, variable is a variable. This variable will be assigned a different value each time it loops. We can use it later{ }
Use this variable to perform a series of operations; iterable is the content to be traversed. In each loop, a value in iterable will be assigned to the variable variable until all values in iterable have been traversed.
The sample code is as follows:
// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
document.write(value + ", ");
}
document.write("<br>");
// 定义一个字符串
var str = "Hello World!";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {
document.write(value + ", ");
}
document.write("<br>");
// 定义一个对象
var obj = {"name": "Clark", "surname": "Kent", "age": "36"};
// 使用 for of 循环遍历对象中的所有属性
for(var value in obj) {
document.write(value + ", ");
}
operation result:
a, b, c, d, e, f,
H, e, l, l, o, , W, o, r, l, d, !,
name, surname, age,
Note that although the for of loop can also traverse objects, it is not recommended. If you want to traverse objects, you can use the for in loop.