原生javascript中检查对象是否为空示例实现

下面的代码片段，用于检查对象是否为空。 对于较新的浏览器，你可以使用 es6 的 “object.keys”。对于较旧的浏览器，可以安装lodash库并使用其“ isempty”方法。

const empty = {}; 
/* -------------------------
  较新的浏览器
----------------------------*/
object.keys(empty).length === 0 && empty.constructor === object
// true 
/* -------------------------
  老版本的浏览器可以使用 lodash
----------------------------*/
_.isempty(empty)
// true

什么是原生 javascript

原生 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()创建一个空对象。

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 to object
isemptyobject(undefined);
isemptyobject(null);

改进对null和undefined的空检查

如果不想让它抛出typeerror，可以添加额外的检查

function isemptyobject(value) {
  return value && object.keys(value).length === 0 && value.constructor === object;
}

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

如果你需要支持较旧的浏览器怎么办？ 大家都知道，当说旧的浏览器时，指的是 ie，我们有2个选择，使用原生或利用库。

使用 javascript 检查空对象

原生的 js 并不那么简洁，但判断用来空对象是没问题的。

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 也不会报 typeerror。

isobjectempty(null);      // false
isobjectempty(undefined); // false

使用外部库检查空对象

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

lodash 
_.isempty({});
// true
underscore
_.isempty({});
// true
jquery 
jquery.isemptyobject({});
// true

原生 vs 库

答案是看情况而定!我非常喜欢尽可能地简化程序，因为我不喜欢外部库的开销。另外，对于较小的应用程序，我懒得设置外部库。

但如果你的应用程序已经安装了一个外部库，那么就继续使用它。你会比任何人都更了解你的应用程序。所以选择最适合你情况的方法。

以上就是原生javascript中检查对象是否为空示例实现的详细内容，更多关于javascript中检查对象是否为空的资料请关注其它相关文章！