一、核心方法對(duì)比表（一表打盡關(guān)鍵差異）

二、逐方法詳解：適用場(chǎng)景與代碼示例

1. Object.keys(obj)：快速提取可枚舉字符串鍵

用途：獲取對(duì)象自身的 可枚舉字符串鍵（最常用）
特點(diǎn)：忽略繼承屬性、Symbol 鍵、不可枚舉鍵
示例：

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 循環(huán)：遍歷原型鏈可枚舉鍵（需過(guò)濾）

用途：遍歷對(duì)象（包括原型鏈）的 可枚舉字符串鍵注意：必須用 hasOwnProperty 排除原型屬性
示例：

const obj = { x: 1 };
Object.prototype.y = 2; // 原型屬性

for (const key in obj) {
  if (obj.hasOwnProperty(key)) { // 過(guò)濾原型屬性
    console.log(key); // 輸出 "x"（忽略原型屬性 "y"）
  }
}

3. Object.getOwnPropertyNames(obj)：獲取自身所有字符串鍵（含不可枚舉）

用途：獲取對(duì)象自身的 所有字符串鍵（包括不可枚舉鍵）
典型場(chǎng)景：處理數(shù)組的 length（不可枚舉）或配置項(xiàng)
示例：

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)); // 空數(shù)組（Symbol 鍵不被包含）

4. Object.getOwnPropertySymbols(obj)：專屬 Symbol 鍵獲取

用途：?jiǎn)为?dú)獲取對(duì)象自身的 Symbol 鍵（無(wú)論是否可枚舉）
場(chǎng)景：處理通過(guò) Symbol() 創(chuàng)建的唯一鍵
示例：

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)：終極全量鍵獲取

用途：獲取對(duì)象自身的 所有鍵（字符串+Symbol，可枚舉+不可枚舉）
排序規(guī)則：

• 數(shù)值鍵按升序（如 1, 2 → ["1", "2"]）
• 字符串鍵按插入順序（如 a, b → ["a", "b"]）
• Symbol 鍵按創(chuàng)建順序（如先創(chuàng)建的 Symbol 在前）
  示例：

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)]

三、場(chǎng)景化選擇指南（快速?zèng)Q策）

四、避坑指南

• 原型鏈污染風(fēng)險(xiǎn)：for...in 會(huì)遍歷原型屬性，必須用 obj.hasOwnProperty(key) 過(guò)濾
• Symbol 鍵特殊性：所有字符串鍵相關(guān)方法（如 Object.keys）均會(huì)忽略 Symbol 鍵，需單獨(dú)處理
• 不可枚舉鍵陷阱：默認(rèn)方法（如 Object.keys）只返回可枚舉鍵，操作 length 等屬性時(shí)需用 getOwnPropertyNames

五、總結(jié)

掌握這 5 種方法，就能應(yīng)對(duì) 99% 的對(duì)象鍵名操作場(chǎng)景：

• 高頻場(chǎng)景用 Object.keys，簡(jiǎn)單直接
• 復(fù)雜場(chǎng)景（如包含 Symbol 或不可枚舉鍵）用 Reflect.ownKeys 兜底
• 遍歷場(chǎng)景注意原型鏈過(guò)濾，避免不必要的屬性干擾

通過(guò)表格對(duì)比和場(chǎng)景化選擇，從此告別「該用哪個(gè)方法」的困惑，高效操作對(duì)象鍵名！

以上就是JavaScript獲取對(duì)象鍵名的五種方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript獲取對(duì)象鍵名的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論