前言

大家好呀！今天我們來(lái)聊一聊如何在 JavaScript 中遍歷一個(gè)對(duì)象。對(duì)象在 JavaScript 中是一個(gè)非常常見(jiàn)的數(shù)據(jù)類型，經(jīng)常用來(lái)存儲(chǔ)各種各樣的信息。如何從中提取數(shù)據(jù)，或者對(duì)每一個(gè)屬性進(jìn)行操作呢？下面我們一起來(lái)看看5種常用的遍歷對(duì)象的方式吧！

1. for...in 循環(huán) 

for...in 是 JavaScript 最常用的一種遍歷對(duì)象屬性的方式。它會(huì)遍歷對(duì)象所有可枚舉的屬性，包括繼承的屬性。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

for (let key in person) {
  console.log(key, ": ", person[key]);
}

輸出：

name : Alice
age : 25
job : Engineer

這里需要注意的是，for...in 會(huì)遍歷對(duì)象的所有屬性（包括繼承來(lái)的屬性）。如果不希望遍歷繼承的屬性，我們可以加個(gè)判斷：

if (person.hasOwnProperty(key)) {
  // 只遍歷 person 自己的屬性
}

2. Object.keys() + forEach() 組合 

如果我們只對(duì)對(duì)象的“自有屬性”感興趣，可以使用 Object.keys() 來(lái)獲取所有的鍵（屬性名），然后配合 forEach() 來(lái)遍歷。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

Object.keys(person).forEach(key => {
  console.log(key, ": ", person[key]);
});

輸出：

name : Alice
age : 25
job : Engineer

Object.keys() 會(huì)返回對(duì)象的鍵名數(shù)組，而 forEach() 是數(shù)組的方法，所以可以用它來(lái)方便地遍歷每個(gè)鍵。

3. Object.values() + forEach() 組合 

如果你只關(guān)心對(duì)象的值，可以用 Object.values()。這個(gè)方法會(huì)返回一個(gè)數(shù)組，數(shù)組里包含對(duì)象的所有值。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

Object.values(person).forEach(value => {
  console.log(value);
});

輸出：

Alice
25
Engineer

4. Object.entries() + forEach() 組合 

Object.entries() 會(huì)返回一個(gè)包含對(duì)象鍵值對(duì)的二維數(shù)組。你可以通過(guò)這種方式既得到屬性名，又能得到屬性值，特別適合需要同時(shí)操作鍵和值的場(chǎng)景。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

Object.entries(person).forEach(([key, value]) => {
  console.log(key, ": ", value);
});

輸出：

name : Alice
age : 25
job : Engineer

這里 Object.entries(person) 會(huì)返回 [["name", "Alice"], ["age", 25], ["job", "Engineer"]]，然后我們可以用解構(gòu)語(yǔ)法（[key, value]）來(lái)方便地訪問(wèn)鍵和值。

5. for...of + Object.entries() 組合 

for...of 循環(huán)是對(duì)數(shù)組的遍歷非常友好的一種方法。如果你使用 Object.entries() 得到的是一個(gè)二維數(shù)組，我們可以用 for...of 來(lái)遍歷它。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

for (const [key, value] of Object.entries(person)) {
  console.log(key, ": ", value);
}

輸出：

name : Alice
age : 25
job : Engineer

for...of 循環(huán)會(huì)讓代碼更簡(jiǎn)潔，也能夠更直觀地處理鍵值對(duì)。

總結(jié) 

• for...in：遍歷對(duì)象的所有屬性，包括繼承的屬性，但可以通過(guò) hasOwnProperty 排除繼承的屬性。
• Object.keys()：獲取對(duì)象的鍵名數(shù)組，結(jié)合 forEach() 遍歷。
• Object.values()：獲取對(duì)象的值數(shù)組，結(jié)合 forEach() 遍歷。
• Object.entries()：獲取對(duì)象的鍵值對(duì)數(shù)組，結(jié)合 forEach() 或 for...of 遍歷。

每種方法都有其特定的使用場(chǎng)景哦！你可以根據(jù)具體的需求來(lái)選擇最適合的方式。希望這篇文章能幫助你更好地掌握 JavaScript 中的對(duì)象遍歷！??

到此這篇關(guān)于JavaScript遍歷對(duì)象的五種常用方式的文章就介紹到這了,更多相關(guān)JS遍歷對(duì)象五種方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論