for...in的改进版for...of

for...in 用起来似乎还不错，为什么又弄个 for...of 呢？

来看个例子：

'user strict'
var arr = [12,13,14,15,16];
for(var i in arr){
    console.log(i);
}
// 遍历结果为0 1 2 3 4（仅为数组下标）

for...of 这里就体现出优势了

同样的例子将 for...in 换成 for...of 就可直接遍历数组元素的内容

'user strict'
var arr = [12,13,14,15,16];
for(var i of arr){
    console.log(i);
}
// 遍历结果为0 1 2 3 4（仅为数组下标）

遍历 Array 可以采用下标循环，遍历 Map 和 Set 就无法使用下标。为了统一集合类型，ES6标准引入了新的 iterable 类型，Array、Map 和 Set 都属于 iterable 类型

for..of 则可专门针对 iterable 类型进行遍历

再看个比较典型的例子：

var arr = [12,13,14,15,16];
arr.attr = 'as';
for(var i in arr){
    console.log(arr[i]);
}
// 结果 12 13 14 15 16 as（for...in不仅遍历出arr数组的元素还把arr的属性也遍历出来）

这里使用 for...of 仅遍历数组元素

var arr = [12,13,14,15,16];
arr.attr = 'as';
for(var i of arr){
    console.log(i);
}
// 结果 12 13 14 15 16（不会出现 for...in 的情况）