for in与for of的区别

在JavaScript中，for...in 和 for...of 是两种不同的循环结构，用途和适用场景有明显区别：

---

1. for...in 循环

• 用途：遍历对象的可枚举属性（包括自身属性和继承的属性）。
• 适用对象：普通对象（Object）。
• 特点：
  • 返回对象的键名（key）。
  • 可能遍历到原型链上的属性（需用 hasOwnProperty 过滤）。
  • 不保证遍历顺序（尤其是数字键的属性可能按数值顺序遍历）。
• 示例：

  const obj = { a: 1, b: 2 };
  for (const key in obj) {
    console.log(key); // 输出 'a', 'b'
  }
  
  // 数组（不推荐）
  const arr = [10, 20, 30];
  arr.foo = "bar";
  for (const index in arr) {
    console.log(index); // 输出 '0', '1', '2', 'foo'
  }
  

---

2. for...of 循环

• 用途：遍历可迭代对象的值。
• 适用对象：数组、字符串、Map、Set、arguments、NodeList 等实现了 [Symbol.iterator] 接口的对象。
• 特点：
  • 直接返回元素的值（value）。
  • 不遍历自定义添加的非索引属性。
  • 不能直接遍历普通对象（需手动实现迭代器）。
• 示例：

  const arr = [10, 20, 30];
  arr.foo = "bar";
  for (const value of arr) {
    console.log(value); // 输出 10, 20, 30（忽略 foo）
  }
  
  const str = "hello";
  for (const char of str) {
    console.log(char); // 输出 'h', 'e', 'l', 'l', 'o'
  }
  
  // Map 示例
  const map = new Map([["a", 1], ["b", 2]]);
  for (const [key, value] of map) {
    console.log(key, value); // 输出 'a 1', 'b 2'
  }
  

---

对比总结

特性	for...in	for...of
遍历内容	对象的键名（key）	可迭代对象的值（value）
适用对象	普通对象	数组、字符串、Map、Set 等
原型链属性	会遍历（需过滤）	不涉及
自定义属性	遍历所有可枚举属性	仅遍历元素值，忽略非索引属性
普通对象支持	支持	默认不支持（需自定义迭代器）

---

何时使用？

• 用 for...in 处理对象属性。
• 用 for...of 处理数组、字符串等可迭代对象的值。
• 避免用 for...in 遍历数组（可能包含意外属性）。

如果需要遍历普通对象的值，可先提取键数组：

const obj = { a: 1, b: 2 };
for (const key of Object.keys(obj)) {
  console.log(obj[key]); // 输出 1, 2
}