Introduction to for loop in JavaScript
In JavaScript, there are various loop statements that can be used to iterate over arrays, objects, or other iterable data structures. These commonly used loops include for loops, for-in loops, for-of loops, and forEach methods. This article introduces their characteristics and usage in turn:
1. for loop:
for (initialization; condition; increment){
// Loop body
}
Among them, initialization is the code block executed before the start of the loop, which is used to initialize the loop variables; condition is the condition checked before each loop. When the condition is false, the loop ends; increment is the code executed after each loop ends. Block, which is used to update the value of a loop variable.
This is the most common looping method and is suitable for situations where the number of iterations is known.
Example:
const arr = [10, 20, 30, 40, 50];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
In this example, the initialization part declares a variable i using the let keyword and sets its initial value to 0. The conditional part uses the less than operator (<) to determine whether i is less than the length of the arr array. Only when i is less than the length of the array, the loop will continue to execute. The operation part uses the ++ operator to increase the value of i by 1 each time.
Output result:
10
20
30
40
50
Some optional parts can also be omitted. For example, in the following loop, the initialization part is omitted and the loop counter is initialized to 0. The above code can be changed to:
const arr = [10, 20, 30, 40, 50];
let i = 0;
for (; i < arr.length; i++) {
console.log(arr[i]);
}
2. for-in loop:
for (var key in object) {
if (object.hasOwnProperty(key)) {
// Loop body
}
}
The for-in loop is used to traverse the properties of an object, where key represents the name of each property of the object. Please note that this method is used to traverse object properties (key-value pairs) and is not suitable for traversing arrays.
Example:
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key + ": " + obj[key]);
}
}
Output result:
a: 1
b: 2
c: 3
3. for-of loop:
for (var item of iterable) {
// Loop body
}
The for-of loop is a new feature introduced in ES6, which can be used to traverse iterable objects (such as arrays, strings, Sets, Maps, etc.). In each loop, item represents the value of each element of the iterable object, not the index or key. This method is suitable for traversing arrays, strings, and other objects that follow the iterable protocol.
Example:
const arr = [10, 20, 30, 40, 50];
for (let item of arr) {
console.log(item);
}
Output result:
10
20
30
40
50
4. In addition, JavaScript also provides the forEach() method for traversing arrays. :
array.forEach(function(item, index, array) {
// Loop body
});
forEach() is a method provided by the array object. The forEach method has no return value and is used to traverse each element in the array. In each loop, the current element, index and original array are processed through the callback function. It should be noted that the forEach() method traverses the entire array and cannot break out of the loop midway (unless an exception is thrown).
Example:
const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array) {
console.log("Index: " + index + ", Value: " + item);
});
Output result:
Index: 0, Value: 10
Index: 1, Value: 20
Index: 2, Value: 30
Index: 3, Value: 40
Index: 4, Value: 50
In JavaScript, break and continue statements can be used in the loop body of for loops, for-in loops, and for-of loops to control the behavior of the loop.
The break statement is used to exit the loop immediately, no longer execute the code after the loop body, and continue executing the code after the loop.
The continue statement is used to skip the current iteration and continue executing the next iteration.
For example, an example of using break and continue in a for loop:
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // 跳过当前迭代，继续下一次迭代
}
if (i === 4) {
break; // 中途跳出循环
}
console.log(i);
}
Output result:
0
1
3
However, for the forEach() method, it is an array method, and the break and continue statements cannot be used in its loop body to control the behavior of the loop. The forEach() method will traverse the entire array and execute the callback function for each element, and cannot break out of the loop midway. If you use break or continue in a callback function, they will generate a syntax error.
Summary :
The for loop, for...in loop, and for...of loop are loop statements in JavaScript, while forEach() is a method of the array object.
The for loop is the most common loop statement. It can traverse the execution code block by specifying the starting condition, ending condition and execution operation after each loop.
The for...in loop is used to iterate over the properties of an object, it will iterate over the enumerable properties of the object and its prototype chain.
The for...of loop is used to iterate over iterable objects (such as arrays, strings, Sets, Maps, etc.), and it can iterate over each element value in the object.
forEach() is a method of an array object, used to iterate through each element of the array and execute the specified callback function for each element.
In JavaScript, for loops, for-in loops, and for-of loops all support the use of break and continue statements to control loop behavior. The break and continue statements cannot be used in the forEach() method to break or skip the loop.