[[384915]]

本文轉載自微信公眾號「前端思維框架」，作者水墨寒。轉載本文請聯系前端思維框架公眾號。  

今天在寫一段深拷貝的代碼中，思考一個問題：如何遍歷 JavaScript 中 Object 的 Keys ，碰到了 Reflect.ownKeys(obj)和 Object.keys(obj) 這兩個方法，他倆究竟有什么不同?

我們先看一個例子：

const obj = {a: 5, b: 5}; 
console.log(Reflect.ownKeys(obj)); 
console.log(Object.keys(obj)); 
 
// Result 
// ['a', 'b'] 
// ['a', 'b'] 

貌似也沒什么不一樣，去翻兩個方法的文檔得知：

Object.keys(obj) 返回結果是：一個由給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和正常循環遍歷該對象時返回的順序一致 。

而 Reflect.ownKeys(obj)的返回結果 等價于：

Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target)) 

Object.getOwnPropertyNames() 方法返回一個由指定對象的所有自身屬性的屬性名(包括不可枚舉屬性但不包括Symbol值作為名稱的屬性)組成的數組。

Object.getOwnPropertySymbols() 方法返回一個給定對象自身的所有 Symbol 屬性的數組。

Reflect.ownKeys(obj) 等于把 給定的對象所有屬性以數組的方式返回。

我們通過下面代碼來看兩者差別：

var testObject = {[Symbol('1')]: 1, a: 2}; 
Object.defineProperty(testObject, 'myMethod', { 
    value: function () { 
        alert("Non enumerable property"); 
    }, 
    enumerable: false 
}); 
console.log(Object.keys(testObject)); 
// ['a'] 
console.log(Reflect.ownKeys(testObject)); 
// [ 'a', 'myMethod', Symbol(1) ] 

總結

Object.keys(obj) ： 結果是object 上所有可枚舉的key;

Reflect.ownKeys(obj) : 結果是所有的 key。