Difference between for..in and for..of

Some time ago I encountered such a problem: using for..in and for..of casually brought me unpredictable consequences, which were a little different from what I thought.What exactly is the difference between for...in and for..of?When to use for..in?When to use for..of?Next, I will use code as an example to show the difference between the two.

First look at the difference between for...in and for...of when traversing an array:

As can be seen from the above, the console output results can be displayed normally. When traversing the array, for..in obtains the index value of each traversal item, while for...of obtains the index value of each traversal item.is the value of each traversal item.

Look at the difference between for..in and for..of when iterating over objects:

Through the console, we can see that when using for...in to traverse an object, each traversal will get the key value in the object, but when using for..of traversal, an error will be reported (obj is not iterable), translated as: the obj object is not iterable and cannot be used to traverse the object using for..of, it does not get the value of each traversal item.

Summary:

When traversing the array: for..in gets the index value of each item, and for..of gets the value of each item

When traversing objects: for..in gets the key value of each item (that is, the attribute name), while for..ofcannotFor traversing objects, an error will be reported

Extended content: Object.keys(obj) can get the keys value of obj and save it in the form of an array; Object.values(obj) can get the value of obj and save it in the form of an array