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