文章目錄
- 一、前言
- 二、`JSON.stringify`
- 三、`for in` 配合 `hasOwnProperty`
- 四、`Object.keys`
- 五、`Object.getOwnPropertyNames`
- 六、`Object.getOwnPropertyNames` 結合 `Object.getOwnPropertySymbols`
- 七、`Reflect.ownKeys`
- 八、最后
一、前言
如何判斷一個對象為空?
先上結論:判斷一個對象是否為空時,使用 Reflect.ownKeys
方法最為完美。
今天我們來聊聊幾種經常使用的方法,以及在不同的場景下我們如何去使用。
二、JSON.stringify
JSON.stringify
方法可以使對象序列化,轉為相應的 JSON
格式。
const obj = {};
console.log(JSON.stringify(obj) === '{}') // true
缺點:如果存在
undefined
、任意的函數以及symbol
值,在序列化過程中會被忽略(出現在非數組對象的屬性值中時)或者被轉換成null
(出現在數組中時)。
如下示例:
const obj = {a: undefined,b: function() {},c: Symbol()
}
console.log(JSON.stringify(obj) === '{}') // true
三、for in
配合 hasOwnProperty
使用 for in
對當前對象進行遍歷:
const obj = {}
Object.prototype.a = 1function isEmptyObj(obj) {let flag = truefor (let o in obj) {flag = falsebreak}return flag
}console.log(isEmptyObj(obj)) // false
由于 for in
在進行對象遍歷時,會遍歷對象原型上的屬性,而我們只希望得到其自身的屬性,這時可以使用 hasOwnProperty
來實現,如下:
const obj = {}
Object.prototype.a = 1function isEmptyObj(obj) {let flag = truefor (let o in obj) {if (obj.hasOwnProperty(o)) {flag = falsebreak}}return flag
}console.log(isEmptyObj(obj)) // true
缺點:
for in
不能遍歷不可枚舉的屬性。
四、Object.keys
Object.keys
會返回對象自身可枚舉屬性組成的數組,而不會遍歷原型上的屬性。
const obj = {}
Object.prototype.a = 1console.log(Object.keys(obj).length === 0) // true
缺點:
Object.keys
和for in
都只能遍歷可枚舉屬性,不能遍歷不可枚舉的屬性。
我們使用 Object.defineProperty
將屬性 enumerable
設置為 false
來進行測試,示例如下:
const obj = {}
Object.defineProperty(obj, 'a', {value: 1,enumerable: false
})console.log(obj.a) // 1
console.log(isEmptyObj(obj)) // true
console.log(Object.keys(obj).length === 0) // true
五、Object.getOwnPropertyNames
使用 Object.getOwnPropertyNames
可以得到對象自身的所有屬性名組成的數組(包括不可枚舉屬性)。
const obj = {}
Object.defineProperty(obj, 'a', {value: 1,enumerable: false
})console.log(Object.getOwnPropertyNames(obj)) // [ 'a' ]
缺點:不能獲取
Symbol
值作為名稱的屬性,以上的JSON.stringify
、for in
以及Object.keys
方法也不能獲取Symbol
值作為名稱的屬性,示例如下:
const a = Symbol()
const obj = {[a]: 1
}console.log(obj) // { [Symbol()]: 1 }
console.log(Object.getOwnPropertyNames(obj).length === 0) // true
console.log(JSON.stringify(obj) === '{}') // true
console.log(isEmptyObj(obj)) // true
console.log(Object.keys(obj).length === 0) // true
六、Object.getOwnPropertyNames
結合 Object.getOwnPropertySymbols
已知 Object.getOwnPropertyNames
唯一的缺點是不能獲取 Symbol
值作為名稱的屬性,而 Object.getOwnPropertySymbols
只能獲取由 Symbol
值作為名稱的屬性,兩者相結合是不是就可以完美解決了。我們來簡單測試一下:
const a = Symbol()
const obj1 = {[a]: 1
}
const obj2 = {b: 2}
const obj3 = {}
Object.defineProperty(obj3, 'a', {value: 1,enumerable: false
})
const obj4 = {}function getLength(obj) {return Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)).length
}console.log(getLength(obj1) === 0) // false
console.log(getLength(obj2) === 0) // false
console.log(getLength(obj3) === 0) // false
console.log(getLength(obj4) === 0) // true
經過測試,上面這種方法的確可以解決,但是比較繁瑣,那有沒有更好的方法呢?答案是有的。
七、Reflect.ownKeys
Reflect.ownKeys
方法返回一個由目標對象自身的屬性組成的數組,它的返回值等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))
,示例如下:
const a = Symbol()
const obj1 = {[a]: 1
}
const obj2 = {b: 2}
const obj3 = {}
Object.defineProperty(obj3, 'a', {value: 1,enumerable: false
})
const obj4 = {}console.log(Reflect.ownKeys(obj1).length === 0) // false
console.log(Reflect.ownKeys(obj2).length === 0) // false
console.log(Reflect.ownKeys(obj3).length === 0) // false
console.log(Reflect.ownKeys(obj4).length === 0) // true
八、最后
本人每篇文章都是一字一句碼出來,希望對大家有所幫助,多提提意見。順手來個三連擊,點贊👍收藏💖關注?。一起加油?