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}      

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));
  } 
}())