JS28 判断对象是空对象

如何判断对象是空对象,总结了一下。

概述

一个空的对象{}在JS中进行判断,显示为真值:

1
2
var a = {};
console.log(!!a) // true

所以要判断对象中是否含有属性,需要使用特殊的手段,不同情况下有不同的手段:

  1. Reflect.ownKeys()
  2. JSON.stringify
  3. Object.keys/Object.values/Object.entries
  4. Object.getOwnPropertyNames()
  5. for...in
  6. 其他方法

这里判断对象是否是空对象,应该刨除原型链继承的影响,只观察对象自身是否含有任意属性值。

基于这个前提下,我认为可能Reflect.ownKeys()是更恰当的方法。

遍历方法的区别

先来看一下各种遍历方法的区别:

自身属性 原型属性 可枚举属性 不可枚举属性 Symbol属性
for...in × ×
Object.getOwnPropertyNames × ×
Object.keys × × ×
Relect.ownKeys ×

Reflect.ownKeys(target)

Relfect对象是ES6为操作对象提供的新API,它提供了许多针对对象的操作方法,其中ownKeys用于返回对象的所有属性,基本等同于Object.getOwnPropertyNamesObject.getOwnPropertySymbols之和。

它与其他的遍历方法最大的不同就是,它会将对象中Symbol类型的属性名遍历出来,而其他的方法不会。

1
2
3
function isEmpty(obj) {
return Reflect.ownKeys(obj).length === 0
}

其他的方法都有着自己的局限性。

Object.keys()

Object.keys()方法返回的数组中只包括自身可枚举的属性,不可枚举属性和Symbol属性都包括在返回结果中

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()返回的结果中包含自身可枚举和不可枚举的属性,但是不包含Symbol属性

它与Object.keys()相比,返回结果增加了自身不可枚举的属性

for...in

利用for...in对对象进行遍历时,会返回自身以及原型链上的可枚举属性,返回结果不包含Symbol属性

我们这里的前提是不考虑原型链继承而来的属性,所以即便不考虑Symbol属性,也需要通过hasOwnProperty判断遍历的结果是继承自原型链还是属于自身的属性

JSON.stringify()

JSON.stringify()方法可以将对象序列化为字符串,但是在序列化过程中会忽略方法属性和Symbol属性

1
2
3
4
5
const a = {
[Symbol(123)]: 123,
say() {}
};
console.log(JSON.stringify(a)) // '{}'

Lodash的isEmpty方法

使用Lodash的isEmpty判断对象是否是空对象时,对象如果被认为为空,那么他们没有自己的可枚举属性的对象。

它对字符串、数组、类数组对象也考虑在内了,如果这些对象长度为0,就认为是空对象

对于Map和Set对象,如果其size0,就认为是空对象

看一下它的源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/**
* Checks if `value` is an empty object, collection, map, or set.
*
* Objects are considered empty if they have no own enumerable string keyed
* properties.
*
* Array-like values such as `arguments` objects, arrays, buffers, strings, or
* jQuery-like collections are considered empty if they have a `length` of `0`.
* Similarly, maps and sets are considered empty if they have a `size` of `0`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is empty, else `false`.
* @example
*
* _.isEmpty(null);
* // => true
*
* _.isEmpty(true);
* // => true
*
* _.isEmpty(1);
* // => true
*
* _.isEmpty([1, 2, 3]);
* // => false
*
* _.isEmpty({ 'a': 1 });
* // => false
*/
function isEmpty(value) {
// 对于null也认为是空对象,返回true
if (value == null) {
return true;
}
// 对数组/类数组对象/字符串/Buffer/arguments对象,根据length属性进行判断
if (isArrayLike(value) &&
(isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||
isBuffer(value) || isTypedArray(value) || isArguments(value))) {
return !value.length;
}
// 主要是通过Object.prototype.toString.call返回类型
var tag = getTag(value);
// 针对Map和Set对象,根据size属性进行判断
if (tag == mapTag || tag == setTag) {
return !value.size;
}
// 针对原型对象,利用for...in遍历,返回自身除了constructor之外的属性
if (isPrototype(value)) {
return !baseKeys(value).length;
}
// 针对普通对象,利用for...in循环
for (var key in value) {
if (hasOwnProperty.call(value, key)) {
return false;
}
}
return true;
}

发现它使用的是for...in来进行主要的判断,对Symbol属性也没有进行判断

1
2
3
const key = Symbol(123);
const a= {[key]: 33};
console.log(_.isEmpty(a)); // true

参考

哆啦斯基周 wechat
我的公众号,看心情更新,欢迎订阅!