起因
我一直分不清它們羡亩，所以專門研究對比下摩疑。
區(qū)別
1.官方說法
無論是for...in還是for...of語句都是迭代一些東西。它們之間的主要區(qū)別在于它們的迭代方式畏铆。
for...in：語句以原始插入順序迭代對象的可枚舉屬性雷袋。
for...of：語句遍歷可迭代對象定義要迭代的數(shù)據(jù)。
2.通俗易懂的說法
for...in：循環(huán)出的是key辞居。
for...of：循環(huán)出的是value楷怒。
注意，for...of是ES6新引入的特性瓦灶。修復(fù)了ES5引入的for...in的不足鸠删。
示例
以下示例顯示了與Array一起使用時，for...of循環(huán)和for...in循環(huán)之間的區(qū)別贼陶。
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
}
總結(jié)
在循環(huán)對象屬性的時候刃泡，使用for...in巧娱；在遍歷數(shù)組的時候，使用for...of烘贴。
查閱文章有：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of
https://segmentfault.com/q/1010000006658882
