for...in 和 for...of 有什么区别？

特性	for...in	for...of
迭代内容	键名（key/index）	键值（value）
适用范围	可枚举属性（原型链上的也会遍历）	可迭代对象（实现 Symbol.iterator）
遍历对象	✅ 遍历对象属性名	❌ 对象不可迭代（除非手动实现迭代器）
遍历数组	✅ 遍历索引（字符串形式 "0", "1"）	✅ 遍历元素值
遍历 String	✅ 遍历索引	✅ 遍历字符
遍历 Map/Set	❌ 无索引	✅ 遍历键值对/值
原型属性	✅ 会遍历到	❌ 不适用
遍历顺序	数字键升序 + 插入顺序（不保证完全有序）	遵循迭代器定义的顺序
break/continue	✅	✅
异步迭代	❌	✅（for await...of）

示例：

const arr = [10, 20, 30];
arr.custom = 'ext';

for (const key in arr) {
  console.log(key); // '0', '1', '2', 'custom'（包含自定义属性）
}

for (const val of arr) {
  console.log(val); // 10, 20, 30（只迭代数组元素）
}

// 对象
const obj = { a: 1, b: 2 };
for (const key in obj) console.log(key); // 'a', 'b'
// for (const val of obj) ❌ TypeError: obj is not iterable

建议：对象属性遍历用 for...in（配合 hasOwnProperty 过滤），可迭代数据用 for...of。