使用JavaScript迭代對象鍵的方法

自定義對象無法使用 for…of 循環(huán)進(jìn)行迭代。此外，您不能使用 map() 和 forEach() 等迭代器方法。如果這樣做，您將在每個(gè)實(shí)例中收到 TypeError 。

相反，請使用?for…in 來迭代對象。此方法迭代對象的所有可枚舉、非符號屬性。

在下面的示例中，我們使用它來迭代 obj 的所有三個(gè)屬性，并且對于每個(gè)屬性，我們記錄一個(gè)由屬性名稱（即其鍵）及其相應(yīng)值組成的字符串。

var obj = {a: 1, b: 2, c: 3};  for (const prop in obj) {   console.log(`obj.${prop} = ${obj[prop]}`); }  // Output: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3" 

我們使用變量 prop 初始化循環(huán)，該變量將在對象屬性的每次迭代中保存不同的屬性名稱（也稱為鍵）。塊中指定的代碼將在每次迭代時(shí)運(yùn)行。

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

這里有一個(gè)小演示來演示這一點(diǎn)（單擊結(jié)果查看輸出）：

在循環(huán)內(nèi)，每次迭代時(shí)，我們都會將對象的屬性名稱和值之一記錄到控制臺。

迭代對象屬性的另一種方法是將對象傳遞到 Object.entries() 中并調(diào)用該方法。這將返回多維數(shù)組（數(shù)組的數(shù)組）內(nèi)該對象的所有可枚舉屬性：

const obj = {a: 1, b: 2, c: 3};  let result = Object.entries(obj)  console.log(result) // [["a", 1], ["b", 2], ["c", 3]] 

然后我們可以使用任何數(shù)組迭代器方法循環(huán)它：

Object.entries(obj).forEach(entry => {   // do something })  Object.entries(obj).map(entry => {   // do something })  Object.entries(obj).every(entry => {   // do something })   

您還可以使用 for…of 循環(huán)：

for (const entry of Object.entries(obj)) {   // do something }  for (const [key, value] of Object.entries(obj)) {   // do something } 

以下是一些演示：

在這里，因?yàn)槲覀冊诿看蔚械玫揭粋€(gè)由鍵和值組成的數(shù)組，所以我們只需分別使用 entry[0] 和 entry[1] 來訪問它們。如果您只需要鍵而不是鍵和值，請使用 Object.keys() 代替 Object.entries()。

for…of 基本相同：

結(jié)論

這些是我們可以在 JavaScript 中輕松迭代對象的屬性和鍵的方法。查看我們的 JavaScript 帖子以獲取更多文章和教程。