如何循環和枚舉 JavaScript 對象屬性
簡介
在編寫 JavaScript 代碼時，您可能需要遍歷 JavaScript 對象並枚舉它們的字段/值。不幸的是，JavaScript 對象不可迭代 像數組或字符串，所以我們不能 只需使用 map() 循環一個對象 , forEach() 或 for…of 循環。
假設我們有一個包含用戶詳細信息的對象：
let user = { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" };
如果我們嘗試循環遍歷，就像我們對其他可迭代數組（如數組）所做的那樣，會等待多彩的錯誤消息：
user.map(detail => {
console.log(detail);
}) // TypeError: user.map is not a function
// Or
user.forEach(detail => {
console.log(detail);
}) // TypeError: user.forEach is not a function
// Or
for (let detail of user) {
console.log(detail);
} // TypeError: user is not iterable
使用 for...in 循環和枚舉對象 循環
在引入 ES6 之前，在 JavaScript 中循環對象的唯一方法是通過使用 for...in 來獲取鍵值。 環形。所有現代和舊瀏覽器都支持此方法，並且效果很好。
假設我們有一個 user 對象：
const user = {
firstName: "John",
lastName: "Doe",
email: "[email protected]",
age: 37,
hobby: "Singing"
};
為了迭代和枚舉值，我們可以遍歷每個 key 在用戶中，跟踪一個索引：
var index = 0;
for (const key in user) {
if (user.hasOwnProperty(key)) {
console.log(`Index: ${index}, ${key}: ${user[key]}`);
index++;
}
}
這導致：
Index: 0, firstName: John
Index: 1, lastName: Doe
Index: 2, email: [email protected]
Index: 3, age: 37
Index: 4, hobby: Singing
for...in 循環效果很好，但它有一個缺陷，就是它會遍歷 Prototype 鏈中的屬性 , 除了 user 之外還有很多其他的屬性 的。使用 for...in 遍歷對象時 循環，你必須檢查屬性是否屬於使用 hasOwnProperty() 的對象 ，如上例所示。這既是低效的，因為執行的循環比需要的多，並且使代碼的可讀性降低。
其次，有時您可能需要更多的靈活性，這是數組提供的。現在讓我們考慮一種更好的方法，它的語法要好得多，而且技術性要少。
循環和枚舉 JavaScript 對象的對象靜態方法
在本節中，我們將介紹三種對象靜態方法，用於將對象屬性轉換為數組 .一旦轉換為數組 - 我們在循環數組和枚舉它們方面有更大的靈活性和效率！
Object.keys()Object.values()Object.entries()
注意： 對象具有屬性，即鍵值對。對像中的每個屬性都有一個名稱（也稱為 key ) 和相應的值（也稱為 value ）。你可以提取keys() 和 values() 單獨，或 entries() ，它們是鍵值對，具體取決於您要枚舉的屬性。
使用 Object.keys() 循環和枚舉對象鍵
Object.keys() 方法是在 ES6 中添加的，以使循環對象更容易。它生成一個數組，其元素是包含名稱（鍵）的字符串 對象的屬性。該對像作為參數傳遞給 Object.keys() .之後，您可以遍歷數組並使用任何數組循環方法檢索每個屬性的值，例如 forEach() , map() 等。
Object.keys(objectName);
例如，假設我們有一個對像是用戶在各個科目中的得分：
const userScores = {
chemistry: 60,
mathematics: 70,
physics: 80,
english: 98
};
我們可以遍歷對象並獲取鍵，在這個例子中就是主題：
const names = Object.keys(userScores);
console.log(names); // ["chemistry","mathematics","physics","english"]
你會注意到這返回了一個數組，我們現在可以使用任何數組方法來檢索數據：
names.forEach((key, index) => {
console.log(`${index}: ${key}`);
});
這導致：
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
0: chemistry
1: mathematics
2: physics
3: english
值得注意的是，您可以也 使用此表示法獲取值 - 通過提供 key 到對象：
names.forEach((key, index) => {
console.log(`${index} - Key: ${key}, Value: ${userScores[key]}`);
});
0 - Key: chemistry, Value: 60
1 - Key: mathematics, Value: 70
2 - Key: physics, Value: 80
3 - Key: english, Value: 98
使用 Object.values() 循環並枚舉對象值
Object.values() 方法類似於 Object.keys() 因為它提取值 對象的屬性，並在 ES8 中引入。然後可以使用任何數組循環方法自然循環返回的數組。
Object.values(objectName);
使用相同的對象：
const userScores = {
chemistry: 60,
mathematics: 70,
physics: 80,
english: 98
};
這些值很容易通過以下方式獲得：
const values = Object.values(userScores);
console.log(values); // [60,70,80,98]
同樣，我們可以輕鬆地遍歷這個數組，為每個值分配一個索引：
values.forEach((value, index) => {
console.log(`Index: ${index}, Value: ${value}`);
});
這導致：
Index: 0, Value: 60
Index: 1, Value: 70
Index: 2, Value: 80
Index: 3, Value: 98
使用 Object.entries() 循環和枚舉對象屬性
Object.entries() 方法是 Object.key() 的混合體 和 Object.values() 方法，生成一個數組數組 每個內部數組中有兩個元素 - 第一個元素是屬性，第二個元素是值。這是另一種 ES8 方法：
Object.entries(objectName);
現在，讓我們像以前一樣重用同一個對象：
const userScores = {
chemistry: 60,
mathematics: 70,
physics: 80,
english: 98
};
我們可以遍歷對象並獲取鍵和值
const data = Object.entries(userScores);
console.log(data);
// Output:
// [
// [ "chemistry", 60 ]
// [ "mathematics", 70 ]
// [ "physics", 80 ]
// [ "english", 98 ]
// ]
返回類型可以打包成 [key, value] 結果每個，我們仍然可以輕鬆地跟踪索引：
data.forEach(([key, value], index) => {
console.log(`Index: ${index} | I scored ${value} in my ${key} subject!`)
})
這導致：
Index: 0 | I scored 60 in my chemistry subject!
Index: 1 | I scored 70 in my mathematics subject!
Index: 2 | I scored 80 in my physics subject!
Index: 3 | I scored 98 in my english subject!
這種方法可以容納更多的操作和計算，因為我們可以同時訪問鍵和值。
結論
在本指南中，我們了解瞭如何遍歷對象並枚舉其屬性。我們從簡單的 for...in 開始 循環，注意到它的局限性。然後，我們使用靜態 Object 開始循環和枚舉值、鍵以及值和鍵對 方法，在 ES6 和 ES8 中添加。
