问题：JS字典如何遍历所有键值对？

Question

在JavaScript开发中，经常需要遍历字典（即对象）中的所有键值对。那么，如何高效、准确地遍历一个JS字典的所有键和对应的值呢？这个问题是前端开发中常见的基础问题之一。

Answer 1

JavaScript中高效遍历对象（字典）的键值对

在JavaScript开发中，对象（Object）常被用作“字典”来存储键值对。随着ES6及后续版本的发展，遍历对象的方式也变得多样化。本文将从基础到高级，逐步解析如何高效、准确地遍历一个对象中的所有键和对应的值。

1. 基础方法：使用 for...in 循环

这是最传统也是最常见的一种方式：

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

for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(`Key: ${key}, Value: ${obj[key]}`);
    }
}
    

注意：必须配合 hasOwnProperty() 方法使用，以避免遍历到原型链上的属性。

2. 获取所有键再遍历：Object.keys + forEach

该方法先获取对象的所有可枚举键名，然后通过数组的 forEach 遍历：

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

Object.keys(obj).forEach(key => {
    console.log(`Key: ${key}, Value: ${obj[key]}`);
});
    

这种方式更函数式，代码结构清晰，适合现代JS风格。

3. 使用 Object.entries 直接获取键值对数组

Object.entries() 返回一个由 [key, value] 组成的数组，非常方便用于解构赋值：

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

for (const [key, value] of Object.entries(obj)) {
    console.log(`Key: ${key}, Value: ${value}`);
}
    

这种方式语法简洁，语义明确，是推荐的现代写法。

4. 可选方式：Reflect.ownKeys 遍历所有自有属性键

适用于需要包括 Symbol 类型键的情况：

const obj = { a: 1 };
obj[Symbol('s')] = 2;

Reflect.ownKeys(obj).forEach(key => {
    console.log(`Key: ${key.toString()}, Value: ${obj[key]}`);
});
    

此方法能遍历所有类型的键，包括字符串和 Symbol。

5. 性能对比与选择建议

方法	是否支持Symbol	是否需hasOwnProperty检查	是否支持迭代器	适用场景
for...in	否	是	否	兼容性要求高或旧项目维护
Object.keys + forEach	否	否	否	现代项目中常用，逻辑清晰
Object.entries + for...of	否	否	是	推荐用于现代浏览器环境
Reflect.ownKeys	是	否	否	需要处理Symbol键时使用

6. 结合流程图分析不同方法的选择路径

mermaid
      graph TD
        A[开始] --> B{是否需要兼容IE？}
        B -- 是 --> C[使用 for...in + hasOwnProperty]
        B -- 否 --> D{是否需要遍历Symbol类型键？}
        D -- 是 --> E[使用 Reflect.ownKeys]
        D -- 否 --> F{是否需要迭代器支持？}
        F -- 是 --> G[使用 Object.entries + for...of]
        F -- 否 --> H[使用 Object.keys + forEach]