<轉(zhuǎn)>Object.keys與for in,Object.getOwnPropertyNames的區(qū)別

在實(shí)際開發(fā)中,我們有時(shí)需要知道對象的所有屬性,js原生給我們提供了一個(gè)很好的方法:Object.keys,該方法返回一個(gè)數(shù)組,并且只能返回可以枚舉屬性和方法的名稱

Object.getOwnPropertyNames():它會返回可枚舉和不可枚舉的屬性和方法的名稱。

Object.keys():它只會返回可枚舉的屬性和方法的名稱。

但是都不能取到原型鏈上的屬性名稱。

for in可以取到原型鏈上的屬性名稱

這三個(gè)方法,都可以用來遍歷對象,這非常有用,其中后兩個(gè)都是es5中新增的方法。
本文會用到一些es5的對象知識,如果你不了解,可以看一下開頭提到的文章,首先我們需要一個(gè)父對象。
var parent = Object.create(Object.prototype, {
a: {
value: 1,
writable: true,
enumerable: true,
configurable: true
}
});
parent繼承自O(shè)bject.prototype,有一個(gè)可枚舉的屬性a。下面我們在創(chuàng)建一個(gè)繼承自parent的對象child。
var child = Object.create(parent, {
b: {
value: 2,
writable: true,
enumerable: true,
configurable: true
},
c: {
value: 3,
writable: true,
enumerable: false,
configurable: true
}
});
child有兩個(gè)屬性b和c,其中b為可枚舉屬性,c為不可枚舉屬性。
下面我們將用四種方法遍歷child對象,來比較四種方法的不同。如下的代碼代表程序的輸出。
console.log('yanhaijing is God');
// > yanhaijing is God
注:⑤代表es5中新增的方法,你可能需要一款現(xiàn)代瀏覽器來訪問。
for in
for in是es3中就存在,最早用來遍歷對象(集合)的方法。
for (var key in child) {
console.log(key);
}
// > b
// > a
從輸出可以看出,for in會輸出自身以及原型鏈上可枚舉的屬性。
注意:不同的瀏覽器對for in屬性輸出的順序可能不同。
如果僅想輸出自身的屬性可以借助 hasOwnProperty??梢赃^濾掉原型鏈上的屬性。
for (var key in child) {
if (child.hasOwnProperty(key)) {
console.log(key);
}
}
// > b
上面的代碼,僅輸出了child自己的可枚舉屬性b,而沒有輸出原型parent中的屬性。
Object.keys⑤
Object.keys是es5中新增的方法,用來獲取對象自身可枚舉的屬性鍵。
console.log(Object.keys(child));
// > ["b"]
可以看出Object.keys的效果和for in+hasOwnProperty的效果是一樣的。
Object.getOwnPropertyNames⑤
Object.getOwnPropertyNames也是es5中新增的方法,用來獲取對象自身的全部屬性名。
console.log(Object.getOwnPropertyNames(child));
// > ["b", "c"]
從輸出可以看出其和Object.keys的區(qū)別。
總結(jié)
相信看完后,搞不清楚的同學(xué)應(yīng)該明白了,在es3中,我們不能定義屬性的枚舉性,所以也不需要那么多方法,有了keys和getOwnPropertyNames后基本就用不到for in了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,540評論 19 139
  • 1.屬性的簡潔表示法 允許直接寫入變量和函數(shù) 上面代碼表明,ES6 允許在對象之中,直接寫變量。這時(shí),屬性名為變量...
    雨飛飛雨閱讀 1,259評論 0 3
  • 屬性的簡潔表示法 ES6允許直接寫入變量和函數(shù),作為對象的屬性和方法。這樣的書寫更加簡潔。 上面代碼表明,ES6允...
    呼呼哥閱讀 3,010評論 0 2
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 2,675評論 9 22
  • 女兒,媽媽有好多話想跟你說,你知道嗎,這五年以來你帶給我們多少幸福和滿足?從出生到現(xiàn)在你的每一個(gè)第一次都讓我難以忘...
    悅欣悅己悅生活閱讀 448評論 1 0

友情鏈接更多精彩內(nèi)容