詳解forin，Object.keys和Object.getOwnPropertyNames的區(qū)別
以前筆者一直搞不太清楚三者之間的區(qū)別，最近再看這塊的內(nèi)容，順便理清一下思路。
本文將用一個(gè)例子說明三者之間的區(qū)別，如果你還不知道這些方法，那么不放看一下這篇文章。
前言
這三個(gè)方法，都可以用來遍歷對(duì)象，這非常有用，其中后兩個(gè)都是es5中新增的方法。
本文會(huì)用到一些es5的對(duì)象知識(shí)，如果你不了解，可以看一下開頭提到的文章，首先我們需要一個(gè)父對(duì)象。
var parent = Object.create(Object.prototype, {
a: {
value: 1,
writable: true,
enumerable: true,
configurable: true
}
});
parent繼承自O(shè)bject.prototype，有一個(gè)可枚舉的屬性a。下面我們?cè)趧?chuàng)建一個(gè)繼承自parent的對(duì)象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對(duì)象，來比較四種方法的不同。如下的代碼代表程序的輸出。
console.log('yanhaijing is God');
// > yanhaijing is God
注：⑤代表es5中新增的方法，你可能需要一款現(xiàn)代瀏覽器來訪問。
for in
for in是es3中就存在，最早用來遍歷對(duì)象（集合）的方法。
for (var key in child) {
console.log(key);
}
// > b
// > a
從輸出可以看出，for in會(huì)輸出自身以及原型鏈上可枚舉的屬性。
注意：不同的瀏覽器對(duì)for in屬性輸出的順序可能不同。
如果僅想輸出自身的屬性可以借助 hasOwnProperty。可以過濾掉原型鏈上的屬性。
for (var key in child) {
if (child.hasOwnProperty(key)) {
console.log(key);
}
}
// > b
上面的代碼，僅輸出了child自己的可枚舉屬性b，而沒有輸出原型parent中的屬性。
Object.keys⑤
Object.keys是es5中新增的方法，用來獲取對(duì)象自身可枚舉的屬性鍵。
console.log(Object.keys(child));
// > ["b"]
可以看出Object.keys的效果和for in+hasOwnProperty的效果是一樣的。
Object.getOwnPropertyNames⑤
Object.getOwnPropertyNames也是es5中新增的方法，用來獲取對(duì)象自身的全部屬性名。
console.log(Object.getOwnPropertyNames(child));
// > ["b", "c"]
從輸出可以看出其和Object.keys的區(qū)別。
總結(jié)
相信看完后，搞不清楚的同學(xué)應(yīng)該明白了，在es3中，我們不能定義屬性的枚舉性，所以也不需要那么多方法，有了keys和getOwnPropertyNames后基本就用不到for in了。
如果你想在老舊瀏覽器中也是用這些方法，那試試es5shim吧。
相關(guān)資料
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
更多建議：