起因
我一直分不清它们，所以专门研究对比下。
区别
1.官方说法
无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。
for...in：语句以原始插入顺序迭代对象的可枚举属性。
for...of：语句遍历可迭代对象定义要迭代的数据。
2.通俗易懂的说法
for...in：循环出的是key。
for...of：循环出的是value。
注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足。
示例
以下示例显示了与Array一起使用时，for...of循环和for...in循环之间的区别。
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 in iterable) {
if (iterable.hasOwnProperty(i)) {
console.log(i); // logs 0, 1, 2, "foo"
}
}
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
总结
在循环对象属性的时候，使用for...in；在遍历数组的时候，使用for...of。
查阅文章有：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of
https://segmentfault.com/q/1010000006658882
