What is the difference between for...in and for...of loop statements in JS

Both the for...in and for...of statements can be used to traverse a variable. The following uses for...in and for...of to traverse a common object and array respectively, and compare them with specific example codes. Similarities and differences between the two.

1. for...in statement

(1) Use for...in to loop through an ordinary object

The for...in statement can be used to loop over all enumerable properties of an object. The following code is used to print all property fields and property values of the obj object:

 let obj = {type: 1, keyword: "js"};
for (let key in obj) {
    console.log(key, obj[key])
}

The output is as follows:

 type 1
keyword js

(2) Use for...in to loop through an array

If you use the for...in statement to traverse an array, the result of the traversal is the subscript of the array. The specific test code is as follows:

 let obj = ['type', 'keyword']
for (let key in obj) {
    console.log(key, obj[key])
}

At this time, obj is an array object, and the output is as follows:

 0 type
1 keyword

Therefore the following conclusions can be drawn:

• If you use for...in to traverse an object, the returned result is the property name of the object;
• If you use for...in to traverse an array, the returned result is the subscript of the array;

2. for...of statement

(1) Use for...in to loop through an ordinary object

The for...of statement is mainly used to loop over the properties of an iterable object. To be an iterable object, an object must implement the @@iterator method, which means that the object (or an object on its prototype chain) must have a A property whose key is @@iterator , which can be accessed through the constant Symbol.iterator .

For ordinary objects, it is not actually an iterable object. If you use for...of to traverse directly, an error will be reported. Let's test it:

 let obj = {type: 1, keyword: "js"};
for (let key of obj) {
    console.log(key, obj[key])
}

After running, the following error appears, indicating that obj is not an iterable object, as follows:

So how to use for...of to traverse object properties, the first thing you need to do is to convert the obj object into an iterable object. Here you can use the Object.keys() method. The adjusted code is as follows:

 let obj = {type: 1, keyword: "js"};
for (let key of Object.keys(obj)) {
    console.log(key, obj[key])
}

The output is as follows:

 type 1
keyword js

(2) Use for...in to loop through an array

If you use the for...in statement to traverse an array, the result of the traversal is the element value of the array. The specific test code is as follows:

 let obj = ['type', 'keyword']
for (let key of obj) {
    console.log(key)
}

The output is as follows:

 type
keyword

Therefore the following conclusions can be drawn:

• You cannot use the for...of statement to traverse an ordinary object directly, it can only be used to traverse an iterable object
• If you use for...of to traverse an array, the returned result is the element value of the array;

3. Similarities and differences between for...in and for...of

(1) The same point

• Both for...in and for...of can be used to traverse an iterable object, such as Array, Map, Set, arguments, etc.;

(2) Differences

• for...in can be used to traverse an ordinary object directly, while for...of cannot;
• When using for...in to traverse an array, the returned result is the index of the array; when using for...of to traverse an array, the returned result is the element value of the array;

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration