ES6之前,循環(huán)對(duì)象常見做法是使用:
for...in
俘闯。但是for...in
循環(huán)的問題在于它會(huì)遍歷原型鏈中的屬性,所以需要使用hasOwnProperty
執(zhí)行檢查屬性是否屬于該對(duì)象。
ES6之后,我們對(duì)于對(duì)象的循環(huán)有了更好的辦法:Object.keys
,Object.values
,Object.entries
Object.keys :創(chuàng)建一個(gè)包含對(duì)象所有屬性的數(shù)組
const fruits ={
appple:22,
pear:34,
orange:88
}
var keys = Object.keys(fruits);
console.log(keys); //["appple", "pear", "orange"]
Object.values:創(chuàng)建一個(gè)數(shù)組奔垦,其中包含對(duì)象中每個(gè)屬性的值
const fruits ={
appple:22,
pear:34,
orange:88
}
var values =Object.values(fruits);
console.log(values); //[22, 34, 88]
Object.entries:創(chuàng)建了一個(gè)二維數(shù)組,每個(gè)內(nèi)部數(shù)組都有2個(gè)元素仑嗅,第一個(gè)元素是屬性名宴倍,第二個(gè)屬性值
const fruits ={
appple:22,
pear:34,
orange:88
}
var entries = Object.entries(fruits);
console.log(entries);
Object.entries.png
使用Object.entries的時(shí)候,需要將其內(nèi)部數(shù)組解構(gòu)為其鍵和屬性值
const fruits ={
appple:22,
pear:34,
orange:88
}
for (const [fruit,num] of entries) {
console.log(`we have ${num} ${fruit}`); //we have 22 appple ...
}