[mdn for...of](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) [mdn for...in](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) # for...of for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上創建一個迭代循環，調用自定義迭代鉤子，并為每個不同屬性的值執行語句 [可迭代協議](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols) 為了變成可迭代對象， 一個對象必須實現 @@iterator 方法, 意思是這個對象（或者它原型鏈 prototype chain 上的某個對象）必須有一個名字是 Symbol.iterator 的屬性 # for...in for...in語句以任意順序遍歷一個對象的可枚舉屬性。對于每個不同的屬性，語句都會被執行。 **for...in不應該用于迭代一個索引順序很重要的 Array** # for...of與for...in的區別 1. for...of不能循環普通object對象({key:value}), 2. for...in循環對象時循環出的是key,循環數組時循環出的是索引,for...of循環出的是value 3. for...in 能夠循環出原型和原型鏈繼承下來的屬性,可在循環體中使用hasOwnProperty過濾 4. for...in循環除了遍歷數組元素以外,還會遍歷自定義對象屬性(下方例子的iterable.foo = 'hello';) 5. for...of 循環數組只循環本身元素,不會出現3和4的情況 無論是for...in還是for...of語句都是迭代一些東西。它們之間的主要區別在于它們的迭代方式。 for...in 語句以原始插入順序迭代對象的可枚舉屬性。 for...of 語句遍歷可迭代對象定義要迭代的數據 以下示例顯示了與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) { // 0, 1, 2 是索引 console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom" } for (let i of iterable) { console.log(i); // 3, 5, 7 } for (let i in iterable) { // 過濾掉繼承的屬性 if (iterable.hasOwnProperty(i)) { console.log(i); // 0, 1, 2, "foo" } } ``` [掘金冴羽for...of](https://juejin.im/post/5b444268f265da0f98313d26)