1、For each...in

for each...in 語句在物件屬性的所有值上迭代指定的變數。對於每個不同的屬性，執行一個指定的語句。

語法：

for each (variable in object) {
  statement
}

variable：

變數，以迭代屬性值，可以選擇用var關鍵字宣告。這個變數是函式的區域性變數，而不是迴圈的區域性變數。

object：

物件，該物件迭代屬性。

statement：

為每個屬性執行的語句。要在迴圈中執行多個語句，使用block語句({…)來對這些語句進行分組。

描述：

var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8}; for each (var item in obj) { sum += item; } console.log(sum); // logs "26", which is 5+13+8

2、For...in

for...in 語句遍歷物件的所有非符號可列舉屬性。

語法：

for (variable
 
 in object) { ...
}

variable：

在每次迭代中都為變數分配不同的屬性名。

object：

物件，其非符號可列舉屬性被迭代。

描述：

一個 for...in 迴圈只迭代可列舉的非符號屬性。從陣列和物件等內建建構函式建立的物件從物件繼承了不可列舉的屬性。原型和字串。原型，例如String的indexOf()方法或Object的toString()方法。迴圈將遍歷物件本身的所有可列舉屬性，以及物件從其建構函式原型繼承的那些屬性(靠近原型鏈中的物件的屬性將覆蓋原型的屬性)。

Deleted, added, or modified properties:

一個for...in迴圈以任意順序迭代物件的屬性(請參閱delete操作符，以瞭解為什麼不能依賴於看起來的迭代順序，至少在跨瀏覽器設定中是這樣)。

如果一個屬性在一次迭代中被修改，然後在稍後的時間訪問，它在迴圈中的值就是它在以後的時間的值。在訪問之前被刪除的屬性以後將不會被訪問。新增到正在進行迭代的物件中的屬性可以被訪問，也可以從迭代中省略。

通常，最好不要新增、修改或刪除屬性。

Array iteration and for...in：

注意:for…in不應該用於遍歷索引順序很重要的陣列。

陣列索引只是具有整數名稱的可列舉屬性，否則與一般物件屬性相同。不能保證for…in將以任何特定順序返回索引。for…迴圈語句將返回所有可列舉的屬性，包括具有非整數名稱的屬性和繼承的屬性。

因為迭代的順序與實現相關，所以在陣列上迭代可能不會以一致的順序訪問元素。因此，最好使用帶有數值索引的for迴圈。

只迭代自己的屬性：

如果您只想考慮附加到物件本身的屬性，而不是它的原型，那麼使用getOwnPropertyNames()或執行hasOwnProperty()檢查(也可以使用propertyIsEnumerable)。或者，如果您知道不會有任何外部程式碼干擾，您可以使用check方法擴充套件內建原型。

例子：

下面的函式將物件作為其引數。然後它遍歷物件的所有可列舉的非符號屬性，並返回一個屬性名稱及其值的字串。var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); } // Output: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3"

下面的函式演示了hasOwnProperty()的用法:未顯示繼承的屬性。

var triangle = {a: 1, b: 2, c: 3}; function ColoredTriangle() { this.color = 'red'; } ColoredTriangle.prototype = triangle; var obj = new ColoredTriangle(); for (const prop in obj) { if (obj.hasOwnProperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); } } // Output: // "obj.color = red"

3、For...of

for...of 語句建立一個迴圈遍歷可迭代物件(包括內建的字串、陣列，例如類陣列引數或NodeList物件、TypedArray、Map和Set以及使用者定義的迭代)，呼叫一個定製的迭代鉤子，並用語句執行物件的每個不同屬性的值。

語法：

for (variable of iterable) {
  statement
}

variable：

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

iterable：

物件，其可迭代屬性被迭代。

例子：

迭代陣列

let iterable = [10, 20, 30]; for (let value of iterable) { value += 1; console.log(value); } // 11 // 21 // 31

如果不重新分配塊內的變數，可以使用const而不是let。

let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10 // 20 // 30

遍歷字串：

let iterable = 'boo';

for (let value of iterable) { console.log(value); } // "b" // "o" // "o"

迭代TypedArray：

let iterable = new Uint8Array([0x00, 0xff]); for (let value of iterable) { console.log(value); } // 0 // 255

迭代對映：

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]); for (let entry of iterable) { console.log(entry); } // ['a', 1] // ['b', 2] // ['c', 3] for (let [key, value] of iterable) { console.log(value); } // 1 // 2 // 3

迭代一個集合：

let iterable = new Set([1, 1, 2, 2, 3, 3]); for (let value of iterable) { console.log(value); } // 1 // 2 // 3

迭代引數物件：

(function() {
  for (let argument of arguments) { console.log(argument); } })(1, 2, 3); // 1 // 2 // 3

檢視更多例子請訪問：https://devdocs.io/javascript/statements/for...of