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