for...in 和 for...of 的区别 -javascript

先说结论

1. for...of 是 for...in 的升级版 (ES6)
2. for...of 只用于遍历数组 遍历值为value
3. for...in 主要用于遍历对象(不建议遍历数组) 遍历值为key

环境

node v12.13.0

实践

对Array操作

const arr = [1, 2, 3, 4, 5];

for (let key in arr){
    console.log(key); // '0','1','2','3','4'
}

以上符合预期 index 作为 key 被打印

arr.name = 'xiaoming';// 稍稍来一个动态语言中的对象操作(这种情况可能为程序员误写)
for (let key in arr){
    console.log(key); // '0' '1' '2' '3' '4' 'name' 出现一个name?
}

此处不符合预期
不应该是index作为key被打印吗？那为什么只打印了(arr.)name，而(Array.)length却未作为key打印
这显然不合大多数人的逻辑

来看看 for...of 表现如何

for (let value of arr) {
   console.log(value); // 1 2 3 4 5 
}

并没有出现 'xiaoming' 这才是原汁原味的数组遍历！

对Object操作

const obj = {
    name: 'xiaoming',
    age: 20,
    height: {
        normal: 180,
        atNight: 175
    }
}

for (let key in obj){
    console.log(key); // name age height
}

符合预期

那for...of对对象遍历会得到什么结果呢？

for (let value of obj){ 
    console.log(value); // error : // obj is not iterable
}

报错！ 这里涉及ES6引入的iterable类型，有兴趣的同学可以了解一下