如何在JavaScript 中循環(huán)對(duì)象屬性和值？它與數(shù)組不同，它們沒(méi)有內(nèi)置的循環(huán)方法。在這篇博文中，我將向您展示：循環(huán) JavaScript 對(duì)象的四種不同方法 ，每種方法的優(yōu)點(diǎn)和缺點(diǎn)。

循環(huán)對(duì)象鍵

JavaScript 對(duì)象鍵或?qū)傩允谴鎯?chǔ)在對(duì)象中的值的名稱或標(biāo)識(shí)符。JavaScript 對(duì)象是JavaScript 中的非原始數(shù)據(jù)類型之一。它們可以是字符串、符號(hào)或數(shù)字，用于訪問(wèn)或修改對(duì)象的值。例如，person.name 是一個(gè)返回 person 對(duì)象的名稱值的屬性。

const={
  name:"John",
  age:30,
  favoriteColors:["Red","Green"]
};

我們將在整篇文章中使用同一個(gè)對(duì)象。 

方法 1：JavaScript 使用 Object.keys() 循環(huán)對(duì)象鍵

JavaScript Object.keys()方法返回對(duì)象的所有鍵（或?qū)傩悦Q）的數(shù)組。然后，您可以使用 for 循環(huán)或 forEach() 方法來(lái)迭代數(shù)組并訪問(wèn)鍵。要循環(huán)訪問(wèn) person 對(duì)象的鍵，您可以使用 Object.keys() 靜態(tài)方法，如下所示：

const keys = Object.keys(person); 
// Output: ["name", "age", "favoriteColors"]


// 1. Using a for() loop
for (let i = 0; i < keys.length; i++) {
  console.log(keys[i]);
}
// Output: "name", "age", "favoriteColors"


// 2. Using a forEach() method
keys.forEach(key => {
  console.log(key); 
});
// Output: "name", "age", "favoriteColors"

這種方法的優(yōu)點(diǎn)是：

• 它簡(jiǎn)單易用。
• 它適用于任何對(duì)象，無(wú)論其結(jié)構(gòu)或復(fù)雜性如何。
• 它與舊版瀏覽器兼容，因?yàn)樗?ECMAScript 5 標(biāo)準(zhǔn)的一部分。

這種方法的缺點(diǎn)是：

• 此方法為您提供對(duì)象自己的鍵。它忽略從原型鏈獲得的密鑰。有時(shí)，這正是您所需要的。其他時(shí)候，您可能也想包含這些鍵。
• 對(duì)象的鍵沒(méi)有固定的順序。這意味著您不能總是期望它們以相同的順序出現(xiàn)。如果您的邏輯取決于按鍵順序，請(qǐng)小心，因?yàn)樗赡懿粫?huì)按您的預(yù)期工作。
• 這段代碼創(chuàng)建了另一個(gè)數(shù)組。這會(huì)減慢您的代碼速度并使用更多內(nèi)存。如果物體很大或有很多部分，情況會(huì)更糟。

方法 2：使用 Object.values() 循環(huán)對(duì)象值

Object.values() 為我們提供了一個(gè)包含對(duì)象所有值的數(shù)組。您可以循環(huán)數(shù)組并輕松獲取值。例如，看看這個(gè) person 對(duì)象。您可以像這樣使用 Object.values() ：

// Output: ["John", 40, ["Red", "Green"]]


// 1. Using a for() loop
for (let index = 0; index < values.length; index++) {
  console.log(values[index]);
}
// Output: ["John", 40, ["Red", "Green"]


// 2. Using a forEach() method
values.forEach(key => {
  
});
// Output: ["John", 40, ["Red", "Green"]

這種方法的優(yōu)點(diǎn)是：

• 它簡(jiǎn)單易用。
• 它適用于任何對(duì)象，無(wú)論其結(jié)構(gòu)或復(fù)雜性如何。
• 它是 ECMAScript 2017 標(biāo)準(zhǔn)的一部分，這意味著它是一項(xiàng)現(xiàn)代且受到廣泛支持的功能。

這種方法的缺點(diǎn)是：

• 它只返回對(duì)象本身的值。這意味著它不包括從對(duì)象原型鏈繼承的值。這可能是也可能不是您想要的，具體取決于您的用例。
• Object.values() 不關(guān)心值的順序，因?yàn)閷?duì)象沒(méi)有排序。如果您的代碼依賴于順序，這可能會(huì)成為問(wèn)題。 
• 這是一個(gè)新功能，因此一些舊瀏覽器不支持它。在這些情況下，您可能需要使用一些技巧才能使其發(fā)揮作用。
• Object.values() 使用值創(chuàng)建一個(gè)新數(shù)組，這會(huì)影響代碼使用的速度和內(nèi)存量。如果您的對(duì)象很大或很復(fù)雜，這可能是一個(gè)問(wèn)題。

方法 3：使用 Object.entries() 循環(huán)對(duì)象條目

你想獲取一個(gè)對(duì)象的鍵值對(duì)嗎？你可以使用Object.entries()！它為您提供了一個(gè)數(shù)組數(shù)組，其中每個(gè)子數(shù)組都有一個(gè)鍵和一個(gè)值。然后，您可以使用 for 或 forEach 循環(huán)數(shù)組，并根據(jù)需要使用條目。 

例如，使用與之前相同的 person 對(duì)象，您可以使用 Object.entries() 方法，如下所示：

// 1. Using a for() loop
for (let index = 0; index < entries.length; index++) {
  
}
// Output: ["name", "John"], ["age", 30], ["favoriteColors", ["Red", "Green"]]


// 2. Using a forEach() method
entries.forEach(entry => {
  
});
// Output: ["name", "John"], ["age", 30], ["favoriteColors", ["Red", "Green"]]

這種方法的優(yōu)點(diǎn)是：

• 它簡(jiǎn)單易用。
• 它適用于任何對(duì)象，無(wú)論其結(jié)構(gòu)或復(fù)雜性如何。
• 它是 ECMAScript 2017 標(biāo)準(zhǔn)的一部分，這意味著它是一項(xiàng)現(xiàn)代且受到廣泛支持的功能。
• 它返回對(duì)象的鍵和值，如果您需要在邏輯中訪問(wèn)這兩個(gè)鍵和值，這會(huì)很有用。

這種方法的缺點(diǎn)是：

• 它只返回對(duì)象自己的條目，這意味著它不包括從對(duì)象原型鏈繼承的條目。這可能是也可能不是您想要的，具體取決于您的用例。
• 它不保證條目的順序，因?yàn)閷?duì)象本質(zhì)上是無(wú)序的。如果您的邏輯依賴于條目的順序，這可能會(huì)導(dǎo)致一些問(wèn)題。
• 它會(huì)創(chuàng)建一個(gè)額外的數(shù)組，這可能會(huì)影響代碼的性能和內(nèi)存使用情況，特別是在對(duì)象很大或嵌套的情況下。
• 它與舊版瀏覽器不兼容，因?yàn)樗且粋€(gè)相對(duì)較新的功能。您可能需要使用 polyfill 或轉(zhuǎn)譯器才能使其在較舊的環(huán)境中工作。

方法 4：JavaScript 使用 for...in 循環(huán)對(duì)象屬性

使用 for...in 循環(huán)，您可以遍歷對(duì)象的所有屬性。它為您提供一個(gè)保存屬性名稱的變量。然后您可以使用帶有點(diǎn)或括號(hào)的變量來(lái)獲取屬性值。

例如，使用與之前相同的 person 對(duì)象，我們可以使用 for...in 語(yǔ)句，如下所示：

const person = {
  name: "John",
  age: 30,
  favoriteColors: ["Red", "Green"]
};


 // Using a for...in statement
for (let key in person) {
  console.log(key);         // Output: "name", "age", "favoriteColors"
  console.log(person[key]); // Output: "John", 30, ["Red", "Green"]
}

這種方法的優(yōu)點(diǎn)是：

• 它簡(jiǎn)單易用。
• 它不會(huì)創(chuàng)建額外的數(shù)組，這可能會(huì)提高代碼的性能和內(nèi)存使用率，特別是在對(duì)象很大或嵌套的情況下。
• 它返回對(duì)象的鍵和值，如果您需要在邏輯中訪問(wèn)這兩個(gè)鍵和值，這會(huì)很有用。

這種方法的缺點(diǎn)是：

• 它返回對(duì)象的所有可枚舉屬性，這意味著它包括從對(duì)象原型鏈繼承的屬性。這可能是也可能不是您想要的，具體取決于您的用例。如果只想循環(huán)對(duì)象自身的屬性，則需要使用 hasOwnProperty() 方法過(guò)濾掉繼承的屬性。
• 它不保證屬性的順序，因?yàn)閷?duì)象本質(zhì)上是無(wú)序的。如果您的邏輯依賴于屬性的順序，這可能會(huì)導(dǎo)致一些問(wèn)題。
• 它與 JavaScript 的一些新功能不兼容，例如 Symbol 屬性或 Object.defineProperty()。這些功能可以創(chuàng)建 for…in 語(yǔ)句不可見(jiàn)的不可枚舉屬性。

不同循環(huán)對(duì)象屬性的比較

這是四種方法的快速比較表：

在 JavaScript 中循環(huán)對(duì)象的最佳方法取決于您想要實(shí)現(xiàn)的目標(biāo)以及您想要如何編寫(xiě)代碼。但是，一般的經(jīng)驗(yàn)法則是，如果要訪問(wèn)對(duì)象的鍵、值或條目，則使用 Object 方法；如果要訪問(wèn)對(duì)象的屬性及其原型鏈，則使用 for...in 語(yǔ)句。