javascript中 for-in和 for-of的區別

 

其中for-of是ES6新增的迭代語法

在MDN上的解釋：

for...in語句以任意順序遍歷一個對象的可枚舉屬性。對於每一個不一樣的屬性，語句都會被執行。
for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上建立一個迭代循環，調用自定義迭代鉤子，併爲每一個不一樣屬性的值執行語句

由此概念可看出區別：for..in是返回可枚舉對象的屬性，而for..of是返回可枚舉對象的值

另一點：for...in會繼承， 而for...of不會,

for...in實例

以上三個結果中:

1 . console.log(iterable) 返回數組自己

2 . 第一個for...in結果看出，可枚舉屬性除了自己的 0 , 1 , 2 ,foo以外，還有 arrCustom, objCustom。這是因爲繼承功能， iterable是數組實例，iterable.__proto__指向Array原型對象則有了前面定義的屬性arrCustom， 而Array.__proto__指向Object原型對象，則有了前面定義的熟悉objCustom， 原型鏈在往上Object.__proto__指向null，此時終止繼承。

3 . 第二個for...in內部使用hasOwnProperty判斷只有是自己的屬性才輸出

 

for ... of實例

該循環迭代並記錄iterable做爲可迭代對象定義的迭代值，這些是數組元素 3, 5, 7，而不是任何對象的屬性。