JavaScript 遍历对象键值对：for...in、Object.keys 与 entries 对比

一、for...in 循环：语法机制与原型链隐患

for...in 是 JavaScript 最早提供的对象属性遍历语法。其设计初衷是枚举一个对象中所有可枚举的字符串属性。然而，该语法的核心特征是不仅枚举对象自身的属性，还会沿着原型链（Prototype Chain）一路向上查找并枚举所有可枚举的继承属性，直到到达 Object.prototype。

// 原型链继承示例
const animal = { isAlive: true };
const dog = Object.create(animal);
dog.name = "旺财";
dog.age = 3;

for (const key in dog) {
  console.log(`键: ${key}, 值: ${dog[key]}`);
}

// 示例输出：
// 键: name, 值: 旺财
// 键: age, 值: 3
// 键: isAlive, 值: true  <-- 继承自 animal 原型的属性被意外遍历！

在上述代码中，isAlive 并非 dog 自身的属性，但 for...in 依然输出了该属性。在实际业务中，第三方库拓展了内置原型或继承基类属性时，这种行为极易引发不可预料的数据污染或逻辑 Bug。

// 防御性代码示例（过滤原型链属性）
for (const key in dog) {
  if (Object.hasOwn(dog, key)) {
    console.log(key, dog[key]);
  }
}

图 1：for...in 与现代方法在原型链穿透上的边界范围对比

二、Object.keys()：键名提取与间接访问

ECMAScript 5 (ES5) 规范引入了 Object.keys()。该方法接收一个目标对象，返回一个包含该对象自身所有可枚举属性名称（键名）的字符串数组。

因为返回值是一个标准的 JavaScript 数组，开发者可以直接利用现代数组的迭代生态（如 for...of、forEach、map、filter 等）对键名进行流式处理。

const config = {
  host: "127.0.0.1",
  port: 8080,
  ssl: false
};

// 获取所有自身可枚举键
const keys = Object.keys(config); 
// 结果: ["host", "port", "ssl"]

// 遍历键并间接获取值
for (const key of keys) {
  const value = config[key]; // 需通过属性访问器二次求值
  console.log(`${key} => ${value}`);
}

局限与权衡：Object.keys() 解决了原型链污染的问题，且代码结构比带有 hasOwn 校验的 for...in 更简洁。但其缺点在于若需同时使用键和值，每次循环必须通过 obj[key] 再次索引查找。在处理复杂对象或对代码语义要求较高的场景下，频繁的属性间接访问不够直观。

图 2：Object.keys 与 Object.entries 在数据获取与解构路径上的流程差异

三、Object.entries()：现代键值遍历首选

ECMAScript 2017 (ES8) 规范发布了 Object.entries()，正式补齐了 JavaScript 原生获取键值对数组的标准化能力。

它返回一个二维数组，每个子元素是一个形如 [key, value] 的二元组（Tuple），其中包含了对象自身所有可枚举属性的键名与对应值。结合 ES6 的数组解构赋值（Array Destructuring）与 for...of 循环，遍历语法达到了极佳的表达力与简洁度。

const userProfile = {
  id: 1001,
  username: "zhangsan",
  status: "active"
};

// 最推荐的键值对遍历范式
for (const [key, value] of Object.entries(userProfile)) {
  console.log(`字段: ${key} -> 值: ${value}`);
}

与现代函数式 API 的无缝契合

Object.entries() 不仅使 for...of 更优雅，还与 Object.fromEntries()（ES2019）以及 Map 构造函数构成了完整的数据转换闭环：

// 1. 将对象属性转换为 Map
const profileMap = new Map(Object.entries(userProfile));

// 2. 使用数组高阶函数清洗对象（例如过滤特定字段并转回对象）
const sanitized = Object.fromEntries(
  Object.entries(userProfile).filter(([k, v]) => k !== "id")
);
// 输出: { username: "zhangsan", status: "active" }

图 3：Object.entries() 结合解构语法的底层执行步骤

四、全维度特性与边界深度对比

为了在实际工程中做出合理的架构选择，我们需要从属性枚举范围、Symbol 支持、枚举顺序、内存开销及代码健壮性五个维度进行综合考量。

关于遍历顺序与 Symbol 属性的重要补充

• 属性排序规则（ES2015+ 确定性）：三种方法在遍历自身字符串属性时，均严格遵循相同规则：先按升序枚举非负整数索引键（如 "0", "1"），再按属性插入的时间先后顺序枚举普通字符串键。但 for...in 在涉及原型链继承属性时，跨原型的解析次序在老旧浏览器中可能会出现边缘差异。
• Symbol 属性的处理：这三种方法均不包含以 Symbol 为键的属性。若业务中定义了 Symbol('id') 类型的私有字段，必须使用 Object.getOwnPropertySymbols(obj) 或 Reflect.ownKeys(obj) 来获取完整的属性集合。

图 4：现代 JavaScript 遍历场景逻辑选型决策树

五、工程实践避坑指南与总结

1. 严禁使用 for...in 遍历数组

很多初学者会将 for...in 误用于数组遍历。这是非常危险的，原因有三：

1. for...in 产出的索引是 string 类型（如 "0", "1"）而非数字类型，可能导致后续加法操作变成字符串拼接。
2. 若原型上扩展了数组方法（例如某些老旧 polyfill），这些方法名会作为“元素键”被一并输出。
3. 遍历顺序在老版本引擎中不保证严格自增。遍历数组应始终使用 for...of、for(let i=0;...) 或 forEach。

2. 极大体量对象的内存考量

在处理拥有数十万个属性的超大型数据字典时，Object.entries() 会瞬时分配一个巨大的二维数组，带来短暂的内存分配开销和 GC（垃圾回收）压力。在对吞吐量和内存极度敏感的性能瓶颈场景下，若仅需要部分匹配，传统的单层 for (const key of Object.keys(obj)) 并在循环体内部提前 break，内存开销通常低于生成全部二元组。

3. 总结与建议

总结而言，现代 JavaScript 的对象遍历语法已经高度成熟。在绝大多数日常业务开发中，默认优先选择 for (const [key, value] of Object.entries(target))，它提供了最佳的代码自解释性与原型安全性；仅需要校验键存在性或计算键数量时，选用 Object.keys()；彻底告别未加防护的 for...in 循环。

图 5：三种方案核心能力与工程选型看板