JavaScript对象属性遍历的6种常用方法详解与对比
作者：奔跑的web.
在 JavaScript 中，对象（Object）作为核心数据类型之一，存储着大量的键值对数据。日常开发中，我们经常需要遍历对象的属性、获取键名或属性值，而 JS 提供了多种相关方法来满足不同的遍历需求。
一、先明确一个核心概念
在学习具体方法前，我们先厘清一个关键概念，这是理解不同方法差异的基础：
对象的属性键类型：对象的属性键有两种合法类型——「字符串」和「Symbol 类型」。
- 普通属性名（如
name、age）本质上都是字符串； - Symbol 类型的键用于创建唯一属性，避免命名冲突，无法通过普通方式访问。
另外，本文所有方法均只针对对象自身的属性（不包括继承自原型链的属性），这也是它们的共性之一。
二、6 种对象属性操作方法详解
1.Object.keys(obj)：获取普通字符串键名数组
核心功能：返回对象自身所有普通字符串类型的属性名数组，数组元素为字符串格式的键名（日常开发中绝大多数属性都属于这类）。
代码示例
// 普通字面量对象
const user = {
name: '张三',
age: 28,
gender: '男'
};
// 获取字符串键名
const keys = Object.keys(user);
console.log(keys); // ["name", "age", "gender"]
// 不返回 Symbol 类型键
const sym = Symbol('id');
const userWithSym = {
name: '李四',
[sym]: 'U20240601' // Symbol 类型键
};
console.log(Object.keys(userWithSym)); // ["name"]（仅返回普通字符串键）
适用场景：日常开发中，仅需遍历对象的普通属性（如接口返回的业务数据对象、自定义字面量对象），获取键名时优先使用。
2.Object.values(obj)：获取普通字符串键对应的值数组
核心功能：返回对象自身所有普通字符串类型属性对应的属性值数组，数组元素的类型与属性值类型一致。
代码示例
const user = {
name: '张三',
age: 28,
gender: '男'
};
// 获取普通属性值
const values = Object.values(user);
console.log(values); // ["张三", 28, "男"]
// 不返回 Symbol 类型键对应的值
const sym = Symbol('id');
const userWithSym = {
name: '李四',
[sym]: 'U20240601'
};
console.log(Object.values(userWithSym)); // ["李四"]
适用场景：仅需要获取对象的属性值，无需关注键名时（如提取对象中的所有数据值进行汇总、筛选、去重等操作）。
3.Object.entries(obj)：获取普通键值对二维数组
核心功能：返回对象自身所有普通字符串类型属性的键值对二维数组，每个子数组的格式为 [key, value]，其中 key 是字符串键名，value 是对应属性值。
代码示例
const user = {
name: '张三',
age: 28,
gender: '男'
};
// 获取普通键值对
const entries = Object.entries(user);
console.log(entries);
// [["name", "张三"], ["age", 28], ["gender", "男"]]
// 常用场景 1：遍历处理键和值
entries.forEach(([key, value]) => {
console.log(`${key}：${value}`);
});
// 常用场景 2：转换为 Map 结构
const userMap = new Map(entries);
console.log(userMap.get('name')); // 张三
// 不返回 Symbol 类型键的键值对
const sym = Symbol('id');
const userWithSym = {
name: '李四',
[sym]: 'U20240601'
};
console.log(Object.entries(userWithSym)); // [["name", "李四"]]
适用场景
- 需要同时获取键名和属性值，进行遍历处理；
- 将普通对象转换为
Map结构（Map支持以任意类型为键，比普通对象更灵活）。
4.Object.getOwnPropertyNames(obj)：获取所有普通字符串键名
核心功能：返回对象自身所有普通字符串类型的属性名数组，覆盖所有常规字符串键，与 Object.keys 核心功能一致（剔除枚举概念后，日常使用中两者返回结果基本一致）。
代码示例
// 普通字面量对象
const user = {
name: '张三',
age: 28,
gender: '男'
};
// 对比 Object.keys 和 Object.getOwnPropertyNames
console.log(Object.keys(user)); // ["name", "age", "gender"]
console.log(Object.getOwnPropertyNames(user)); // ["name", "age", "gender"]
// 数组对象示例（数组的索引和 length 都是字符串键）
const arr = [1, 2, 3];
console.log(Object.getOwnPropertyNames(arr)); // ["0", "1", "2", "length"]
适用场景：日常开发中，与 Object.keys 可互换使用；在操作内置对象（如 Array、Date）时，获取其所有字符串类型属性键名（如数组的 length 属性）。
5.Object.getOwnPropertySymbols(obj)：获取所有 Symbol 类型属性
核心功能：专门返回对象自身所有Symbol 类型的属性键名数组，仅处理 Symbol 键，不涉及任何普通字符串键。
代码示例
// 定义多个 Symbol 类型键
const sym1 = Symbol('userId');
const sym2 = Symbol('userToken');
const user = {
name: '张三',
[sym1]: 'U20240601',
[sym2]: 'token_123456'
};
// 获取所有 Symbol 类型键
const symbols = Object.getOwnPropertySymbols(user);
console.log(symbols); // [Symbol(userId), Symbol(userToken)]
// 提取 Symbol 键对应的值
symbols.forEach(symKey => {
console.log(`${symKey.description}：${user[symKey]}`);
});
// 输出：
// userId：U20240601
// userToken：token_123456
适用场景
需要操作对象的 Symbol 类型属性（通常用于创建对象的唯一属性、避免属性名冲突，比如第三方库的内部属性定义）。
6.Reflect.ownKeys(obj)：获取所有属性键名（全能型）
核心功能：返回对象自身所有的属性键名数组，既包括普通字符串键，也包括 Symbol 类型键，是功能最全面的属性键获取方法。
代码示例
// 定义包含普通字符串键和 Symbol 键的对象
const sym1 = Symbol('userId');
const user = {
name: '张三',
age: 28,
[sym1]: 'U20240601'
};
// 获取所有属性键名
const allKeys = Reflect.ownKeys(user);
console.log(allKeys); // ["name", "age", Symbol(userId)]
// 遍历所有键名，获取对应值
allKeys.forEach(key => {
console.log(`${key.toString()}：${user[key]}`);
});
适用场景：需要完整获取对象的所有属性键（无遗漏），比如深度克隆对象、遍历对象所有属性进行序列化、处理包含 Symbol 键的复杂对象时。
三、核心总结对比表
为了更清晰地梳理各方法的差异，我们整理了详细对比表，方便快速查阅：
| 方法名称 | 返回内容 | 支持普通字符串键 | 支持 Symbol 键 | 返回数组元素类型 |
|---|---|---|---|---|
| Object.keys(obj) | 普通字符串键名 | 是 | 否 | 字符串 |
| Object.values(obj) | 普通字符串键对应的值 | 是 | 否 | 任意类型（与属性值一致） |
| Object.entries(obj) | 普通字符串键值对（[key, value]） | 是 | 否 | 子数组（字符串键 + 任意类型值） |
| Object.getOwnPropertyNames(obj) | 所有普通字符串键名 | 是 | 否 | 字符串 |
| Object.getOwnPropertySymbols(obj) | 所有 Symbol 类型键名 | 否 | 是 | Symbol |
| Reflect.ownKeys(obj) | 所有键名（普通字符串 + Symbol） | 是 | 是 | 字符串 + Symbol |
四、实战选型建议
1.日常普通遍历（仅处理常规对象）：
- 只需键名 →
Object.keys - 只需值 →
Object.values - 需键值对 →
Object.entries（推荐，灵活性最高，覆盖 90% 以上场景）
2.仅处理 Symbol 类型属性：Object.getOwnPropertySymbols
3.需要完整获取所有属性（无遗漏，含 Symbol 键）：Reflect.ownKeys（全能型，适合复杂场景）
4.操作内置对象（如 Array、Date）：Object.getOwnPropertyNames
五、常见误区提醒
- 所有方法均不返回原型链上的属性：如果需要遍历原型链上的属性，需结合
for...in循环。 Object.values和Object.entries不支持 Symbol 键：Symbol 键的属性不会被这两个方法返回，需使用Object.getOwnPropertySymbols单独处理。- Symbol 键无法通过普通方式访问：必须通过对应的 Symbol 变量才能访问（如
user[sym1]），无法直接通过user.sym1或user['sym1']访问。
到此这篇关于JavaScript对象属性遍历的6种常用方法详解与对比的文章就介绍到这了,更多相关JavaScript对象属性遍历内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！