美文网首页前端技巧
js 判断空值的方法

js 判断空值的方法

作者: 恬雅过客 | 来源:发表于2019-12-09 15:53 被阅读0次

    作为一个前端开发人员,会经常碰到js判断空值的场景。以前判断空值会写一大堆&&与运算来剔除各种异常情况。后面发现一些人用!非运算,然后又开始用它,再后面又发现一些人用||或运算与''空值比较,又开始用它。用了这么久,也没发现什么问题。结果,这次在解析后端返回的json时,出现了一些问题,故此决定花时间自己做个相关的验证测试对比,方便做到心里有数。

    js 判断空值的方法

    我目前用得比较多的就是:

    1. !exp非运算;

    2. (exp||'')=='' 或运算与''空值比较。当然,也可以写成这样!(exp||'')

    先上测试代码:

    14:48:36.569 !undefined
    14:48:36.582 true
    14:48:39.772 !null
    14:48:39.782 true
    14:48:50.949 !{}
    14:48:50.955 false
    14:49:04.523 ![]
    14:49:04.529 false
    14:49:13.672 !''
    14:49:13.678 true
    14:49:31.590 !false
    14:49:31.595 true
    14:49:41.325 !0
    14:49:41.331 true
    14:49:54.802 !'0'
    14:49:54.810 false
    14:54:32.478 (undefined||'')==''
    14:54:32.486 true
    14:54:39.293 (null||'')==''
    14:54:39.301 true
    14:54:44.883 ({}||'')==''
    14:54:44.891 false
    14:54:49.698 ([]||'')==''
    14:54:49.706 true
    14:55:23.469 (''||'')==''
    14:55:23.475 true
    14:55:34.095 (false||'')==''
    14:55:34.104 true
    14:55:45.016 (0||'')==''
    14:55:45.026 true
    14:55:51.745 ('0'||'')==''
    14:55:51.755 false
    

    再上对比表:(true 空值,false 非空)

    方法/exp undefined null {} [] '' false 0 '0'
    !exp true true false false true true true false
    (exp||'')=='' true true false true true true true false
    其他方法

    通过表格可以看出:(这里暂时抛开exp是{}对象的情况)

    • 场景:不考虑[]数组的,两种方法都可用。
    • 场景:false(Boolean类型)和0(Number类型)可以当做空值处理的,两种方法都可用。
    • 场景:0视作正常值的,加上&& exp!==0
    • 场景:false视作正常值的,加上&& exp!==false
    if(!exp){ 
    //是空值
    //todo ...
    }
    //或
    if((exp||'')==''){ 
    //是空值
    //todo ...
    }
    //或
    if(!(exp||'')){ 
    //是空值
    //todo ...
    }
    

    因此,推荐写法:!(exp||'')

    相关文章

      网友评论

        本文标题:js 判断空值的方法

        本文链接:https://www.haomeiwen.com/subject/ygabgctx.html