What is the difference between for... In... And for... Of

1、 The difference in results

for…in… Traverse to get key( Get the attribute name )
for…of… Traverse to get value( Get the property value )

const arr = [" Ha ha ha ", 20,{
    name:"www"}]
for(let val in arr){
    
  console.log('for...in', val)
}
console.log('==== I'm the separator ====')
for(let val of arr){
    
  console.log('for...of', val)
}

result ：

2、 Continue to explore

for…in…( Traverse to prototype , Low efficiency )

Use for…in… Will traverse all enumerable properties of the array , Including prototypes , If you don't want to traverse prototype methods and properties , You can judge inside the loop , Use hasOwnProperty() Method can determine whether a property is an instance property of the object

var arr = [1,2,3]
Array.prototype.a = 123
Array.prototype.b = "for...in... Will traverse the prototype "
for(let index in arr){
    
    console.log(arr[index],index)
}

for…of…( Non traversable objects )

for…of… Traversal is the value of the array element , and for of The traversal is only the elements in the array , Prototype properties and indexes are not included

var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123
    
for (let value of arr) {
    
  console.log(value)
}

for of Applicable to passes / Array objects / character string /map/set/ Such as a collection of iterator objects , But you can't traverse objects , Because there is no iterator object .
A data structure only needs to be deployed Symbol.iterator attribute , Is considered to have iterator Interface , have access to for…of…
for of differ forEach,for of Yes. break,continue,return In combination with ,for of The loop can exit the loop at any time .
Traverse set

const set = new Set([10,20,30])
for(let n in set){
    
    console.log("for in",n)
}  //undefined
for(let n of set){
    
    console.log("for of",n)
}

Traverse map、generator It's the same thing .for in Can't traverse , and for of Sure .

3、 Explore in depth

Which data structures are deployed Symbol.iterator attribute ？
The following data structures are iterator Interface ：

• Array Array
• Map
• Set
• String
• arguments object
• Nodelist object , An array of class All deployed iterator Interface data structure can use array extension operator (…), And deconstruction assignment .

If I really want the object to use for of？
have access to Object.keys() Get the object's key Value set , In use for of.

var obj = {
    name: 'www',age: 21, sex: 1};
console.log(Object.keys(obj))   // ['name', 'age, 'sex']
for(var key of Object.keys(obj)){
    
    console.log(key, obj[key]);
    // name www
    // age 21
    // sex 1
}

You can also deploy an object Symbol.iterator attribute .