JS中的for…of和for…in有什么區別？

for…in 遍歷對象鍵，for…of 遍歷可迭代值。1. for…in 用于遍歷對象的鍵名，適用于對象和數組，但遍歷數組時可能包含原型鏈屬性，需配合 hasownproperty 使用；2. for…of 用于遍歷可迭代對象（如數組、字符串、map等）的值，更直觀安全，但不適用于普通對象；3. 若需同時獲取鍵和值，可用 Object.entries() + for…of；4. 根據數據類型選擇合適方式：對象用 for…in，可迭代結構用 for…of。

在JavaScript中，for…of 和 for…in 看起來很像，但它們的作用和適用對象完全不同。簡單來說，for…in 用于遍歷對象的鍵（key），而 for…of 用于遍歷可迭代對象的值（value）。

for…in：遍歷對象的鍵

for…in 主要用于遍歷對象的可枚舉屬性名（也就是鍵）。它適用于普通對象、數組也可以用，但使用時需要注意一些細節。

const obj = { a: 1, b: 2, c: 3 };  for (let key in obj) {   console.log(key); // 輸出 'a', 'b', 'c' }

常見用途和注意事項：

• 遍歷的是鍵名，不是值，所以需要通過 obj[key] 來獲取值。
• 不建議直接用于數組遍歷時，因為：
  • 它遍歷的是索引（字符串形式），但還可能包括原型鏈上的屬性。
  • 順序不一定可靠（雖然es6后基本有序了）。
• 使用前最好加上 hasOwnProperty 判斷，避免遍歷到繼承來的屬性。

for (let key in obj) {   if (obj.hasOwnProperty(key)) {     console.log(obj[key]);   } }

for…of：遍歷可迭代對象的值

for…of 只能用于可迭代對象，比如數組、字符串、Map、Set、NodeList等。

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

特點和適用場景：

• 直接拿到值，不需要再通過索引來取。
• 更適合數組、字符串這種有順序的結構。
• 不適用于普通對象，除非給對象設置了 symbol.iterator。

如果你寫 for…of 遍歷一個普通對象，會報錯：“obj is not iterable”。

哪個更適合我？

這個問題取決于你要遍歷的對象類型和目的：

小貼士：別混淆了！

• for…in 是為對象設計的，但也能“湊合”遍歷數組，只是容易出問題。
• for…of 更現代，更安全，但不能用于普通對象。
• 如果你不小心把 for…of 用在非可迭代對象上，瀏覽器會報錯。

基本上就這些區別。記住它們各自的用途，根據數據結構選擇合適的方式就行。