在 JavaScript 開發(fā)中，對象（Object）是最常用的數(shù)據(jù)結構之一，幾乎所有業(yè)務場景都會涉及到對象的遍歷——比如獲取對象的所有屬性、篩選符合條件的鍵值對、批量處理對象數(shù)據(jù)等。

但很多新手在面對對象遍歷時，總會困惑：for...in 和 Object.keys() 有什么區(qū)別？什么時候用 Object.values()？如何遍歷對象的原型鏈屬性？

今天這篇文章，就帶你徹底吃透 JS 對象遍歷的所有常用方法，從基礎用法到進階技巧，再到實戰(zhàn)場景對比，幫你避開坑點、靈活運用。

一、先明確：什么是 JS 對象？

在開始遍歷之前，我們先簡單回顧下 JS 對象的基礎——對象是由 鍵（key） 和 值（value） 組成的無序集合，鍵通常是字符串（ES6 后支持 Symbol），值可以是任意數(shù)據(jù)類型（字符串、數(shù)字、函數(shù)、對象等）。

示例對象（后文所有方法均基于此對象演示）：

// 基礎對象
const user = {
  name: "掘金小冊",
  age: 3,
  gender: "male",
  isVip: true,
  hobbies: ["coding", "writing"],
  // 方法
  sayHello: function() {
    console.log("Hello, Juejin!");
  }
};

// 原型鏈上的屬性（用于后續(xù)演示區(qū)別）
Object.prototype.protoProp = "我是原型鏈上的屬性";

二、常用對象遍歷方法（按使用頻率排序）

以下方法是開發(fā)中最常用的，重點掌握前 4 種，基本能覆蓋 90%+ 的業(yè)務場景。

1. for...in 循環(huán)（最基礎，遍歷可枚舉屬性）

for...in 是最早的對象遍歷方法，也是最基礎的方式，它會遍歷對象自身的可枚舉屬性和原型鏈上的可枚舉屬性（這是它的坑點，也是重點注意事項）。

基礎用法

// for...in 遍歷對象
for (let key in user) {
  console.log("鍵：", key); // 輸出對象的鍵
  console.log("值：", user[key]); // 輸出對應的值
}

輸出結果（重點看最后一行）

鍵： name，值： 掘金小冊
鍵： age，值： 3
鍵： gender，值： male
鍵： isVip，值： true
鍵： hobbies，值： [ 'coding', 'writing' ]
鍵： sayHello，值： [Function: sayHello]
鍵： protoProp，值： 我是原型鏈上的屬性

核心注意事項（避坑關鍵）

• 會遍歷原型鏈上的可枚舉屬性（如上面的 protoProp），這通常不是我們想要的，所以一定要搭配 hasOwnProperty() 使用。
• 不能遍歷 Symbol 類型的鍵（后文會講專門遍歷 Symbol 的方法）。

正確用法（搭配 hasOwnProperty）

for (let key in user) {
  // 只遍歷對象自身的屬性，過濾原型鏈屬性
  if (user.hasOwnProperty(key)) {
    console.log("鍵：", key, "值：", user[key]);
  }
}

這樣就不會輸出原型鏈上的 protoProp 了，這是 for...in 的標準用法。

2. Object.keys() + forEach（最常用，遍歷自身可枚舉鍵）

ES5 新增的 Object.keys() 方法，會返回一個包含對象自身可枚舉屬性鍵的數(shù)組（不包含原型鏈屬性，也不包含 Symbol 鍵），再搭配 forEach 循環(huán)，是目前開發(fā)中最常用的遍歷方式。

基礎用法

// 1. 獲取對象自身的所有可枚舉鍵，返回數(shù)組
const keys = Object.keys(user);
console.log(keys); // 輸出：['name', 'age', 'gender', 'isVip', 'hobbies', 'sayHello']

// 2. 搭配 forEach 遍歷
Object.keys(user).forEach(key => {
  console.log("鍵：", key);
  console.log("值：", user[key]);
});

核心優(yōu)勢

• 自動過濾原型鏈屬性，無需手動寫 hasOwnProperty()，更簡潔、更安全。
• 返回的是數(shù)組，可直接使用數(shù)組的方法（如 forEach、map、filter 等），靈活度更高。

實戰(zhàn)場景

篩選對象中值為布爾類型的鍵值對：

const boolProps = {};
Object.keys(user).forEach(key => {
  if (typeof user[key] === "boolean") {
    boolProps[key] = user[key];
  }
});
console.log(boolProps); // 輸出：{ isVip: true }

3. Object.values() + forEach（遍歷自身可枚舉值）

ES2017（ES8）新增的 Object.values() 方法，和 Object.keys() 對應，它會返回一個包含對象自身可枚舉屬性值的數(shù)組（不包含原型鏈屬性、Symbol 鍵對應的值）。

基礎用法

// 獲取對象自身的所有可枚舉值，返回數(shù)組
const values = Object.values(user);
console.log(values); 
// 輸出：['掘金小冊', 3, 'male', true, ['coding', 'writing'], [Function: sayHello]]

// 搭配 forEach 遍歷值
Object.values(user).forEach(value => {
  console.log("值：", value);
});

實戰(zhàn)場景

統(tǒng)計對象中所有數(shù)值類型的值的總和：

const sum = Object.values(user).reduce((total, value) => {
  // 只累加數(shù)值類型的值
  return typeof value === "number" ? total + value : total;
}, 0);
console.log(sum); // 輸出：3

4. Object.entries() + forEach（遍歷自身可枚舉鍵值對）

同樣是 ES2017 新增的方法，Object.entries() 是最靈活的遍歷方法，它會返回一個包含對象自身可枚舉鍵值對的二維數(shù)組（每個子數(shù)組是 [key, value]），完美兼顧鍵和值的獲取。

基礎用法

// 獲取對象自身的所有可枚舉鍵值對，返回二維數(shù)組
const entries = Object.entries(user);
console.log(entries);
// 輸出：[
//   ['name', '掘金小冊'],
//   ['age', 3],
//   ...
// ]

// 搭配 forEach 遍歷鍵值對
Object.entries(user).forEach(([key, value]) => {
  // 解構賦值，直接獲取 key 和 value，更簡潔
  console.log(`鍵：${key}，值：${value}`);
});

實戰(zhàn)場景

將對象轉換為 Map（Map 支持更多靈活操作）：

// Object.entries() 可直接作為 Map 的構造參數(shù)
const userMap = new Map(Object.entries(user));
console.log(userMap.get("name")); // 輸出：掘金小冊

// 遍歷 Map（補充）
userMap.forEach((value, key) => {
  console.log("鍵：", key, "值：", value);
});

5. 進階：遍歷 Symbol 類型的鍵

如果對象的鍵是 Symbol 類型（ES6 新增，用于表示唯一鍵），上面的 4 種方法都無法遍歷到，此時需要使用 Object.getOwnPropertySymbols() 方法。

示例用法

// 定義一個包含 Symbol 鍵的對象
const obj = {
  [Symbol("id")]: 123,
  name: "測試"
};

// 遍歷 Symbol 類型的鍵
Object.getOwnPropertySymbols(obj).forEach(symbolKey => {
  console.log("Symbol 鍵：", symbolKey);
  console.log("對應值：", obj[symbolKey]); // 輸出：123
});

6. 高階：遍歷所有屬性（自身+原型鏈，可枚舉+不可枚舉）

開發(fā)中很少用到，但面試可能會問——如果需要遍歷對象自身的所有屬性（包括不可枚舉），或者原型鏈上的所有屬性，可以使用以下方法：

• Object.getOwnPropertyNames(obj)：返回對象自身的所有屬性鍵（包括不可枚舉，不包括 Symbol）。
• Reflect.ownKeys(obj)：返回對象自身的所有屬性鍵（包括不可枚舉、Symbol 鍵），相當于 Object.keys(obj) + Object.getOwnPropertySymbols(obj) + 不可枚舉鍵。

示例

// 遍歷自身所有屬性（包括不可枚舉）
const allOwnKeys = Object.getOwnPropertyNames(user);
console.log(allOwnKeys); // 包含 sayHello（函數(shù)也是屬性）

// 遍歷自身所有屬性（包括不可枚舉、Symbol）
const allKeys = Reflect.ownKeys(user);
console.log(allKeys);

三、常用方法對比表（一目了然）

四、避坑指南（新手必看）

1. 永遠不要用 for...in 遍歷數(shù)組！雖然數(shù)組也是對象，但 for...in 會遍歷數(shù)組的原型鏈屬性，還會按照“字符串索引”排序，導致遍歷順序錯亂。
2. 使用 for...in 必須搭配 hasOwnProperty()，否則會遍歷到原型鏈上的無關屬性，導致業(yè)務邏輯出錯。
3. Symbol 類型的鍵無法被 Object.keys()、Object.values()、for...in 遍歷，需用專門的 Object.getOwnPropertySymbols()。
4. 對象是無序的！雖然 ES6 后對象的鍵會按照“數(shù)字優(yōu)先、插入順序”排列，但不要依賴對象的遍歷順序來實現(xiàn)業(yè)務邏輯（如需有序，建議用 Map）。

五、實戰(zhàn)案例（綜合運用）

需求：遍歷一個用戶對象，篩選出所有非函數(shù)類型的屬性，將其轉換為查詢字符串（如：name=掘金小冊&age=3）。

const user = {
  name: "掘金小冊",
  age: 3,
  gender: "male",
  isVip: true,
  sayHello: function() {
    console.log("Hello");
  }
};

// 1. 遍歷對象，篩選非函數(shù)屬性
const queryArr = Object.entries(user).filter(([key, value]) => {
  // 排除函數(shù)類型的屬性
  return typeof value !== "function";
}).map(([key, value]) => {
  // 將鍵值對轉換為 "key=value" 格式
  return `${key}=${encodeURIComponent(value)}`;
});

// 2. 拼接為查詢字符串
const queryStr = queryArr.join("&");
console.log(queryStr);
// 輸出：name=掘金小冊&age=3&gender=male&isVip=true

解析：這里結合了 Object.entries()、filter()、map() 方法，既遍歷了鍵值對，又完成了篩選和格式轉換，是開發(fā)中非常典型的場景。

六、總結

JS 對象遍歷的核心是“明確遍歷范圍”——你是要遍歷自身屬性，還是原型鏈屬性？是要鍵、值，還是鍵值對？是包含 Symbol 或不可枚舉屬性？

對于絕大多數(shù)開發(fā)場景：

• 僅需鍵 → 用 Object.keys()
• 僅需值 → 用 Object.values()
• 需鍵值對 → 用 Object.entries()（最常用）
• 兼容舊環(huán)境 → 用 for...in + hasOwnProperty()

到此這篇關于JS 對象遍歷的幾種實現(xiàn)方法的文章就介紹到這了,更多相關JS 對象遍歷內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論