前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 判断空对象、空数组的方法

JavaScript 判断空对象、空数组的方法

作者头像
celineWong7
发布2020-11-05 15:32:25
28.5K0
发布2020-11-05 15:32:25
举报
文章被收录于专栏:web前端踩坑

我们在判断参数是否为空时,希望把null, undefined, {}, [],"" 这五类都判定为空。

一、为什么判定空对象、空数据有点“难”?

首先,我们先看下下面的表格:

a

取非 !a

和自己比较 a===null/undefined...

描述

数据类型

null

true

true

空对象

Null

undefined

true

true

未定义对象

Undefined

0

true

true

数值0

Number

""

true

true

空字符串

String

[]

false

false

空数组

Array

{}

false

false

空对象

Object

从表格中,我们可以看出想要判断是不是null, undefined , "", 0,都比较容易, 非操作比较操作 都能实现。就是{}, []比较顽固,两种方法都无效。

二、判定空数组的方法

分析:所谓空数组,就是数组的长度等于0。所以我们的难点就落在了怎么判断一个参数的数据类型是数组了。 我们可以通过isPrototypeOf()方法实现。

代码语言:javascript
复制
var obj = [];
Array.prototype.isPrototypeOf(obj); // true

isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。即判断 Array 是否存在于 obj 的原型链上。该方法属于 ES3 标准,现代浏览器均支持,包括 IE。

所以,完整的检验空数组的表达式如下:

代码语言:javascript
复制
// 满足以下判断表达式的都是 空数组 []
Array.prototype.isPrototypeOf(obj) && obj.length === 0

三、判定空对象的方法

分析:和判断空对象类似的,我们只要能验证这个对象的keys长度是0,那就是个空对象了。我们依旧可以通过isPrototypeOf()方法实现判断一个数据是不是对象。

代码语言:javascript
复制
var obj = {};
Object.prototype.isPrototypeOf(obj); // true

完整的检验空对象的表达式如下:

代码语言:javascript
复制
// 满足以下判断表达式的都是 空对象
Object.prototype.isPrototypeOf(obj) && Object.keys(obj).length === 0

其中,Object.keys()方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致(该方法属于 ES5 标准,IE9 以上和其它现代浏览器均支持)。 若要兼容IE9以下,可以用 for...in替代,但要注意for...in 会将对象原型链上的属性也枚举出来,所以要借hasOwnProperty()方法来判断是不是对象本身的属性。

代码语言:javascript
复制
function hasKeys(obj){
    for(var key in obj) {
        if(obj.hasOwnProperty(key)) {
            return true;
        }
    }
}
var obj1 = {a:'aa',b:'bb'};
var obj2 = {};
console.log(hasKeys(obj1)); // true
console.log(hasKeys(obj2)); // undefined

但要注意:在JavaScript 中一切皆是对象,也就是说,Object 也存在于数组的原型链上,因此在封装校验方法时,数组需要先于对象检验。

代码语言:javascript
复制
Array.prototype.isPrototypeOf([]); // true
Array.prototype.isPrototypeOf({}); // false

Object.prototype.isPrototypeOf([]); // true
Object.prototype.isPrototypeOf({}); // true

注意:isPrototypeOfinstanceof operator 是不一样的。在表达式 obj instanceof AFunction 中,检测的是 AFunction.prototype 是否在obj 的原型链中,而不是检测 AFunction 自身。

四、一个判断参数为空的函数封装

结合上面的空对象、空数组检测方法,我们可以封装一个判断参数为空的函数。

代码语言:javascript
复制
function isEmpty(a){
            if (a === "") return true; //检验空字符串
            if (a === "null") return true; //检验字符串类型的null
            if (a === "undefined") return true; //检验字符串类型的 undefined
            if (!a && a !== 0 && a !=="") return true; //检验 undefined 和 null           
            if (Array.prototype.isPrototypeOf(a) && a.length === 0 ) return true; //检验空数组
            if (Object.prototype.isPrototypeOf(a) && Object.keys(a).length === 0 ) return true;  //检验空对象
            return false;
        }
小小Tips:

1. 一个讨巧判断空数组、空对象的方法:

代码语言:javascript
复制
var item = [];
console.log(JSON.stringify(item) === '[]'); // true
代码语言:javascript
复制
var item = {};
console.log(JSON.stringify(item) === '{}');// true

2. null, undefined, {}, [],"" , 0在非严格等于(即两个等号时==)情况下,他们互有“帮派”。

1)null, undefined为一组。

代码语言:javascript
复制
console.log(null == undefined); // true

2)[], "" , 0为一组。

代码语言:javascript
复制
console.log("" == 0); // true
console.log("" == []); // true
console.log(0 == []); // true

// 但不要混淆,空数组不等于空数组
console.log([] == []); // false

所以在做判断的时候,严谨点要用严格等于===

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、为什么判定空对象、空数据有点“难”?
  • 二、判定空数组的方法
  • 三、判定空对象的方法
  • 四、一个判断参数为空的函数封装
    • 小小Tips:
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档