JavaScript獲取對象鍵名的五種方法
一、核心方法對比表(一表打盡關(guān)鍵差異)
| 方法/語法 | 返回類型 | 繼承屬性 | 可枚舉性 | Symbol 鍵 | 鍵類型 | 排序規(guī)則 | 核心特性總結(jié) |
|---|---|---|---|---|---|---|---|
Object.keys(obj) | 字符串?dāng)?shù)組 | ? 否 | ? 僅可枚舉 | ? 否 | 字符串 | 數(shù)值鍵升序,字符串鍵按插入順序 | 最常用,快速獲取對象自身可枚舉字符串鍵(忽略 Symbol 和不可枚舉鍵) |
for...in 循環(huán) | -(遍歷過程) | ? 是 | ? 僅可枚舉 | ? 否 | 字符串 | 同上 | 遍歷原型鏈可枚舉鍵,需手動過濾原型屬性(hasOwnProperty) |
Object.getOwnPropertyNames(obj) | 字符串?dāng)?shù)組 | ? 否 | ? 包含不可枚舉 | ? 否 | 字符串 | 同上 | 獲取對象自身所有字符串鍵(包括不可枚舉,如數(shù)組的 length) |
Object.getOwnPropertySymbols(obj) | Symbol 數(shù)組 | ? 否 | ? 包含不可枚舉 | ? 是 | Symbol | 按 Symbol 創(chuàng)建順序 | 專門用于獲取對象自身的 Symbol 鍵(無論是否可枚舉) |
Reflect.ownKeys(obj) | 混合數(shù)組(字符串+Symbol) | ? 否 | ? 包含不可枚舉 | ? 是 | 混合 | 數(shù)值鍵→字符串鍵→Symbol鍵(按創(chuàng)建順序) | 終極方案:獲取對象自身所有鍵(字符串+Symbol,可枚舉+不可枚舉) |
二、逐方法詳解:適用場景與代碼示例
1. Object.keys(obj):快速提取可枚舉字符串鍵
用途:獲取對象自身的 可枚舉字符串鍵(最常用)
特點(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):遍歷原型鏈可枚舉鍵(需過濾)
用途:遍歷對象(包括原型鏈)的 可枚舉字符串鍵注意:必須用 hasOwnProperty 排除原型屬性
示例:
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):獲取自身所有字符串鍵(含不可枚舉)
用途:獲取對象自身的 所有字符串鍵(包括不可枚舉鍵)
典型場景:處理數(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 鍵獲取
用途:單獨(dú)獲取對象自身的 Symbol 鍵(無論是否可枚舉)
場景:處理通過 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):終極全量鍵獲取
用途:獲取對象自身的 所有鍵(字符串+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)]
三、場景化選擇指南(快速決策)
| 需求場景 | 最佳方法 |
|---|---|
| 快速獲取自身可枚舉字符串鍵 | Object.keys(obj) |
| 遍歷原型鏈可枚舉鍵(需過濾原型) | for...in + hasOwnProperty |
| 獲取自身所有字符串鍵(含不可枚舉) | Object.getOwnPropertyNames(obj) |
| 單獨(dú)獲取自身 Symbol 鍵 | Object.getOwnPropertySymbols(obj) |
| 獲取自身所有鍵(全量,含 Symbol) | Reflect.ownKeys(obj) |
四、避坑指南
- 原型鏈污染風(fēng)險(xiǎn):
for...in會遍歷原型屬性,必須用obj.hasOwnProperty(key)過濾 - Symbol 鍵特殊性:所有字符串鍵相關(guān)方法(如
Object.keys)均會忽略 Symbol 鍵,需單獨(dú)處理 - 不可枚舉鍵陷阱:默認(rèn)方法(如
Object.keys)只返回可枚舉鍵,操作length等屬性時(shí)需用getOwnPropertyNames
五、總結(jié)
掌握這 5 種方法,就能應(yīng)對 99% 的對象鍵名操作場景:
- 高頻場景用
Object.keys,簡單直接 - 復(fù)雜場景(如包含 Symbol 或不可枚舉鍵)用
Reflect.ownKeys兜底 - 遍歷場景注意原型鏈過濾,避免不必要的屬性干擾
通過表格對比和場景化選擇,從此告別「該用哪個(gè)方法」的困惑,高效操作對象鍵名!
以上就是JavaScript獲取對象鍵名的五種方法的詳細(xì)內(nèi)容,更多關(guān)于JavaScript獲取對象鍵名的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
bootstrap實(shí)現(xiàn)二級下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了bootstrap實(shí)現(xiàn)二級下拉菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
關(guān)于Ext中form移除textfield方法:hide(),setVisible(false),remove()
根據(jù)條件來控制是否顯示form里的textfield表單2010-12-12
window.onload綁定多個(gè)事件的兩種解決方案
這篇文章主要介紹了window.onload綁定多個(gè)事件的兩種解決方案的相關(guān)資料,需要的朋友可以參考下2016-05-05
詳細(xì)分析Javascript中創(chuàng)建對象的四種方式
這篇文章詳細(xì)介紹了Javascript中創(chuàng)建對象的幾種方式與每種方式的優(yōu)缺點(diǎn),其中包括工廠模式、構(gòu)造函數(shù)模式、原型模式和組合使用構(gòu)造函數(shù)模式和原型模式,有需要的小伙伴們一起來學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動畫效果
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10

