信息发布→ 登录 注册 退出

JavaScript中如何判断对象是否为空的方法

发布时间:2026-01-11

点击量:
目录
  • Object.keys()
    • 示例
    • 为什么需要额外判断对象的构造函数呢?
    • 另一种边界情况
  • 总结

    在自己的日常开发中,一般使用Object.keys()来判断对象是否为空:

    const obj = {};
    
    Object.keys(obj).length === 0  // true 则为空对象

    而在一篇文章中却是如此判断:

    const obj = {};
    
    Object.keys(obj).length === 0 && obj.constructor === Object

    为什么还要额外判断对象的constructor呢?即构造函数呢?

    Object.keys()

    MDN 中关于Object.keys()的介绍:

    Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。

    示例

    var arr = ['a', 'b', 'c'];
    
    console.log(Object.keys(arr)); // ['0', '1', '2']
    
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    
    console.log(Object.keys(obj); // ['0', '1', '2']

    为什么需要额外判断对象的构造函数呢?

    文章作者写到是为了覆盖包装器实例(当时看到这有点懵逼),后面则解释清楚了。 在 JavaScript 中,有9个内置构造函数。

    new Object();
    
    new String();
    new Number();
    new Boolean();
    new Array();
    new RegExp();
    new Function();
    new Date();
    new Error();

    我们可以使用这些构造函数来创建对象,例如:new Object()(日常不推荐使用)。

    const obj = new Object();
    
    Object.keys(obj).length === 0; // true

    平常使用的判断方法也没问题啊

    但是当使用剩下的内置构造函数创建就会出现问题。

    function badEmptyCheck(value) {
        return Object.keys(value).length === 0;
    }
    
    badEmptyCheck(new String()); // true
    badEmptyCheck(new Number()); // true
    badEmptyCheck(new Boolean()); // true
    badEmptyCheck(new Array()); // true
    badEmptyCheck(new RegExp()); // true
    badEmptyCheck(new Function()); // true
    badEmptyCheck(new Date()); // true
    badEmptyCheck(new Error();); // true

    是不是有点明白了?

    在添加构造函数判断后:

    function goodEmptyCheck(value) {
        return Object.keys(value).length === 0 && value.constructor === Object;
    }
    
    goodEmptyCheck(new String()); // false
    goodEmptyCheck(new Number()); // false
    goodEmptyCheck(new Boolean()); // false
    goodEmptyCheck(new Array()); // false
    goodEmptyCheck(new RegExp()); // false
    goodEmptyCheck(new Function()); // false
    goodEmptyCheck(new Date()); // false
    goodEmptyCheck(new Error();); // false

    结果正确,实际上是我们对边界情况进行了处理。

    另一种边界情况

    Object.keys(null).length === 0;   // TypeError
    
    Object.keys(undefined).length === 0;  // TypeError

    处理方法也很简单:

    function goodEmptyCheck(value) {
        return value && Object.keys(value).length === 0 && value.constructor === Object;
    }

    总结

    badEmptyCheckgoodEmptyCheck两个方法的区别主要在于添加了对边界情况的处理,所以后者更适用于公共组件和一些库上。

    而如果我们在日常业务开发中可以确定需判断的对象的构造函数一定是Object, 则可以选择前者。少打好多字,摸更多的鱼。

    在线客服
    服务热线

    服务热线

    4008888355

    微信咨询
    二维码
    返回顶部
    ×二维码

    截屏,微信识别二维码

    打开微信

    微信号已复制,请打开微信添加咨询详情!