【每日一題】Reflect.ownKeys 與 Object.keys 的區(qū)別

人生苦短,總需要一點儀式感。比如學(xué)前端~
用法上
兩個函數(shù)都是接受一個對象參數(shù),并都是以數(shù)組形式返回對象屬性的集合。
而且參數(shù)都必須是對象,如果是其他亂麻七糟的類型,會報錯
Reflect.ownKeys(targetObj)
Object.keys(targetObj)

不同之處
關(guān)于對象屬性是否可枚舉
Reflect.ownKeys()可以得到對象自己的所有屬性,包括不可枚舉屬性;Object.keys()只能得到對象的普通可枚舉屬性,拿不到不可枚舉屬性。
關(guān)于Symbol屬性
Reflect.ownKeys()可以拿到對象的Symbol 的屬性;Object.keys()不行。

關(guān)于數(shù)組的length屬性
因為Reflect.ownKeys()可以得到對象的不可枚舉屬性這個特點,所以當目標對象是數(shù)組對象時,我們可以看到獲取的結(jié)果會比Object.keys()多一個length屬性
事實證明,數(shù)組的length也確實是“不可枚舉的”:
關(guān)于對象的原型
倆人這點上誰也不比誰強,都拿不到原型鏈上的屬性。

不過還好,這點需求上,可以用for...in來替代。
總結(jié)
分類表格
整理一個看上去更清晰的表格如下(感謝群友給的靈感)

| 方法分類 | 普通屬性 | 不可枚舉屬性 | Symbol屬性 | 原型屬性 | 數(shù)組length |
|---|---|---|---|---|---|
Reflect.ownKeys() | ? | ? | ? | ? | ? |
Object.keys() | ? | ? | ? | ? | ? |
for...in | ? | ? | ? | ? | ? |
數(shù)組length其實就是不可枚舉屬性那一列的延伸。
測試代碼匯總:
Object.prototype.pr = "我是原型屬性"; // 原型上增加“pr”屬性
let s = Symbol();
let obj = {
[s]: "this is Symbol", // 增加一個Symbol屬性“[s]”
a: "a", // 一個普通屬性“a”
};
// 再定義一個不可枚舉的屬性“name”
Object.defineProperty(obj, "name", {
value: "sunny",
configurable: true,
enumerable: false, // *
writable: true,
});
// 觀察打印結(jié)果
console.log("Object.keys", Object.keys(obj)); // 只得到一個普通屬性:["a"]
console.log("Reflect.ownKeys(obj)", Reflect.ownKeys(obj)); // 得到普通屬性,以及symbol和不可枚舉屬性:["a", "name", Symbol()]
// 遺憾的是,二者都拿不到 原型上的屬性“pr”。我們用for in來獲取
for(let o in obj){
console.log(o) // 分別打?。篴、pr
}


看來for in也不能獲取symbol屬性和不可枚舉屬性???♀?……


讓我們一起攜手同走前端路!

● 三欄響應(yīng)式布局(左右固寬中間自適應(yīng))的5種方法
評論
圖片
表情
