[[384915]]

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

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

我們先看一個(gè)例子：

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

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

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

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

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

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

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

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

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

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) ] 

總結(jié)

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

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