JavaScript中 for of 和 for in 的区别？

文章目录

• ​​1. for...in 循环出的是 `key`， for...of 循环出的是 `value`​​
• ​​2. for...in 循环对象 ，for...of 循环数组（推荐）​​
• ​​3. for...of 不能循环普通的对象，需要通过和 Object.keys() 搭配使用​​
• ​​4. for...of 是 ES6 新引入的特性，修复了 ES5 引入的 for...in 的不足​​
• ​​5. for...of 常用于异步的遍历​​

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

1. for…in 循环出的是 key， for…of 循环出的是 value

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


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


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

2. for…in 循环对象 ，for…of 循环数组（推荐）

​​for...in​​ 循环对象：

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

for (let key in my) {
    console.log(key); // name title age address
    console.log(my[key]); // '猫老板的豆' '吃饭睡觉打豆豆' 20 {country:'china',city:'shenzhen',school:'hi-tech park'}
}

​​for...of​​ 循环数组：

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

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

3. for…of 不能循环普通的对象，需要通过和 Object.keys() 搭配使用

如果实在想用 ​​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]);
}

4. for…of 是 ES6 新引入的特性，修复了 ES5 引入的 for…in 的不足

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

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

// for…in循环
for (let key in arr) {
    console.log(arr[key]);   // 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​​

5. for…of 常用于异步的遍历

function muti(num) {
  return new Promise((resolve,) => {
    setTimeout(() => {
      resolve(num * num)
    }, 1000)
  })
}

let arr = [1, 2, 3];

// 同步遍历 1秒后立即输出 1 4 9
arr.forEach(async (i) => {
  const res = await muti(i)
  console.log(res)
})

// 异步遍历 1秒后输出1，2秒后输出4，2秒后输出9
(async function (){
  for (let i of arr) {
    console.log(await muti(i));
  } 
}())