在 JavaScript 中，對象（Object）作為核心數(shù)據(jù)類型之一，存儲著大量的鍵值對數(shù)據(jù)。日常開發(fā)中，我們經(jīng)常需要遍歷對象的屬性、獲取鍵名或?qū)傩灾?，?JS 提供了多種相關方法來滿足不同的遍歷需求。

一、先明確一個核心概念

在學習具體方法前，我們先厘清一個關鍵概念，這是理解不同方法差異的基礎：

對象的屬性鍵類型：對象的屬性鍵有兩種合法類型——「字符串」和「Symbol 類型」。

• 普通屬性名（如 name、age）本質(zhì)上都是字符串；
• Symbol 類型的鍵用于創(chuàng)建唯一屬性，避免命名沖突，無法通過普通方式訪問。

另外，本文所有方法均只針對對象自身的屬性（不包括繼承自原型鏈的屬性），這也是它們的共性之一。

二、6 種對象屬性操作方法詳解

1.Object.keys(obj)：獲取普通字符串鍵名數(shù)組

核心功能：返回對象自身所有普通字符串類型的屬性名數(shù)組，數(shù)組元素為字符串格式的鍵名（日常開發(fā)中絕大多數(shù)屬性都屬于這類）。

代碼示例

// 普通字面量對象
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"]（僅返回普通字符串鍵）

適用場景：日常開發(fā)中，僅需遍歷對象的普通屬性（如接口返回的業(yè)務數(shù)據(jù)對象、自定義字面量對象），獲取鍵名時優(yōu)先使用。

2.Object.values(obj)：獲取普通字符串鍵對應的值數(shù)組

核心功能：返回對象自身所有普通字符串類型屬性對應的屬性值數(shù)組，數(shù)組元素的類型與屬性值類型一致。

代碼示例

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)); // ["李四"]

適用場景：僅需要獲取對象的屬性值，無需關注鍵名時（如提取對象中的所有數(shù)據(jù)值進行匯總、篩選、去重等操作）。

3.Object.entries(obj)：獲取普通鍵值對二維數(shù)組

核心功能：返回對象自身所有普通字符串類型屬性的鍵值對二維數(shù)組，每個子數(shù)組的格式為 [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：轉(zhuǎn)換為 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", "李四"]]

適用場景

• 需要同時獲取鍵名和屬性值，進行遍歷處理；
• 將普通對象轉(zhuǎn)換為 Map 結構（Map 支持以任意類型為鍵，比普通對象更靈活）。

4.Object.getOwnPropertyNames(obj)：獲取所有普通字符串鍵名

核心功能：返回對象自身所有普通字符串類型的屬性名數(shù)組，覆蓋所有常規(guī)字符串鍵，與 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"]

// 數(shù)組對象示例（數(shù)組的索引和 length 都是字符串鍵）
const arr = [1, 2, 3];
console.log(Object.getOwnPropertyNames(arr)); // ["0", "1", "2", "length"]

適用場景：日常開發(fā)中，與 Object.keys 可互換使用；在操作內(nèi)置對象（如 Array、Date）時，獲取其所有字符串類型屬性鍵名（如數(shù)組的 length 屬性）。

5.Object.getOwnPropertySymbols(obj)：獲取所有 Symbol 類型屬性

核心功能：專門返回對象自身所有Symbol 類型的屬性鍵名數(shù)組，僅處理 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 類型屬性（通常用于創(chuàng)建對象的唯一屬性、避免屬性名沖突，比如第三方庫的內(nèi)部屬性定義）。

6.Reflect.ownKeys(obj)：獲取所有屬性鍵名（全能型）

核心功能：返回對象自身所有的屬性鍵名數(shù)組，既包括普通字符串鍵，也包括 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 鍵的復雜對象時。

三、核心總結對比表

為了更清晰地梳理各方法的差異，我們整理了詳細對比表，方便快速查閱：

四、實戰(zhàn)選型建議

1.日常普通遍歷（僅處理常規(guī)對象）：

• 只需鍵名 → Object.keys
• 只需值 → Object.values
• 需鍵值對 → Object.entries（推薦，靈活性最高，覆蓋 90% 以上場景）

2.僅處理 Symbol 類型屬性：Object.getOwnPropertySymbols

3.需要完整獲取所有屬性（無遺漏，含 Symbol 鍵）：Reflect.ownKeys（全能型，適合復雜場景）

4.操作內(nèi)置對象（如 Array、Date）：Object.getOwnPropertyNames

五、常見誤區(qū)提醒

• 所有方法均不返回原型鏈上的屬性：如果需要遍歷原型鏈上的屬性，需結合 for...in 循環(huán)。
• Object.values 和 Object.entries 不支持 Symbol 鍵：Symbol 鍵的屬性不會被這兩個方法返回，需使用 Object.getOwnPropertySymbols 單獨處理。
• Symbol 鍵無法通過普通方式訪問：必須通過對應的 Symbol 變量才能訪問（如 user[sym1]），無法直接通過 user.sym1 或 user['sym1'] 訪問。

到此這篇關于JavaScript對象屬性遍歷的6種常用方法詳解與對比的文章就介紹到這了,更多相關JavaScript對象屬性遍歷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論