前言

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

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

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

例子：

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 會遍歷對象的所有屬性（包括繼承來的屬性）。如果不希望遍歷繼承的屬性，我們可以加個(gè)判斷：

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

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

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

例子：

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() 會返回對象的鍵名數(shù)組，而 forEach() 是數(shù)組的方法，所以可以用它來方便地遍歷每個(gè)鍵。

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

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

例子：

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() 會返回一個(gè)包含對象鍵值對的二維數(shù)組。你可以通過這種方式既得到屬性名，又能得到屬性值，特別適合需要同時(shí)操作鍵和值的場景。

例子：

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) 會返回 [["name", "Alice"], ["age", 25], ["job", "Engineer"]]，然后我們可以用解構(gòu)語法（[key, value]）來方便地訪問鍵和值。

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

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

例子：

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)會讓代碼更簡潔，也能夠更直觀地處理鍵值對。

總結(jié) 

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

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

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

最新評論