前言

很多时候会遇到空对象{}的情况,怎么样才能够很好的判断呢

前置条件

现在有三个对象

const obj = {}
 
const obj1 = {
    name: 'Hello',
    age: 20
}
 
const obj2 = {
    name: 'World'
    age: 20
}
 
Object.defineProperty(obj2, 'name', {
    enumerable: false,
});
 
Object.defineProperty(obj2, 'age', {
    enumerable: false,
});

编写方法

现在我们用不同的方法来判断

Function 1

我们可以使用JSON.stringify(obj)

const isEmptyJSON = (prop) => JSON.stringify(prop) === '{}';

Function 2

我们可以利用ES6中的 Object.keys()

const isEmptyObjEs6 = (prop) => Object.keys(prop).length === 0;

Function 3

我们可以利用for in来遍历对象

const isEmptyForIn = (prop) => {
  for (const key in prop) {
    return false;
  }
  return true;
};
 
// jquery中就是此方法

Function 4

我们可以利用Object.getOwnPropertyNames()

const isEmptyGetOwnPropertyNames = (prop) =>
  Object.getOwnPropertyNames(prop).length === 0;

校验

isEmptyJSON(obj); // true
isEmptyJSON(obj1); // false
isEmptyJSON(obj2); // true
 
isEmptyObjEs6(obj); // true
isEmptyObjEs6(obj1); // false
isEmptyObjEs6(obj2); // true
 
isEmptyForIn(obj); // true
isEmptyForIn(obj1); // false
isEmptyForIn(obj2); // true
 
isEmptyGetOwnPropertyNames(obj); // true
isEmptyGetOwnPropertyNames(obj1); // false
isEmptyGetOwnPropertyNames(obj2); // false

分析

首先obj和obj1各个函数都是准确的判断了 唯一的区别就是obj2的判断 那么obj1和obj2有什么区别呢,我只是将 obj2 的属性变成了不可枚举的因此出现了差异化 所以我们也可以推断出前面三个JSON.stringify Object.keys() for in都只能遍历对象的可枚举的属性 如果不可枚举是无法遍历的,因此对于他们来说,就是个空对象 但是Object.getOwnPropertyNames()可以便利对象上的不可枚举属性,所以能够准确的判断出该对象并不是空 注意,在obj2中虽然是不可枚举的,但是依旧是可以访问的

obj2.name; // World

写在后面

其实大部分时候我们可以通过Object.keys()来判断是否为空,但是可能有些情况比较特殊,所以多学一点方法还是很OK的