JavaScript 的 `for...in` 和 `for...of` 循環之間的主要差異是什麼？

理解for...in 和for...of 語句之間的區​​別

在JavaScript 循環領域，for.. . in 和for...of 語句常常會產生混亂。雖然 for...in 一直是迭代屬性的基石，但 for...of 在 ES6 中出現是為了專門針對值。本文深入探討了這兩種構造之間的主要差異。

for...in：遍歷屬性名稱

For...in 循環迭代可枚舉屬性物件的名稱。如範例所示，它成功記錄了“0”、“1”、“2”和“foo”，它們代表陣列的索引鍵和陣列物件的“foo”鍵。

for...of：提取屬性值

相反，for...of 使用特定於物件的迭代器來遍歷該迭代器產生的值。在範例中，陣列迭代器僅產生數組內的值，即「3」、「5」和「7」。這種行為源自於迭代器被設計為僅關注值的事實。

非索引屬性的非迭代

值得注意的是， for...of 確實不迭代非索引屬性。在範例中，未記錄包含值“hello”的“foo”屬性。這是因為數組迭代器僅產生與數組索引關聯的值。

範例：以值為中心的迭代

為了說明這一點，以下循環應記錄數組值以及「foo」屬性值，但它僅記錄數組值：

for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
}

此行為強化了了解for...of 是專門為迭代值而建構的，不包括非索引屬性。

以上是JavaScript 的 `for...in` 和 `for...of` 循環之間的主要差異是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！