|
|
|
|
|
|
【示例】3種方法迭代遍歷JavaScript對象屬性和值
作者:admin 時間:2022-6-10 16:11:5 瀏覽:JavaScript迭代遍歷對象屬性和值非常常見常用，在本文中，我將介紹3種常用的方法，來達到我們的目的。每種方法都有細微的差別，因此我將為每種方法提供詳細的解釋和示例。
1、使用Object.entries（對象條目）
我將介紹的第一個方法是Object.entries。此方法返回對象的字符串鍵值對數組。有幾種Object.entries的使用方法。
使用forEach方法迭代
使用forEach方法，我們可以單獨訪問每個entry。請注意，entry會進行解構，entry[0]是鍵，而entry[1]是對應的值。
const obj = {
'key1': 'value1',
'key2': 'value2'
}
Object.entries(obj).forEach(entry => {
let [key, value] = entry;
console.log(key, value);
})
// output
key1 value1
key2 value2使用for...of迭代
除了上面的forEach，我們還可以使用 for...of 解構entry，循環定義中的每一個。
const obj = {
'key1': 'value1',
'key2': 'value2'
}
for (let [key, value] of Object.entries(obj)) {
console.log(key, value);
}
// output
key1 value1
key2 value2forEach和for都起到迭代數組的作用，但它們的作用不盡相同，參考forEach和for不同的功能表現 。
我應該什么時候使用Object.entries？
從上面的例子可以看出，Object.entries最有價值的特性是你可以同時訪問 key 和 value。因此，當你知道要對對象的屬性（鍵）和相應的值進行操作時，這是一種理想的方法。
2、使用Object.keys（對象鍵）
Object.keys返回對象的可枚舉屬性名稱的數組。
可枚舉屬性是“通過簡單賦值或通過屬性初始化器”設置的屬性。JavaScript如何檢查一個屬性是否可枚舉。由于 JavaScript 對象有很多額外的屬性（例如constructor, __proto__），我們不想在對我們的對象進行操作時包含這些類型的屬性。當然，它們可以直接訪問，但在迭代屬性時不會包含在內。
用法很簡單，看下面的例子：
const obj = {
name: 'Levi Coffin',
birthdate: '10/28/1798',
city: 'Newport',
state: 'Indiana'
};
Object.keys(obj) // => [ 'name', 'birthdate', 'city', 'state' ]要遍歷對象的屬性，我們可以使用forEach：
Object.keys(obj).forEach(key => {
console.log(key);
});或者for...of：
for (let key of Object.keys(obj)) {
console.log(key);
}而要得到對應的值，我們可以使用key進行參考：
for (let key of Object.keys(obj)) {
let value = obj[key];
console.log(key, value);
}我應該什么時候使用Object.keys？
當你只對對象的鍵（屬性名）感興趣時，你應該使用它。如果你也對這些值感興趣，那么Object.entries可能是正確的工具。
3、使用Object.values（對象值）
Object.values是Object.keys的對應物，并返回對象的可枚舉屬性值的數組。
同樣，我們可以迭代使用forEach：
Object.values(obj).forEach(value => {
console.log(value);
});或者for...of：
for (let value of Object.values(obj)) {
console.log(value);
}我應該什么時候使用Object.values？
同樣，就像它的對應物一樣，你應該在只對對象的值感興趣時使用Object.values。
使用與上面相同的示例：
const nameAgeMap = {
'Tom': 30,
'Susan': 28,
'Rob': 35,
'Claire': 22
};我們可以很容易地得到對應的值列表：
Object.values(nameAgeMap) // => [ 30, 28, 35, 22 ]
總結
本文通過多個示例，詳細介紹了迭代遍歷JavaScript對象屬性和值的幾種方法。通過本文的學習，我們應該了解這幾種方法各自的優點，在使用時選擇合適的方法。
相關文章
