如何在 JavaScript 中检查对象是否为空

以下是检查对象是否为空的代码。对于较新的浏览器，您可以使用原生 JS 并使用新的“Object.keys” 🍦。对于较旧的浏览器支持，您可以安装 Lodash 库并使用其“isEmpty”方法 🤖

const empty = {};

/* -------------------------
  Plain JS for Newer Browser
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true

/* -------------------------
  Lodash for Older Browser
----------------------------*/
_.isEmpty(empty)
// true

什么是 Vanilla JavaScript

Vanilla JavaScript 并不是一个新的框架或库。它只是普通的 JavaScript，没有使用 Lodash 或 jQuery 之类的库。

A. 较新浏览器中的空对象检查

我们可以使用内置Object.keys方法来检查空对象。

const empty = {};

Object.keys(empty).length === 0 && empty.constructor === Object;

为什么我们需要额外`constructor`检查？

你可能想知道为什么我们需要constructor检查。嗯，这是为了覆盖包装器实例。在 JavaScript 中，我们有 9 个内置构造函数。

new Object();

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

因此，我们可以使用创建一个空对象new Object()。附注：切勿使用构造函数创建对象。这被认为是不好的做法，请参阅Airbnb 样式指南和ESLint。

const obj = new Object();

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

因此，仅使用，当对象为空时Object.keys它确实会返回✅。但是，当我们使用其他构造函数创建新的对象实例时会发生什么呢？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 😱

啊呀呀，我们有一个误报😱

`constructor`通过检查解决误报问题

让我们通过添加构造函数检查来纠正这个问题。

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

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 ✅

太棒了！我们已经涵盖了极端情况👍

测试对其他值的空检查

好吧，让我们用一些值来测试我们的方法，看看我们得到了什么🧪

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

到目前为止看起来不错，它返回false非对象。

isEmptyObject(100)  // false
isEmptyObject(true) // false
isEmptyObject([])   // false

🚨但是要小心！这些值会引发错误。

// TypeError: Cannot covert undefined or null ot object
goodEmptyCheck(undefined)
goodEmptyCheck(null)

`null`改进空检查`undefined`

如果你不想让它抛出TypeError，你可以添加一个额外的检查：

let value;

value // 👈 null and undefined check
 && Object.keys(value).length === 0 && value.constructor === Object;

value = null;       // null
value = undefined;  // undefined

完美，没有抛出任何错误😁

B. 旧版浏览器中的空对象检查

如果你需要支持老版本浏览器怎么办？哎呀，我骗谁呢！我们都知道，我说的老版本浏览器指的是 Internet Explorer 😂 好吧，我们有两个选择。要么继续用原生浏览器，要么用库。

使用 JavaScript 检查空对象

普通方法不太简洁。但确实能用👍

function isObjectEmpty(value) {
  return Object.prototype.toString.call(value) === "[object Object]" && JSON.stringify(value) === "{}"
}

它返回true对象。

isObjectEmpty({});           // true ✅
isObjectEmpty(new Object()); // true ✅

非常好，它没有被我们的构造函数对象欺骗。

isObjectEmpty(new String());   // false ✅
isObjectEmpty(new Number());   // false ✅
isObjectEmpty(new Boolean());  // false ✅
isObjectEmpty(new Array());    // false ✅
isObjectEmpty(new RegExp());   // false ✅
isObjectEmpty(new Function()); // false ✅
isObjectEmpty(new Date());     // false ✅

我们已经涵盖了null和undefined。它将返回false并且不会抛出TypeError。

isObjectEmpty(null);      // false
isObjectEmpty(undefined); // false

使用外部库检查空对象

有很多外部库可以用来检查空对象。而且大多数库都对老版本浏览器有很好的支持👍

Lodash

_.isEmpty({});
// true

下划线

_.isEmpty({});
// true

jQuery

jQuery.isEmptyObject({});
// true

Vanilla 与 Libraries

答案是，视情况而定！我非常推荐尽可能使用原生库，因为我不喜欢外部库带来的开销。另外，对于小型应用，我懒得设置外部库😂。但如果你的应用已经安装了外部库，那就直接用吧。你比任何人都更了解你的应用。所以，选择最适合你情况的方案吧👍

有意识的决策

@lexLohr：就像开发中的大多数事情一样，这需要妥协。优秀的开发人员了解可用的选项。优秀的开发人员也了解它们的影响。

我太喜欢这种心态了！我们经常不得不做出一些妥协。这本身并没有错。尤其是在团队中工作，有时难免会产生分歧。但最终，我们必须做出决定。这并不意味着我们会对其他选择视而不见。恰恰相反，我们会尽力寻找其他可能的解决方案，并理解每种方案的含义。这样我们才能做出明智的决定。或许“妥协”这个词不太贴切，我认为它应该被理解为“有意识的决策”😆

没错，我也能造词造句，就像格温妮丝·帕特洛那样有意识地脱钩。或许我应该开始用科技版的Goop……不过少了玉石滚轮和其他“有意思”的产品😂

社区意见

@lexLohr

for (var key in object) {
  if (object.hasOwnProperty(key)) {
    return false
  }
}
return true

@amanboss_9

Object.prototype.toString.call(a) == "[object Object]" && JSON.stringify(a) == "{}"

@kevinsar： Lodash 倾向于在 sonarqube 和 whitesource 等分析工具中抛出安全异常，我倾向于创建自己的实用函数并使用 vanilla。
- @sush_keny :（因为）原型污染
@function_js : isNotObj要点

资源

感谢阅读❤
欲了解更多代码花絮，请访问samanthaming.com

🎨 Instagram

🌟推特

👩🏻‍💻SamanthaMing.com

文章来源：https://dev.to/samanthaming/how-to-check-if-object-is-empty-in-javascript-2m9

如何在 JavaScript 中检查对象是否为空

如何在 JavaScript 中检查对象是否为空

什么是 Vanilla JavaScript

A. 较新浏览器中的空对象检查

为什么我们需要额外constructor检查？

constructor通过检查解决误报问题

测试对其他值的空检查

null改进空检查undefined

B. 旧版浏览器中的空对象检查

使用 JavaScript 检查空对象

使用外部库检查空对象

Vanilla 与 Libraries

有意识的决策

社区意见

资源

为什么我们需要额外`constructor`检查？

`constructor`通过检查解决误报问题

`null`改进空检查`undefined`