前言

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

前置条件

现在有三个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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)

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

Function 2

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

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

Function 3

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

1
2
3
4
5
6
7
8
const isEmptyForIn = (prop) => {
  for (const key in prop) {
    return false;
  }
  return true;
};

// jquery中就是此方法

Function 4

我们可以利用Object.getOwnPropertyNames()

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

校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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中虽然是不可枚举的,但是依旧是可以访问的

1
obj2.name; // World

写在后面

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