JavaScript中for of和for in的区别？

版权声明：本文为博主原创文章，转载请注明出处 thx~ https://blog.csdn.net/x550392236/article/details/88690175

JavaScript数组高阶函数，点击跳转详解

先说结论：

1. for...in 循环出的是 key， for...of 循环出的是 value 。
2. for...of 是 ES6 新引入的特性，修复了 ES5 引入的 for...in 的不足。
3. for...of 不能循环普通的对象，需要通过和 Object.keys() 搭配使用。
4. 推荐在循环对象属性的时候使用 for...in ，在遍历数组的时候的时候使用 for...of 。

---

let arr = ['x', 20, { a: 1, b: 2 }];

// for…in循环
for (let index in arr) {
    console.log(arr[index]);
}
// x 20 {a: 1, b: 2}

// for…of循环
for (let value of arr) {
    console.log(value);
}
// x 20 {a: 1, b: 2}

咋一看好像好像只是写法不一样而已，那为什么说 for...of 修复了 for...in 的缺陷和不足。
假设我们往数组添加一个属性name:

let arr = ['x', 20, { a: 1, b: 2 }];
arr.name = 'demo';

// for…in循环
for (let index in arr) {
    console.log(arr[index]);   // arr.name也被循环出来了
}
// x 20 {a: 1, b: 2} demo

// for…of循环
for (let value of arr) {
    console.log(value);
}
// x 20 {a: 1, b: 2}

所以说，作用于数组的 for-in 循环除了遍历数组元素以外,还会遍历自定义属性。

for...of 循环不会循环对象的 key ，只会循环出数组的 value，因此 for...of 不能循环遍历普通对象,对普通对象的属性遍历推荐使用 for...in

---

如果实在想用 for...of 来遍历普通对象的属性的话，可以通过和 Object.keys() 搭配使用，先获取对象的所有 key 的数组
然后遍历：

let my = {
    name: '猫老板的豆',
    title: '吃饭睡觉打豆豆',
    age: 20,
    address: {
        country: 'china',
        city: 'shenzhen',
        school: 'hi-tech park'
    }
}

for (let key of Object.keys(my)) {
    //使用Object.keys()方法获取对象key的数组
    console.log(key + ": " + my[key]);
}