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

for...in 的特点

• for...in循环返回的值都是数据结构的 键值名。
  遍历对象返回的对象的key值,遍历数组返回的数组的下标key。

• for...in循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。

• 特别情况下, for...in循环会以任意的顺序遍历键名

总结: for...in 循环特别适合遍历对象。

for...of 的特点

• for...of循环用来获取一对键值对中的值,而for...in获取的是 键名

• 一个数据结构只要部署了Symbol.iterator属性, 就被视为具有iterator接口, 就可以使用for...of循环。

• for...of不同于forEach, 它可以与break、continue和return配合使用,也就是说for...of循环可以随时退出循环。

• 提供了遍历所有数据结构的统一接口

哪些数据结构部署了 Symbol.iteratoer属性了呢?

只要有iterator接口的数据结构,都可以使用for...of循环。

• 数组 Array
• Map
• Set
• String
• arguments对象
• Nodelist对象, 就是获取的dom列表集合
  以上这些都可以直接使用for...of循环。凡是部署了iterator接口的数据结构也都可以使用数组的扩展运算符(...)和解构赋值等操作。

下面举几个例子：

例1：

const obj = { 
  a: 1,
  b: 2,
  c: 3 
};
for (let i in obj) { 
  console.log(i)
  // a  
  // b  
  // c 
} 
for (let i of obj) { 
  console.log(i) 
  // Uncaught TypeError: obj is not iterable 报错了
 }

以上代码通过for in和for of对一个obj对象进行遍历,for in正常的获取了对象的key值,分别打印a、b、c,而for of却报错了。原因是例1中的对象没有iterator接口，但是我也想让对象可以使用for of循环怎么办？使用Object.keys()获取对象的key值集合后,再使用for of

const obj = { 
  a: 1,
  b: 2,
  c: 3 
};

// 当然，如果要取key值的话使用 for ... in 是更好的选择
for ( let i of Object.keys(obj)) {
  console.log(i)
  // 1
  // 2
  // 3
}

也可以给一个对象部署 Symbol.iterator属性

例2：

const arr = ['a', 'b', 'c'] 
// for in 循环  
for (let i in arr) { 
  console.log(i)
   // 0 
   // 1
   // 2 
} 
// for of  
for (let i of arr) { 
  console.log(i)
  // a  
  // b  
  // c
}

例3：

const arr = ['a','b']
// 手动给arr数组添加一个属性
arr.name = 'qingyu'

// for in 循环可以遍历出name这个键名
for (let i in arr) {
  console.log(i)
  // a
  // b
  // name
}