在 JavaScript 中,操作对象时获取键名是高频需求。不同场景下,我们需要筛选「自身/继承属性」「可枚举/不可枚举键」「字符串/Symbol 键」,本文将全面梳理 5 种核心方法的差异与适用场景,助你精准选择。
一、核心方法对比表(一表打尽关键差异)
方法/语法 | 返回类型 | 继承属性 | 可枚举性 | Symbol 键 | 键类型 | 排序规则 | 核心特性总结 |
---|---|---|---|---|---|---|---|
Object.keys(obj) |
字符串数组 | ❌ 否 | ✅ 仅可枚举 | ❌ 否 | 字符串 | 数值键升序,字符串键按插入顺序 | 最常用,快速获取对象自身可枚举字符串键(忽略 Symbol 和不可枚举键) |
for...in 循环 |
-(遍历过程) | ✅ 是 | ✅ 仅可枚举 | ❌ 否 | 字符串 | 同上 | 遍历原型链可枚举键,需手动过滤原型属性(hasOwnProperty ) |
Object.getOwnPropertyNames(obj) |
字符串数组 | ❌ 否 | ❌ 包含不可枚举 | ❌ 否 | 字符串 | 同上 | 获取对象自身所有字符串键(包括不可枚举,如数组的 length ) |
Object.getOwnPropertySymbols(obj) |
Symbol 数组 | ❌ 否 | ❌ 包含不可枚举 | ✅ 是 | Symbol | 按 Symbol 创建顺序 | 专门用于获取对象自身的 Symbol 键(无论是否可枚举) |
Reflect.ownKeys(obj) |
混合数组(字符串+Symbol) | ❌ 否 | ❌ 包含不可枚举 | ✅ 是 | 混合 | 数值键→字符串键→Symbol键(按创建顺序) | 终极方案:获取对象自身所有键(字符串+Symbol,可枚举+不可枚举) |
二、逐方法详解:适用场景与代码示例
1. Object.keys(obj)
:快速提取可枚举字符串键
用途 :获取对象自身的 可枚举字符串键 (最常用)
特点 :忽略继承属性、Symbol 键、不可枚举键
示例:
javascript
const obj = { a: 1, b: 2, [Symbol('sym')]: 3 };
Object.defineProperty(obj, 'c', { value: 4, enumerable: false }); // 不可枚举键
console.log(Object.keys(obj)); // ["a", "b"](仅返回可枚举字符串键)
2. for...in
循环:遍历原型链可枚举键(需过滤)
用途 :遍历对象(包括原型链)的 可枚举字符串键
注意 :必须用 hasOwnProperty
排除原型属性
示例:
javascript
const obj = { x: 1 };
Object.prototype.y = 2; // 原型属性
for (const key in obj) {
if (obj.hasOwnProperty(key)) { // 过滤原型属性
console.log(key); // 输出 "x"(忽略原型属性 "y")
}
}
3. Object.getOwnPropertyNames(obj)
:获取自身所有字符串键(含不可枚举)
用途 :获取对象自身的 所有字符串键 (包括不可枚举键)
典型场景 :处理数组的 length
(不可枚举)或配置项
示例:
javascript
const arr = [1, 2, 3];
console.log(Object.getOwnPropertyNames(arr)); // ["0", "1", "2", "length"](包含不可枚举的 length)
const obj = { [Symbol('sym')]: 4 };
console.log(Object.getOwnPropertyNames(obj)); // 空数组(Symbol 键不被包含)
4. Object.getOwnPropertySymbols(obj)
:专属 Symbol 键获取
用途 :单独获取对象自身的 Symbol 键 (无论是否可枚举)
场景 :处理通过 Symbol()
创建的唯一键
示例:
javascript
const sym1 = Symbol('key1');
const sym2 = Symbol('key2');
const obj = { [sym1]: 'value1', [sym2]: 'value2' };
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(key1), Symbol(key2)]
5. Reflect.ownKeys(obj)
:终极全量键获取
用途 :获取对象自身的 所有键 (字符串+Symbol,可枚举+不可枚举)
排序规则:
- 数值键按升序(如
1
,2
→["1", "2"]
) - 字符串键按插入顺序(如
a
,b
→["a", "b"]
) - Symbol 键按创建顺序(如先创建的 Symbol 在前)
示例:
javascript
const obj = {
2: 'two',
1: 'one',
b: 'string',
a: 'string',
[Symbol('sym1')]: 'sym1',
[Symbol('sym2')]: 'sym2'
};
console.log(Reflect.ownKeys(obj));
// 输出顺序:["1", "2", "a", "b", Symbol(sym1), Symbol(sym2)]
三、场景化选择指南(快速决策)
需求场景 | 最佳方法 |
---|---|
快速获取自身可枚举字符串键 | Object.keys(obj) |
遍历原型链可枚举键(需过滤原型) | for...in + hasOwnProperty |
获取自身所有字符串键(含不可枚举) | Object.getOwnPropertyNames(obj) |
单独获取自身 Symbol 键 | Object.getOwnPropertySymbols(obj) |
获取自身所有键(全量,含 Symbol) | Reflect.ownKeys(obj) |
四、避坑指南
- 原型链污染风险 :
for...in
会遍历原型属性,必须用obj.hasOwnProperty(key)
过滤 - Symbol 键特殊性 :所有字符串键相关方法(如
Object.keys
)均会忽略 Symbol 键,需单独处理 - 不可枚举键陷阱 :默认方法(如
Object.keys
)只返回可枚举键,操作length
等属性时需用getOwnPropertyNames
五、总结
掌握这 5 种方法,就能应对 99% 的对象键名操作场景:
- 高频场景 用
Object.keys
,简单直接 - 复杂场景 (如包含 Symbol 或不可枚举键)用
Reflect.ownKeys
兜底 - 遍历场景注意原型链过滤,避免不必要的属性干扰
通过表格对比和场景化选择,从此告别「该用哪个方法」的困惑,高效操作对象键名!
如果本文对你有帮助,欢迎点赞收藏~ 有其他 JS 细节想了解,评论区告诉我!