for in 与 for of

先说结论：

1. 推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
2. for...in循环出的是key，for...of循环出的是value
3. 注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
4. for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

for…of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.

也就是说，for of只可以循环可迭代对象的可迭代属性，不可迭代属性在循环中被忽略了。
并且给与了一个对比的例子

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0 1 2 foo arrCustom objCustom
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

我们可以看到，对于array的不可迭代元属性objCustom、arrCustom和实例属性foo，在循环中都被忽略
这是for in迭代KEY，for of迭代value之外最大的区别