for in 和 for of的区别

很多小伙伴对for in 和 for of 傻傻分不清楚，包括我自己也是，所以今天给大家详细讲解一下，顺便让自己加深一下概念。
首先两者都是可以循环数组的。

区别在于 ：for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。
上代码

let arr = ['a','b','c','d']
 
// for ... in
for (const key in arr){
    console.log(key) // 输出 0,1,2,3
    }
 
// for ... of
for (const key of arr){
    console.log(key) // 输出 a,b,c,d
    }

当循环对象时，for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array。
上代码
 

let object = { name: 'JACK', age: 18 }
    // for ... in
    for (let key in object) {
      console.log(key) // 输出 name,age
      console.log(object[key]) // 输出 JACK,18 
    }
 
    // for ... of
    for (let key of object) {
      console.log(key) // 报错 Uncaught TypeError: object is not iterable
    }

未捕获的类型错误：对象不可迭代

最后就是 数组对象 二者都可遍历
上代码
 

const list = [{ name: 'Jack',age:18 }, {name:'Rose', age: 19 }]
    for (const val of list) {
      console.log(val) // 输出 { name: 'Jack',age:18 } {name:'Rose', age: 19 }
      for (const key in val) {
        console.log(val[key]) // Jack 18  Rose 19 
      }
    }

汇总 ：for in适合遍历对象，for of适合遍历数组。for in遍历的是数组的索引，对象的属性，以及原型链上的属性。