JavaScript常用的判空方法

1,260 阅读2分钟

  在JavaScript中判断一个变量是否为空时,我脑子里最快想到的方式就是对变量取反来判断隐式转换后的布尔值是否为true来判断

    if (!x) {}

  这是一个便捷的判断变量是否为空的方法,但是涉及的场景却很多,这里我们就分多种情况来讨论变量判空的方法。

1. 判断变量为空对象
(1) 判断变量为null或者undefined
判断一个变量是否为空时,可以直接将变量与null或者undefined相比较,需要注意双等于(==)和三等于(===)的区别。

    if (obj == null) {} //可以判断null或者undefined
    if (obj === undefined) {}  //只能判断undefined
    
    原因其实也很清楚,null是object类型的,在(===)的比较中是先比较类型再比较值的,所以三等于没办法判断null

  (2)判断变量为空对象 {}
  判断一个变量是否为空对象时,可以通过for...in语句遍历变量的属性,然后调用hasOwnProperty()函数,判断是否有自身存在的属性,如果存在则不为空对象,如果不存在自身属性(不包括继承属性),那么变量为空对象。

    function isEmpty (obj) {
        for( let key in obj ) {
            if(obj.hasOwnproperty(key)) {
                return false;
            }
        }
        return true;
    }

我们通过以下语句来进行测试。

    var o = {};
    function Person () {};
    Person.prototype.name = "xfx";
    
    //通过new操作符获取对象
    var p = new Person();
    
    console.log(isEmpty(o)); //true
    console.log(isEmpty(p)); //true

针对变量o,很明显是一个空对象,返回true
而变量p时通过new操作符得到的Person对象的实例,所以p会继承Person原型链上的name属性,但 时因为不是自身属性,所以会被判为空,返回true

2.判断变量为空数组
判断变量是否为空数组时,首先需要判断变量是否为数组,然后通过数组的length属性确定。

    arr instanceof Array && array.length === 0

当以上两个条件都满足时,该变量为空数组。

3.判断变量为空字符串
判断变量是否为空字符串时,可以直接将其与空字符串进行比较,或者调用trim()函数去掉前后的空格,然后判断字符串的长度。

    str == "" || str.trim().length == 0;

当满足以上两个条件的其中一个时,该变量为空字符串。

4.判断变量为0或者NaN
当一个变量为Number类型时,判空即判断变量是否为0或者NaN,因为NaN与任何值比较都为false,所以我们可以通过取非运算符完成。

    !(Number(num) && num) == true;

当上述语句返回true时,表示变量为0或者NaN。

5.!x == true的所有情况

  • 变量为null
  • 变量为undefined
  • 变量为空字符串""
  • 变量为数字0,包括+0、-0
  • 变量为NaN