在 JavaScript 中，for...in 和 for...of 是常用的两种遍历语法，它们看似相似，但用途和行为差异明显。

---

🔄 for...in —— 遍历对象的属性名

• 用于遍历对象的可枚举属性（包括原型链上的）

• 适用于：普通对象、数组（但一般不推荐）

语法：

for (const key in object) {
  // key 是属性名（字符串）
  console.log(key, object[key]);
}

示例：

const person = { name: 'Alice', age: 25 };
for (const key in person) {
  console.log(key);         // name, age
  console.log(person[key]); // Alice, 25
}

注意事项：

• 会遍历对象原型链上的属性（应使用 hasOwnProperty() 过滤）：

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);
  }
}

• 不推荐用于数组遍历，因为索引顺序可能不可靠。

---

🔄 for...of —— 遍历可迭代对象的值

• 用于遍历可迭代对象（Iterable）：数组、字符串、Set、Map、NodeList 等

• 不适用于普通对象（Object）

语法：

for (const value of iterable) {
  console.log(value);
}

示例：

const arr = ['a', 'b', 'c'];
for (const item of arr) {
  console.log(item); // a, b, c
}

const str = "hi";
for (const char of str) {
  console.log(char); // h, i
}

注意事项：

• 不能用于普通对象，会抛出错误：

const obj = { a: 1, b: 2 };
for (const val of obj) {  // ❌ TypeError
  console.log(val);
}

• 如果要遍历对象的值，可以配合 Object.values() 或 Object.entries()：

for (const val of Object.values(obj)) {
  console.log(val); // 1, 2
}

---

🆚 总结对比表

特性	for...in	for...of
遍历内容	属性名（key）	值（value）
适用对象	对象（Object）、数组	可迭代对象（数组、字符串、Set、Map等）
可用于对象	✅ 是	❌ 否（需转换为可迭代形式）
是否遍历原型链	✅ 是	❌ 否
顺序保证	❌ 不保证	✅ 遵循可迭代协议顺序
常见使用场景	遍历对象属性	遍历数组、字符串、Set、Map等

---

✅ 使用建议

• 遍历对象属性：使用 for...in（注意加 hasOwnProperty 判断）

• 遍历数组或其他可迭代结构：使用 for...of

• 遍历对象值或键值对：结合 Object.values() 或 Object.entries() 与 for...of

---

如需将这份笔记导出为 Markdown 或 PDF，我也可以帮你生成。需要吗？