for...in遍历对象的可枚举属性名，包括继承属性，适用于对象；for...of遍历可迭代对象的值，如数组、字符串等，不适用于普通对象。
for...of 和 for...in 是 JavaScript 中两种不同的循环语法，虽然写法相似，但用途和行为有本质区别。理解它们的差异有助于在实际开发中正确选择使用场景。
for...in 遍历对象的键（key）
for...in 用于遍历对象的**可枚举属性名**（即键），包括自身和继承的属性（来自原型链）。它适用于普通对象，不推荐用于数组。
常见用法：
- 遍历对象的所有可枚举属性
- 获取属性名进行操作
for (let key in obj) {
console.log(key); // 输出: "a", "b", "c"
}
注意：如果对象的属性来自原型链或被设置为不可枚举，可能不会按预期输出。建议配合 hasOwnProperty 使用以避免遍历继承属性：
立即学习“Java免费学习笔记（深入）”；
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key]);
}
}
for...of 遍历可迭代对象的值（value）
for...of 用于遍历实现了 Iterable 接口的对象，如数组、字符串、Map、Set、arguments 等。它直接获取的是元素的值，而不是键。
适用对象：
- Array
- String
- Map
- Set
- arguments
- NodeList（DOM 节点集合）
for (let value of arr) {
console.log(value); // 输出: 10, 20, 30
} const str = "hi";
for (let char of str) {
console.log(char); // 输出: "h", "i"
}
for...of 不适用于普通对象，因为普通对象默认不可迭代。尝试对普通对象使用会报错：
const obj = { a: 1 };// for (let v of obj) { } // 报错：obj is not iterable
关键区别总结
| 特性 | for...in | for...of |
|---|---|---|
| 遍历目标 | 对象的可枚举属性名（key） | 可迭代对象的值（value） |
| 适用对象 | 所有对象（包括数组） | 数组、字符串、Map、Set 等可迭代对象 |
| 是否包含继承属性 | 是（需用 hasOwnProperty 过滤） | 否 |
| 能否用于普通对象 | 可以 | 不可以（会报错） |
| 顺序 | 不一定保证顺序（尤其非整数键） | 按插入或索引顺序 |
使用建议
- 遍历数组元素值时，优先使用 for...of
- 遍历对象的属性时，使用 for...in，并检查 hasOwnProperty
- 需要同时获取索引和值时，数组可用 entries() 配合 for...of：
console.log(index, value);
}
基本上就这些。掌握它们的核心差异，能让你写出更清晰、安全的循环代码。
