js 如何判断对象自身为空?
前置知识:
js 对象中的可枚举属性 enumerable : 用来控制所描述的属性是否将被包括在 for…in 循环之中(除非属性名是一个 Symbol )。具体来说,如果一个属性的 enumerable 为false,下面三个操作不会取到该属性。
- for...in循环
- Object.keys方法
- JSON.stringify方法、
enumerable 为false,上述操作虽然无法取到该属性,但是依然可以获取到该属性的值。
for...in 和 Object.keys的区别是:前者包括对象继承自原型对象的属性,后者只包括对象自身的属性。如果需要获取到对象自身的所有属性,无论 enumerable 值为 true/false,可以使用 Object.getOwnPropertyNames方法。
如何判断一个对象为空是我们在开发中经常会遇到的问题,今天我们来聊聊几种经常使用的方法,以及在不同的场景下我们如何去使用。
-  JSON.stringifyJSON.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.keysObject.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.ownKeysReflect.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
总结
判断一个对象是否为空时,使用 Reflect.ownKeys 方法最为完美。