理解 JavaScript 中的物件迭代：'for...of”與'for...in”

迭代物件是 JavaScript 中常見的任務，但了解每種情況的正確技術可以使您的程式碼更乾淨、更有效率。本文解釋了為什麼不能直接將 for...of 與物件一起使用，提供了替代方法，並提供了迭代物件的最佳實踐。

目錄

1. JavaScript 中的迭代簡介
2. 為什麼 for...of 不適用於物件
3. 迭代物件的技術
   • 用於...
   • 使用Object.keys()
   • 使用 Object.values()
   • 使用 Object.entries()
4. 物件迭代技術的比較
5. for...in 與 for...of 的比較
6. 進階範例：迭代巢狀物件
7. JavaScript 中物件迭代的最佳實踐

---

1. JavaScript 迭代簡介

在 JavaScript 中，迭代資料結構是處理複雜資料集的重要組成部分。雖然數組和字串是可迭代對象，但普通對象（鍵值對）需要不同的迭代方法。當開發人員嘗試在物件上使用 for...of 時，他們經常會遇到問題。

---

2. 為什麼 for...of 不適用於對象

for...of 迴圈用於迭代可迭代物件，例如陣列、字串、Map 和 Set。然而，預設情況下，普通 JavaScript 物件不可迭代。

範例：嘗試使用物件 for...of

const user = { name: 'John', age: 30 };

for (const value of user) {
  console.log(value);
}
// TypeError: user is not iterable

嘗試在普通物件上使用 for...of 會引發 TypeError。發生這種情況是因為 JavaScript 中的物件沒有 [Symbol.iterator] 方法，而 for...of 迴圈需要該方法。

---

3. 物件迭代技術

要在 JavaScript 迭代對象，可以使用多種技術：

3.1 用於...in

for...in 迴圈迭代物件的可枚舉屬性。它循環遍歷物件的鍵。

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30

• 優點：簡單直接。
• 缺點：如果繼承的屬性是可枚舉的，則會對其進行迭代，這可能會導致意外的行為。

---

3.2 使用Object.keys()

Object.keys() 傳回物件自身屬性鍵的數組，讓您可以使用 for...of 來迭代它們。

const user = { name: 'John', age: 30 };

for (const key of Object.keys(user)) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30

• 優點：僅迭代物件自己的屬性。
• 缺點：僅檢索鍵，而不檢索值。

---

3.3 使用Object.values()

Object.values() 傳回物件屬性值的數組，然後可以使用 for...of 進行迭代。

const user = { name: 'John', age: 30 };

for (const value of Object.values(user)) {
  console.log(value);
}
// Output: 
// John
// 30

• 優點：無需處理鍵即可直接存取值。
• 缺點：無法直接存取金鑰。

---

3.4 使用Object.entries()

Object.entries() 傳回物件的鍵值對數組，這使得它非常適合迭代鍵和值。

const user = { name: 'John', age: 30 };

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// Output: 
// name John
// age 30

• 優點：在一次迭代中輕鬆存取鍵和值。
• 缺點：語法稍微複雜一些。

---

4. 物件迭代技術的比較

Technique	Access to Keys	Access to Values	Inherited Properties	Simplicity
for...in	Yes	Yes	Yes (if enumerable)	Simple
Object.keys() for...of	Yes	No	No	Moderate
Object.values() for...of	No	Yes	No	Moderate
Object.entries() for...of	Yes	Yes	No	Slightly complex

技術 存取金鑰 取得值 繼承屬性 簡單 標題> 對於...在 是 是 是（如果可枚舉） 簡單 Object.keys() for...of 是 否 否 中 Object.values() for...of 否 是 否 中 Object.entries() for...of 的 是 是 否 稍微複雜 表>

---

5. Comparison Between for...in and for...of

5.1 for...in Loop

The for...in loop is used to iterate over the enumerable properties (keys) of an object, including properties that may be inherited through the prototype chain.

Example: for...in with an Object

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output:
// name John
// age 30

• Explanation: The for...in loop iterates over the keys (name and age) and allows you to access the corresponding values (John and 30).

Example: for...in with an Array (Not Recommended)

const colors = ['red', 'green', 'blue'];

for (const index in colors) {
  console.log(index, colors[index]);
}
// Output:
// 0 red
// 1 green
// 2 blue

• Explanation: The for...in loop iterates over the indices (0, 1, 2) of the array, not the values themselves. This behavior is usually less desirable when working with arrays.

---

5.2 for...of Loop

The for...of loop is used to iterate over iterable objects like arrays, strings, maps, sets, and other iterables. It loops over the values of the iterable.

Example: for...of with an Array

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// Output:
// red
// green
// blue

• Explanation: The for...of loop directly iterates over the values of the array (red, green, blue), which is ideal for array iteration.

Example: for...of with a String

const name = 'John';

for (const char of name) {
  console.log(char);
}
// Output:
// J
// o
// h
// n

• Explanation: The for...of loop iterates over each character of the string (J, o, h, n), making it useful for string manipulation.

---

Summary: Key Differences Between for...in and for...of

Feature	for...in	for...of
Purpose	Iterates over object keys (including inherited properties)	Iterates over iterable values (arrays, strings, etc.)
Works with Objects	Yes	No (objects are not iterable)
Works with Arrays	Yes, but not ideal (returns indices)	Yes, ideal (returns values)
Use Case	Best for iterating over object properties	Best for arrays, strings, maps, sets, etc.

---

6. Advanced Example: Iterating Over Nested Objects

Sometimes, objects are nested, and you need to iterate through all levels of the object. Here's an example that uses recursion to handle nested objects.

const user = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: 10001
  }
};

// Recursively iterate through the object
function iterate(obj) {
  for (const [key, value] of Object.entries(obj)) {
    if (typeof value === 'object' && !Array.isArray(value)) {
      console.log(`Entering nested object: ${key}`);
      iterate(value); // Recursively call for nested objects
    } else {
      console.log(key, value); // Output key-value pair
    }
  }
}

iterate(user);
// Output: 
// name John
// age 30
// Entering nested object: address
// city New York
// zip 10001

• Explanation: The function checks if the value is an object, then recursively iterates through it.

---

7. Best Practices for Object Iteration in JavaScript

Use the Right Technique for the Right Task

1. Use for...in cautiously: It may iterate over properties inherited from the prototype chain,

以上是理解 JavaScript 中的物件迭代：'for...of”與'for...in”的詳細內容。更多資訊請關注PHP中文網其他相關文章！