JavaScript 中 for...in 和 for...of 的區別詳解

在 JavaScript 中，for...in 和 for...of 是兩種常見的循環語句，雖然它們的語法相似，但適用場景和功能卻有所不同。本文將深入探討這兩種循環的區別，並通過實例幫助大家更好地理解如何使用它們。

1. for...in

for...in 主要用於遍歷對象的可枚舉屬性，即對象的鍵（屬性名）。它不僅會遍歷對象自身的屬性，還會遍歷繼承自原型鏈的屬性，因此在處理普通對象時使用較為常見。

示例：

1
const obj = { a: 1, b: 2, c: 3 };
2

3
for (const key in obj) {
4
  console.log(key); // 輸出 a, b, c
5
}

• 特點:

  • for...in 遍歷的是對象的鍵（屬性名或數組的索引）。
  • 它會遍歷對象的所有可枚舉屬性，包括繼承的屬性。
  • 遍歷順序不一定是插入的順序，因此不適合需要特定順序的場景。

• 適用場景:

  • 遍歷對象的屬性。
  • 不推薦用於數組的遍歷，因為 for...in 只遍歷索引，並且順序不一定可靠。

2. for...of

for...of 用於遍歷可迭代對象（如數組、字符串、Map、Set 等）的元素。與 for...in 不同，for...of 更關注對象的值而非鍵，因此在處理數組、字符串等可迭代對象時更加適用。

示例：

1
const arr = [1, 2, 3];
2

3
for (const value of arr) {
4
  console.log(value); // 輸出 1, 2, 3
5
}

• 特點:

  • for...of 遍歷的是可迭代對象的值。
  • 適用於所有可迭代對象，如數組、字符串、Set、Map 等。
  • 不適用於普通對象，因為對象不是可迭代的。

• 適用場景:

  • 遍歷數組、字符串、Set、Map 等可迭代對象的值。
  • 不適合用於遍歷對象的屬性。

區別總結

1. 遍歷內容不同:

   • for...in 遍歷的是對象的鍵（屬性名或索引）。
   • for...of 遍歷的是可迭代對象的值。

2. 適用對象不同:

   • for...in 適合用於對象遍歷，也可以遍歷數組的索引（但不推薦）。
   • for...of 適合用於可迭代對象，如數組、字符串、Map、Set 等。

示例對比

1
const arr = ["a", "b", "c"];
2

3
// for...in 遍歷的是索引（鍵）
4
for (const index in arr) {
5
  console.log(index); // 輸出 0, 1, 2
6
}
7

8
// for...of 遍歷的是值
9
for (const value of arr) {
10
  console.log(value); // 輸出 'a', 'b', 'c'
11
}

使用建議

• 如果需要遍歷對象的屬性，建議使用 for...in。
• 如果需要遍歷數組或其他可迭代對象的值，建議使用 for...of。