for each...in

使用一個變數迭代一個物件的所有屬性值。對於每一個屬性值，有一個指定的語句塊被執行。

作為ECMA-357(E4X)標準的一部分，for each...in語句已被廢棄，E4X中的大部分特性已被刪除，但考慮到向後相容，for each...in只會被禁用而不會被刪除，可以使用ES6中新的for...of語句來代替。大部分非Mozilla瀏覽器都沒有實現該標準，E4X並不是 ECMAScript 標準的一部分。

語法

for each (variable in object) {
statement
}

引數

variable

用來遍歷屬性值的變數，前面的var關鍵字是可選的。該變數是函式的區域性變數而不是語句塊的區域性變數。

object

該物件的屬性值會被遍歷。

statement

遍歷屬性值時執行的語句。 如果想要執行多條語句，請用({ ... }) 將多條語句括住。

警告

永遠不要使用for each...in語句遍歷陣列，僅用來遍歷常規物件。

一些物件的內建屬性是無法被遍歷到的,包括所有的內建方法，例如String物件的indexOf方法。不過，大部分的使用者自定義屬性都是可遍歷的。

for...in

for...in語句以任意順序遍歷一個物件的可列舉屬性。對於每個不同的屬性，語句都會被執行。

語法

for (variable in object) {...}

variable

在每次迭代時，將不同的屬性名分配給變數。

object

被迭代列舉其屬性的物件。

for...in 迴圈只遍歷可列舉屬性。像 Array和 Object使用內建建構函式所建立的物件都會繼承自Object.prototype和String.prototype的不可列舉屬性，例如 String 的 indexOf()  方法或 Object的toString()方法。迴圈將遍歷物件本身的所有可列舉屬性，以及物件從其建構函式原型中繼承的屬性（更接近原型鏈中物件的屬性覆蓋原型屬性）。

刪除，新增或者修改屬性

for...in 迴圈以任意序迭代一個物件的屬性（請參閱delete運算子，瞭解為什麼不能依賴於迭代的表面有序性，至少在跨瀏覽器設定中）。如果一個屬性在一次迭代中被修改，在稍後被訪問，其在迴圈中的值是其在稍後時間的值。一個在被訪問之前已經被刪除的屬性將不會在之後被訪問。在迭代進行時被新增到物件的屬性，可能在之後的迭代被訪問，也可能被忽略。通常，在迭代過程中最好不要在物件上進行新增、修改或者刪除屬性的操作，除非是對當前正在被訪問的屬性。這裡並不保證是否一個被新增的屬性在迭代過程中會被訪問到，不保證一個修改後的屬性（除非是正在被訪問的）會在修改前或者修改後被訪問，不保證一個被刪除的屬性將會在它被刪除之前被訪問。

陣列迭代和 for...in

陣列索引只是具有整數名稱的列舉屬性，並且與通用物件屬性相同。不能保證for ... in將以任何特定的順序返回索引。for ... in迴圈語句將返回所有可列舉屬性，包括非整數型別的名稱和繼承的那些。

因為迭代的順序是依賴於執行環境的，所以陣列遍歷不一定按次序訪問元素。因此當迭代訪問順序很重要的陣列時，最好用整數索引去進行for迴圈（或者使用 Array.prototype.forEach() 或 for...of 迴圈）。

for...of

for...of語句在可迭代物件（包括 Array，Map，Set，String，TypedArray，arguments 物件等等）上建立一個迭代迴圈，呼叫自定義迭代鉤子，併為每個不同屬性的值執行語句

for (variable of iterable) {
//statements
}

variable

在每次迭代中，將不同屬性的值分配給變數。

iterable

被迭代列舉其屬性的物件。

迭代Array
迭代String
迭代TypedArray
迭代Map
迭代Set
迭代arguments物件
迭代DOM集合
關閉迭代器
迭代生成器
迭代其他可迭代物件

for...of與for...in的區別

無論是for...in還是for...of語句都是迭代一些東西。它們之間的主要區別在於它們的迭代方式。

for...in 語句以原始插入順序迭代物件的可列舉屬性。

for...of 語句遍歷可迭代物件定義要迭代的資料。

參考出處：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for_each...in