欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-23 09:51:35
目录什么是原生 javascripta.在较新的浏览器中检查空对象通过检查 constructor 解决误报对其他值进行空检查b.旧版本浏览器中的空对象检查使用 javascript 检查空对象其它类...

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

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

什么是原生 javascript

原生 javascript 指的是不使用框架或库。 它只是常规的普通 javascript,没有使用lodashjquery之类的库。

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);

改进对nullundefined的空检查

如果不想让它抛出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中检查对象是否为空的资料请关注其它相关文章!