免費AI編程助手
詳解forin，Object.keys和Object.getOwnPropertyNames的區(qū)別
以前筆者一直搞不太清楚三者之間的區(qū)別，最近再看這塊的內(nèi)容，順便理清一下思路。
本文將用一個例子說明三者之間的區(qū)別，如果你還不知道這些方法，那么不放看一下這篇文章。
前言
這三個方法，都可以用來遍歷對象，這非常有用，其中后兩個都是es5中新增的方法。
本文會用到一些es5的對象知識，如果你不了解，可以看一下開頭提到的文章，首先我們需要一個父對象。
var parent = Object.create(Object.prototype, {
a: {
value: 1,
writable: true,
enumerable: true,
configurable: true
}
});
parent繼承自O(shè)bject.prototype，有一個可枚舉的屬性a。下面我們在創(chuàng)建一個繼承自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有兩個屬性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了。
如果你想在老舊瀏覽器中也是用這些方法，那試試es5shim吧。
相關(guān)資料
掃描二維碼
下載編程獅App
編程獅公眾號
更多建議：