JavaScript中Object.keys、Object.getOwnPropertyNames區別

定義

Object.keys

定義：返回一個對象可枚舉屬性的字符串數組；

Object.getOwnPropertyNames

定義：返回一個對象可枚舉、不可枚舉屬性的名稱；

 

屬性的可枚舉性、不可枚舉性

定義：可枚舉屬性是指那些內部 “可枚舉” 標志設置為 true 的屬性，對於通過直接的賦值和屬性初始化的屬性，該標識值默認為即為 true，對於通過 Object.defineProperty 等定義的屬性，該標識值默認為 false。

 

例子

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", writable: false });
console.log(Object.keys(obj).length);           //output：1
console.log(Object.getOwnPropertyNames(obj).length);    //output：2

console.log(Object.keys(obj));           //output：Array[1] => [0: "prop1"]
console.log(Object.getOwnPropertyNames(obj));    //output：Array[2] => [0: "prop1", 1: "prop2"]

 

內置的判斷，訪問和迭代方法

功能	可枚舉	可枚舉、不可枚舉
判斷	propertyIsEnumerable	in/hasOwnProperty
訪問	Object.keys	Object.getOwnPropertyNames
迭代	for..in..	Object.getOwnPropertyNames

 

 

 

 

 

 

 

 

實戰

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", writable: true });

console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true

console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false

console.log('prop1' in obj);    //output: true
console.log('prop2' in obj);    //output: true

for (var item in obj) {
    console.log(item);
}
//output：prop1

for (var item in Object.getOwnPropertyNames(obj)) {
    console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]

 

相關鏈接

Object.hasOwnProperty()
Object.propertyIsEnumerable()
Object.getOwnPropertyNames()
Object.keys()

屬性的可枚舉性和所有權