迹忆客 专注技术分享

在这篇简短的文章中，我们将向大家展示如何在 JavaScript 中检查对象是否为空。

在日常的 JavaScript 开发中，我们可能需要检查对象是否为空。 如果我们不得不这样做，可能知道没有单一的直接解决方案。 但是，我们可以使用不同的技术为自己的用例创建自定义解决方案。 除此之外，如果我们在项目中使用 JavaScript 实用程序库，它可能已经提供了一个内置方法来检查对象是否为空。

现代方式 (ES5+)

在本节中，我们将讨论可以在支持 ES5 版本的现代浏览器中使用的不同方法。

1. Object.keys() 方法

Object.keys() 方法返回给定对象的可枚举属性名称数组。 因此，我们可以使用它通过计算这个数组的长度来检查对象是否具有任何属性。

让我们看看下面的例子。

function isEmptyObject(obj) {
    return Object.keys(obj).length === 0;
}
console.log(isEmptyObject({})); // output: true 
var bar = {"foo": "1"};
console.log(Object.keys(bar).length); // output: 1 
console.log(isEmptyObject(bar)); // output: false

正如我们在上面的示例中看到的，bar 对象附加了 foo 属性，因此 bar.keys(obj).length 表达式将返回一个大于零的值。 所以在这种情况下 isEmptyObject 函数将返回 false。

继续并使用不同的值测试 isEmptyObject 函数。

请注意 ，Object.keys() 方法可以为特殊类型返回一些令人惊讶的结果。 例如，isEmptyObject 将为 Date 或 RegExp 对象返回 true。

console.log(isEmptyObject(Date.now())); //output: true 
console.log(isEmptyObject(new RegExp())); //output: true

另外，要小心，因为使用 null 或未定义的值调用此方法。 它们会导致异常。 稍后，我们将创建一个不会因空输入而失败的防弹解决方案。

console.log(isEmptyObject(null)); //throws Uncaught TypeError: Cannot convert undefined or null to object 

2. Object.getOwnPropertyNames()方法

Object.getOwnPropertyNames() 方法返回给定对象的所有属性的数组。 虽然它可能看起来与 Object.keys() 方法相同，但还是有区别的。 Object.getOwnPropertyNames() 方法还考虑了不可枚举的属性，而 Object.keys() 只考虑了可枚举的属性。 大多数时候，它们是等价的，但存在 Object.keys() 会丢失某些已声明为不可枚举的属性的风险。

让我们来看下面的例子。

function isEmptyObject(obj) {
    return Object.getOwnPropertyNames(obj).length === 0;
}
console.log(isEmptyObject({})); // output: true 
var bar = {"foo": "1"};
console.log(Object.getOwnPropertyNames(bar).length); // output: 1 
console.log(isEmptyObject(bar)); // output: false

如大家所见，使用 Object.getOwnPropertyNames() 测试空性与使用 Object.keys() 的工作方式类似。

不过，边缘情况有点不同——Object.getOwnPropertyNames() 方法仍然会为 Date 返回 true，但会为 RegExp 返回 false。

console.log(isEmptyObject(Date.now())); //输出：真
console.log(isEmptyObject(new RegExp())); //输出: false

此方法将在 null 或未定义的输入上失败。

3. JSON.stringify

JSON.stringify 方法用于将 JavaScript 对象转换为 JSON 字符串。 所以我们可以用它来将对象转换为字符串，我们可以将结果与 {} 进行比较以检查给定对象是否为空。

让我们来看下面的例子。

function isEmptyObject(obj){
    return JSON.stringify(obj) === '{}';
}
console.log(isEmptyObject({})); // output: true 
var bar = {"foo":"1"};
console.log(JSON.stringify(bar)); // output: {"foo":"1"} 
console.log(isEmptyObject(bar)); // output: false

边缘情况有点不同。 JSON.stringify 将为 Date 返回一个数字字符串，如“1651283138454”，但将为 RegExp 返回一个空对象。 因此，使用 JSON.stringify 方法为这些类提供与 Object.getOwnPropertyNames 方法完全相反的结果！

console.log(isEmptyObject(Date.now())); //output: false 
console.log(isEmptyObject(new RegExp()); //output: true

另一个变化是 JSON.stringify 方法不会在空输入上抛出异常。 相反，它会返回 false，这可能不是我们所期望的。

console.log(isEmptyObject(null)); //output: false

4. Object.entries()

Object.entries() 方法返回一个数组数组，每个元素都是一个对象属性的键值对数组。

让我们通过下面的例子来理解它是如何工作的。

function isEmptyObject(obj) {
    return Object.entries(obj).length === 0;
}
console.log(isEmptyObject({})); // output: true 
var bar = {"foo":"1"};
console.log(Object.entries(bar)); // output: [['foo', '1']] 
console.log(Object.entries(bar).length); // output: 1 
console.log(isEmptyObject(bar)); // output: false

如大家所见，Object.entries() 方法将对象转换为数组，我们可以计算该数组的长度来检查所讨论的对象是否为空。

这与 Object.keys() 方法非常相似，并且会在我们的 Date 和 RegExp 对象的边缘案例示例中给出相同的结果。 它还会为 null 或未定义的输入抛出异常。

console.log(isEmptyObject(Date.now())); //output: true 
console.log(isEmptyObject(new RegExp())); //output: true

Bullet-Proof 解决方案

上述简单解决方案的一个问题是，它们在边缘情况下给出的结果不一致：特殊对象（如 RegExp 或 Date）、空值或未定义值，或原始值（如整数）。 这是一个简单但更可靠的解决方案。

function isEmptyObject(value) {
  const type = typeof value
  const isObject = value != null && type === 'object' 
  return isObject && Object.keys(value).length === 0;
}

这个方法完全按照它说的做：如果输入值既是一个对象又是空的，它就返回真。 它可以处理 null 和 undefined 值——返回 false 因为它们不是对象。 对于 Date 和 RegExp 等特殊对象，它将返回 true，因为它们没有定义任何特殊键。 它还将为空数组返回 true，为非空数组返回 false。

Pre-ES5 方法

在本节中，我们将讨论一种甚至适用于旧版浏览器的解决方案。 这在 JavaScript ES5 时代之前一直被频繁使用，当时没有内置方法可用于检查对象是否为空。

让我们来看下面的例子。

function isEmptyObject(obj) {
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            return false;
        }
    }
    return true;
}
console.log(isEmptyObject({})); // output: true 
console.log(isEmptyObject({"foo":"1"})); // output: false

在上面的示例中，我们构建了一个自定义函数，我们可以调用它来检查对象是否为空。 它只有一个参数，我们需要传递一个要测试的对象。 在 isEmptyObject 函数中，我们尝试遍历对象属性。 如果对象有任何属性，我们将返回 FALSE，否则我们将返回 TRUE。

我们可以继续使用不同的值测试 isEmptyObject 函数。 如上例所示，我们使用不同的值调用它并使用 console.log 函数记录输出。

这就是在不支持 ES5 版本的浏览器中检查对象是否为空的方法。 在下一节中，我们将在现代浏览器的上下文中讨论它。

jQuery 方法

如果你已经在你的项目中使用了 jQuery 库，那么检查一个对象是否为空真的很容易，因为 jQuery 库已经提供了 isEmptyObject 方法，它允许你检查一个对象是否为空。

让我们快速浏览以下示例。

jQuery.isEmptyObject({}); // true 
jQuery.isEmptyObject({"foo":"1"}); // false

如大家所见，通过 jQuery 使用 isEmptyObject 方法相当简单。

同样，Lodash 和 Underscore.js 库也有 _.isEmpty()。

总结

在本文中，我们讨论了在 JavaScript 中检查对象是否为空的多种不同方法。 查看我们关于 JavaScript 编程的其他一些教程！