JavaScript 中 for...of 与 for...in 的区别

✅ for...in：

• 用于遍历对象的 可枚举属性（包括继承的）
• 返回的是 键名（key）

示例：

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

for (const key in obj) {
  console.log(key);       // 输出: a, b, c
  console.log(obj[key]);  // 输出: 1, 2, 3
}

特点：

• 可以遍历对象的 自有属性 + 原型链上的属性
• 不适合遍历数组（顺序不保证）

✅ for...of：

• 用于遍历 可迭代对象（iterable），如数组、字符串、Map、Set、arguments 等。
• 返回的是 值（value）

示例：

const arr = [10, 20, 30];

for (const value of arr) {
  console.log(value);  // 输出: 10, 20, 30
}

特点：

• 只能用于具有 [Symbol.iterator] 接口的对象
• 不能用于普通对象（Object），除非手动实现 iterator

🔍 一图总结：

✅ 补充说明：

const arr = ['a', 'b', 'c'];

for (let i in arr) {
  console.log(i);        // 输出 0, 1, 2（索引）
}

for (let v of arr) {
  console.log(v);        // 输出 'a', 'b', 'c'（值）
}