javascript如何遍历对象与数组_for...in和for...of区别？_技术教程

for...in遍历对象所有可枚举属性（含原型链），不适用于数组；for...of仅遍历可迭代对象（如Array、Map），依赖[Symbol.iterator]，遍历对象需用Object.entries()等方法。

for...in 会遍历对象所有可枚举属性，包括原型链上的

它本意是为遍历对象设计的，但实际行为常让人意外：不仅遍历自身属性，还会进入原型链；对数组使用时，会把索引当作字符串键来处理，还可能遍历到意外添加的非数字属性。

常见错误现象：for...in 遍历 Array 时输出 "0"、"1"、"length"，甚至你手动加的 arr.custom = "test" 也会出现。

只适合明确要遍历「对象键名」且需兼容旧环境的场景
遍历前建议用 hasOwnProperty() 过滤掉继承属性
绝对不要用它遍历数组——顺序不保证，类型不可靠，性能也差

for...of 只能遍历可迭代对象（Array、Map、Set、String 等），不支持普通对象

fo

r...of 依赖对象的 [Symbol.iterator] 方法。数组天然支持，所以能直接拿到每个元素值；但普通 plain object 没这个接口，直接写 for...of obj 会报错：TypeError: obj is not iterable。

使用场景：

遍历数组元素（推荐替代 for...in 和传统 for (let i = 0; ...)）
遍历 Map 得到 [key, value] 元组，Set 得到唯一值
配合 entries() / keys() / values() 控制遍历内容

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

const map = new Map([['x', 1], ['y', 2]]);
for (const [k, v] of map) {
  console.log(k, v); // 'x' 1, 'y' 2
}

遍历对象的正确方式：Object.keys() + for...of 或 Object.entries()

想安全、清晰地遍历对象自身可枚举属性，应该先转成数组，再用 for...of ——这样既避开原型干扰，又保持语义明确。

Object.keys(obj) → 得到键名数组，适合只操作 key
Object.values(obj) → 得到值数组
Object.entries(obj) → 得到 [key, value] 二维数组，最常用

const user = { name: 'Alice', age: 30 };
for (const [key, value] of Object.entries(user)) {
  console.log(key, value); // 'name' 'Alice', 'age' 30
}

注意：Object.* 系列方法只返回**自身可枚举属性**，不包含 Symbol 键或不可枚举属性（如 obj.toString）；需要 Symbol 键时得用 Reflect.ownKeys() + 手动过滤。

for...in 和 for...of 在性能与语义上的根本差异

for...in 是「按属性名反射式查找」，引擎需检查原型链、过滤不可枚举项；for...of 是「按迭代协议拉取值」，路径固定、无反射开销，V8 等引擎对其做了深度优化。

容易被忽略的地方：

for...in 的遍历顺序在 ES2015 前不保证，现在虽对数字键有排序，但混合字符串键仍可能乱序
for...of 对稀疏数组（如 arr[0]=1; arr[100]=2）会跳过空位，而 for...in 会列出 "0" 和 "100"
箭头函数不能用作 for...of 的循环体（语法错误），必须用 function 或普通块语句