JavaScript獲取對象鍵名的五種方法
一、核心方法對比表(一表打盡關(guān)鍵差異)
方法/語法 | 返回類型 | 繼承屬性 | 可枚舉性 | Symbol 鍵 | 鍵類型 | 排序規(guī)則 | 核心特性總結(jié) |
---|---|---|---|---|---|---|---|
Object.keys(obj) | 字符串數(shù)組 | ? 否 | ? 僅可枚舉 | ? 否 | 字符串 | 數(shù)值鍵升序,字符串鍵按插入順序 | 最常用,快速獲取對象自身可枚舉字符串鍵(忽略 Symbol 和不可枚舉鍵) |
for...in 循環(huán) | -(遍歷過程) | ? 是 | ? 僅可枚舉 | ? 否 | 字符串 | 同上 | 遍歷原型鏈可枚舉鍵,需手動過濾原型屬性(hasOwnProperty ) |
Object.getOwnPropertyNames(obj) | 字符串數(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):快速提取可枚舉字符串鍵
用途:獲取對象自身的 可枚舉字符串鍵(最常用)
特點:忽略繼承屬性、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
(不可枚舉)或配置項
示例:
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 鍵獲取
用途:單獨獲取對象自身的 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) |
單獨獲取自身 Symbol 鍵 | Object.getOwnPropertySymbols(obj) |
獲取自身所有鍵(全量,含 Symbol) | Reflect.ownKeys(obj) |
四、避坑指南
- 原型鏈污染風險:
for...in
會遍歷原型屬性,必須用obj.hasOwnProperty(key)
過濾 - Symbol 鍵特殊性:所有字符串鍵相關(guān)方法(如
Object.keys
)均會忽略 Symbol 鍵,需單獨處理 - 不可枚舉鍵陷阱:默認方法(如
Object.keys
)只返回可枚舉鍵,操作length
等屬性時需用getOwnPropertyNames
五、總結(jié)
掌握這 5 種方法,就能應(yīng)對 99% 的對象鍵名操作場景:
- 高頻場景用
Object.keys
,簡單直接 - 復(fù)雜場景(如包含 Symbol 或不可枚舉鍵)用
Reflect.ownKeys
兜底 - 遍歷場景注意原型鏈過濾,避免不必要的屬性干擾
通過表格對比和場景化選擇,從此告別「該用哪個方法」的困惑,高效操作對象鍵名!
以上就是JavaScript獲取對象鍵名的五種方法的詳細內(nèi)容,更多關(guān)于JavaScript獲取對象鍵名的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別
這篇文章主要介紹了Jsonp 關(guān)鍵字詳解及json和jsonp的區(qū)別,ajax和jsonp的區(qū)別 的相關(guān)資料,需要的朋友可以參考下2015-12-12前端根據(jù)后端返回的文本流逐個展示文本內(nèi)容代碼示例
前端如何根據(jù)后端返回的文本流逐個展示文本內(nèi)容的實現(xiàn)步驟,前端調(diào)用特定方法來獲取文本流,然后通過處理這些文本流,逐個在界面上展示文本內(nèi)容,需要的朋友可以參考下2025-01-01微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶信息
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶信息,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05HTML+JavaScript實現(xiàn)筋斗云導(dǎo)航欄效果
這篇文章主要為大家介紹了如何利用HTML+JavaScript+CSS實現(xiàn)筋斗云導(dǎo)航欄效果,當鼠標經(jīng)過某個li,筋斗云跟著到當前的位置,感興趣的小伙伴可以試一試2022-03-03JavaScript模擬實現(xiàn)加入購物車飛入動畫效果
這篇文章主要為大家詳細介紹了如何使用JavaScript模擬實現(xiàn)加入購物車飛入動畫效果,文中的示例代碼講解詳細,有需要的小伙伴可以參考下2024-03-03