for in 与for of循环的区别

最近看了一篇google的js编码规范，在ES6中，有3种不同的for循环。尽管每一种有它的应用场景，但Google仍推荐使用for…of。不过我喜欢使用for…in遍历Object，使用for…of遍历数组。for…of是ES6新引入的特性。修复了ES5引入的for…in的不足。尽管这种使用方式与google的规范相冲突，但我就喜欢这种各司其职的使用方式，让我们来对for…in和for…of做一个分析，对比分析过后，喜欢用那种方式就那种方式，都不影响的。无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for…in 语句以原始插入顺序迭代对象的可枚举属性(只能迭代出可枚举的属性，至于什么叫做可枚举属性/不可枚举属性，请baidu/google)。for…of 语句遍历可迭代对象定义要迭代的数据（非自定义属性）。下面我们来看一下：

如果我们要遍历一个数组的value值，我们定义这个数组：

 let arr = ['a','b','c'];

我们先使用for in 循环：

for(let index in arr ){
    console.log(`${arr[index]}`);//a,b,c
}

在使用for of 循环

for(var value of arr){
    console.log(value);//a,b,c
}

看上去好像只有写法不一样而已，但是为什么说for of 补充了for in 的缺陷呢，我们往数组arr里添加一个hobby属性。

arr.hobby = 'foosball';

现在我们再使用这两种方式对数组进行遍历输出：

for(let index in arr){
    console.log(`${arr[index]}`); //a,b,c,'foosball'
}
for(var value of arr){
    console.log(value);//a,b,c
}

这里就很明显了。for…of不能循环出自定义的属性。我们再换一种方式，代码如下：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};
arr.hobby = 'foosball';

for (let i in arr) {
  console.log(i); // 0, 1, 2, "hobby", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); //0, 1, 2, "hobby"
  }
}

for (let i of iterable) {
  console.log(i); // 'a', 'b', 'c'
}

将objCustom属性和arrCustom属性添加到Object.prototype和Array.prototype。由于继承和原型链，对象arr继承属性objCustom和arrCustom。使用hasOwnProperty() 来检查，证明属性arrCustom和objCustom是继承的。由此可见，for…of循环的是的是可迭代对象的value（值），in循环的是可迭代对象的key（属性），for…of循环不能循环普通的对象，对普通对象的属性遍历推荐使用for…in。
但是非要使用for…of来循环对象，并不是不可以。此时就要结合Object.keys()进行使用：

for(var key of Object.keys(arr)){
    //使用Object.keys()方法获取对象key的数组
    console.log(arr[key]);
}