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

for…of 是ES6新引入的特性，修复了 ES5 引入的 for…in 的不足，关于两者之间的区别，下面列举了一些例子：

遍历数组时：

let arr = [10,16,17,12,19,51];
for(let i in arr){
  console.log(i);
}
运行结果：
0
1
2
3
4
5

let arr = [10,16,17,12,19,51];
for(let i of arr){
  console.log(i);
}
运行结果：
10
16
17
12
19
51

从上面例子可以看到：for…in 循环的是key，for…of 循环的是value。

当给数组加上属性时：

let arr = [10,16,17,12,19,51];
arr.name = 3;
for(let i in arr){
  console.log(i);
}
运行结果：
0
1
2
3
4
5
name

let arr = [10,16,17,12,19,51];
arr.name = 3;
for(let i of arr){
  console.log(i);
}
运行结果：
10
16
17
12
19
51

for … in 循环不仅可以遍历数字键名，还会遍历原型上的值和手动添加的其他键；而 for…of 循环只遍历键值。

遍历对象时：

let obj = {a:10,b:16,c:17,d:12,e:19,f:51};
for(let i in obj){
  console.log(i);
}
运行结果：
a
b
c
d
e
f

let obj = {a:10,b:16,c:17,d:12,e:19,f:51};
for(let i of obj){
  console.log(i);
}
报错：Uncaught TypeError: obj is not iterable

上面例子报错，是因为这个对象没有 Symbol.iterator 这个属性，所以使用 for of 会报 obj is not iterable 错误。

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

iterator 提供了遍历所有数据结构的统一接口，只要有 iterator 接口的数据结构，就可以使用 for…of循环。

有iterator 接口的数据结构如下：

Array、Map、Set、String、arguments对象、Nodelist对象（也就是获取的dom列表集合）。

针对上面的例子，如果想要让对象可以使用 for…of 循环怎么办?

解决办法：

使用 Object.keys() 或者 Object.values() 获取对象的 key 值或者 values 集合后，再使用 for…of：

let obj = {a:10,b:16,c:17,d:12,e:19,f:51};
for(let i of Object.keys(obj)){
  console.log(i);
}
运行结果：
a
b
c
d
e
f

let obj = {a:10,b:16,c:17,d:12,e:19,f:51};
for(let i of Object.values(obj)){
  console.log(i);
}
运行结果：
10
16
17
12
19
51

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

总结：

for…in 和 for…of 的区别如下：

（1）for…in 适合于遍历对象，for…of 循环适合于遍历数组；

（2）for… in 循环返回的值都是数据结构的键值名，遍历对象返回的对象的key值，遍历数组返回的数组的下标，for…of 循环返回的值都是数据结构的键值，遍历对象返回的对象的value值，遍历数组返回的数组的值。