用for...in 和Object.keys()列舉物件屬性的差異

摘要： 用for...in迴圈和Object.keys方法都可以獲取物件的屬性，那麼它們有什麼區別呢？假設有一個物件a: var a = {x: 1, y: 2}; Object.defineProperty(a, 'z', {value: 3}); // 定義不可列舉屬性z va...

用for...in迴圈和Object.keys方法都可以獲取物件的屬性，那麼它們有什麼區別呢？假設有一個物件a:

var a = {x: 1, y: 2};
Object.defineProperty(a, 'z', {value: 3}); // 定義不可列舉屬性z
var keys = [];
for (var key in a) {
keys.push(key);
}
console.log(keys);
console.log(Object.keys(a));

程式的輸出結果為：

兩種方式都獲取到了物件的所有可列舉屬性，而對於不可列舉屬性兩種方式都無法得到。

下面頂一個物件b, 並且b作為物件a的原型物件：

var b = {bx: 1, by: 2};
Object.defineProperty(b, 'bz', {value: 3});
Object.setPrototypeOf(a, b);

在此用上面的方式輸出a的key值，得到結果如下：

從輸出的結果中不難看出，for...in迴圈可以遍歷物件的所有可列舉屬性，包括原型物件中的屬性，而通過Object.keys只能獲取到物件可列舉的自有屬性，所以如果想通過for...in獲取物件的自有屬性，可通過hasOwnProperty方法對結果進行過濾：

var keys = [];
for (var key in a) {
if (a.hasOwnProperty(key)) {
keys.push(key);
}
}

也可以通過Object.getOwnPropertyNames獲取物件的自有屬性。

從上面的輸出結果中可知getOwnPropertyNames方法輸出的結果中還包含了物件的不可列舉屬性，可以通過Object.propertyIsEnumerable來判斷屬性是否可列舉從而對結果進行過濾：