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

目录
  • 什么是原生 JavaScript
  • A.在较新的浏览器中检查空对象
    • 通过检查 constructor 解决误报
    • 对其他值进行空检查
  • B.旧版本浏览器中的空对象检查
    • 使用 JavaScript 检查空对象
    • 其它类型的构造函数也能正常判断
  • 使用外部库检查空对象
  • 原生 VS 库

下面的代码片段,用于检查对象是否为空。 对于较新的浏览器,你可以使用 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中检查对象是否为空的资料请关注我们其它相关文章!

时间: 2021-11-24

JS实现判断对象是否为空对象的5种方法

1.将json对象转化为json字符串,再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{}"); alert(b);//true 2.for in 循环判断 var obj = {}; var b = function() { for(var key in obj) { return false; } return true; } alert(b());//true 3.jquery的

js中判断对象是否为空的三种实现方法

在写js脚本的时候经常遇到对象为空或者不是对象的情况,出现这种情况我们可以用if去判断它,然后去执行相应的处理方法,具体判断他们的方法有以下几种: 1.if   (typeOf(x)   ==   "undefined") 2.if   (typeOf(x)   !=   "object") 3.if(!x) 其中第三种是最简单的方法,但是第三种就不能用if(x)这种互斥的方法去判断,只能在对象前面加! java里面!x为true的时候x肯定为false了,但是这里

JS/Jquery判断对象为空的方法

发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是否为空,等价于检查对象中有没有键值对.写成代码,形如: if (isEmptyObject(obj)) { // obj is empty } else { // not empty } 至于 isEmptyObject 的实现,jQuery 中有一个很有想法的方式,请看代码: function i

JavaScript 判断一个对象{}是否为空对象的简单方法

做项目时遇到一个问题,判断一个对象是否为空对象,发现这样判断可以,上代码: 1. 代码1: var a = {}; if(!a){ console.log(1);} else if(a == null) { console.log(2);} else { console.log(3);} 结果为:3 2. 代码2: var b = {}; if(b == {}){ console.log(4);} if(b == '{}') { console.log(5);} if(typeof(b) ==

JavaScript判断表单为空及获取焦点的方法

本文实例讲述了JavaScript判断表单为空及获取焦点的方法.分享给大家供大家参考,具体如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <html> <head> <meta http-equiv="Content

javascript 判断一个对象为数组的方法

javascript 判断一个对象为数组的方法 数组对象 js的数组是无类型的:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型.数组的元素可以是对象或其他数组,这样就可以创建复杂的数据结构. 通常我们可以用一元运算符typeof来判断js的数据类型,但是对于数组这样一个特殊的对象却只能返回"object" typeof [1,2,3] "object" typeof 100 "number" typeof false &qu

判断一个对象是否为jquery对象的方法

当我们在用jquery的each做循环遍历的时候常常会使用到this,而有时候我们不知道this所指的到底是什么,因为要使用jquery的方法 前提此对象必须是jquery对象. 另外要判断一个javascript的对象是什么类型,可以使用typeof, 但是typeof只能判断出js的基础对象(string,boolean,number,object) 判断一个对象是否为jquery对象可以用 obj instanceof jQuery 例如: 复制代码 代码如下: var obj = $("

python使用any判断一个对象是否为空的方法

本文实例讲述了python使用any判断一个对象是否为空的方法.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: >>> eth = {"eth0″:"192.168.1.1″} >>> any(eth) True >>> eth = {} >>> any(eth) False 判断list是否为空 传统的方式: 复制代码 代码如下: if len(mylist):     # Do somethi

JavaScript选取(picking)和反选(rejecting)对象的属性方法

有时候我们需要将一个对象的某些属性选取出来,比方说我们有一个用数组表示的数据库表,我们需要一些函数来 select (选取) 几个字段: function pick(obj, keys) { return keys.map(k => k in obj ? {[k]: obj[k]} : {}) .reduce((res, o) => Object.assign(res, o), {}); } const row = { 'accounts.id': 1, 'client.name': 'Joh

JavaScript判断前缀、后缀是否是空格的方法

本文实例讲述了JavaScript判断前缀.后缀是否是空格的方法.分享给大家供大家参考.具体如下: // Js 判断后缀 String.prototype.endsWith = function(suffix) { return this.indexOf(suffix,this.length - suffix.length)!==-1; }; // Js 判断前缀 if (typeof String.prototype.startsWith != 'function') { // see bel

Java的反射机制---动态调用对象的简单方法

唉!我还真是在面试中学习新东东啊,一个公司刚刚给了个测试,不过我很奇怪的是为什么web developer的职位居然考java的反射机制题,不过学习研究一下反射机制对我来说是件好事啦! 先说说什么是java反射机制吧,在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这 种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制.主要功能:在运行时判断任意一个对象所属的类:在运行时构造任意一个类的对 象:在运行时判断任意一个

javascript 删除数组元素和清空数组的简单方法

javascript 删除数组元素和清空数组的简单方法 一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删除数组元素 var ary = [1,2,3,4]; ary.splice(0,1); 或 ary.splice($.inArray(2, ary), 1); 其中$.inArray(2, ary)用来查找某元素在数组中的索引位置. 三,js

JS判断浏览器是否安装flash插件的简单方法

1. 直接判断是否有flash插件 var myFlash = (function(){ if(typeof window.ActiveXObject != "undefined"){ return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); }else{ return navigator.plugins['Shockwave Flash']; } })(); chrome: Edge浏览器中取消了wind