【Foreword】
In JavaScript, the for loop statement is a tool often used when writing complex programs. Among them, for-in and for-of are the two most commonly used variations. Although the two are very similar, they differ in how they iterate over objects. In this article, we'll explore the differences between for-in and for-of, and how to use them correctly.
【text】
1. for-in loop
A for-in loop is a way to iterate over the properties of an object. It can be used to iterate over all enumerable properties in an object, including properties inherited from the prototype chain. Typically, we use a for-in loop to iterate over the keys of an object.
Here's a simple example:
const person = {
name: 'John',
age: 30,
gender: 'male'
};
for (const key in person) {
console.log(key, person[key]);
}
In this example, we use a for-in loop to iterate through all the keys of the person object. The output is as follows:
name John
age 30
gender male
It should be noted that the for-in loop does not iterate the object properties in the order they are in the object. This is because object properties in JavaScript have no fixed order. Therefore, when we use a for-in loop to iterate objects, we cannot guarantee their order.
In addition, because the for-in loop traverses the prototype chain of the object, it may iterate to properties that are not its own properties. To avoid this, we can use the hasOwnProperty method to check whether the property is a property of the object itself.
Here is an example using hasOwnProperty:
const person = {
name: 'John',
age: 30,
gender: 'male'
};
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(key, person[key]);
}
}
In this example, we use the hasOwnProperty method to check whether the property is a property of the person object itself. The output is the same as before.
2. for-of loop
A for-of loop is a way to iterate over an iterable object. It can be used to traverse iterable objects such as arrays, strings, Maps, Sets, and TypedArrays. Usually, we use for-of loop to iterate over the values of an array or string.
Here's a simple example:
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value);
}
In this example, we use a for-of loop to iterate through all the values of the array arr. The output is as follows:
1
2
3
Note that for-of loops do not work for iterating object properties. If we try to iterate over an object using a for-of loop, a TypeError exception will be thrown.
Here's an example of trying to iterate over an object using a for-of loop:
const person = {
name: 'John',
age: 30,
gender: 'male'
};
for (const value of person) {
console.log(value);
}
In this example, we try to iterate over the object person using a for-of loop, but a TypeError exception is thrown.
3. The difference between for-in and for-of
Although the for-in loop and the for-of loop are both methods for iterating objects, they have some differences.
1. The contents of the iterated objects are different
The for-in loop iterates the object's key name, while the for-of loop iterates the object's value. Therefore, a for-in loop is suitable for iterating over the keys of an object, while a for-of loop is suitable for iterating over the values of an object.
2. Different types of iteration objects
The for-in loop is suitable for traversing objects, including ordinary objects, arrays, functions, etc., while the for-of loop is suitable for traversing iterable objects, including arrays, strings, Maps, Sets, TypedArray, etc.
3. The order of iterating objects is different
The iteration order of a for-in loop is undefined because the properties of an object are not in a fixed order. The iteration order of the for-of loop is determined because the values of the iterable objects are arranged in a certain order.
4. The principles of iterating objects are different
When a for-in loop iterates over an object, it traverses the object's prototype chain and includes properties inherited from the prototype chain. The objects traversed by the for-of loop are iterable objects, and their values are enumerable.
4. How to choose the appropriate recycling method
When choosing between using a for-in loop or a for-of loop, we need to consider the type of object and what we need to iterate over. Generally, if we need to iterate over the keys of an object, we can use a for-in loop; if we need to iterate over the values of an object, we can use a for-of loop.
Also, when we need to iterate over an array or string, we can use for-of loop as it provides better performance and readability. In contrast, a for-in loop traverses the object's prototype chain, resulting in performance degradation.
If we need to traverse an object and also need to filter out properties inherited from the prototype chain, we can use the hasOwnProperty method to filter. For example:
const person = {
name: 'John',
age: 30,
gender: 'male'
};
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(key, person[key]);
}
}
V. Summary
The for-in loop and the for-of loop are two ways to iterate over objects in JavaScript. They differ in the content, type, order, and rationale of the iterated objects. Generally, we should choose the appropriate loop method according to our needs to improve the efficiency of iterating objects.
At the same time, we also need to pay attention to some defects of for-in loops. We should avoid using for-in loops on arrays and strings because it traverses the object's prototype chain, resulting in performance degradation, and does not guarantee the iteration order.
Finally, we can also use some other methods to iterate objects, such as forEach method, map method, reduce method, etc. These methods not only provide better performance and readability, but also enable more flexible operations through callback functions.
In general, for-in loops and for-of loops are important methods for iterating objects in JavaScript. We need to choose the appropriate loop method based on the type of object and what needs to be iterated to improve the performance and readability of the code. At the same time, we also need to pay attention to the flaws of for-in loops and learn to use other methods to iterate objects to achieve more flexible and efficient operations.