js 判断空值的方法
2019-12-09 本文已影响0人
恬雅过客
作为一个前端开发人员，会经常碰到js判断空值的场景。以前判断空值会写一大堆
&&与运算来剔除各种异常情况。后面发现一些人用!非运算，然后又开始用它，再后面又发现一些人用||或运算与''空值比较，又开始用它。用了这么久，也没发现什么问题。结果，这次在解析后端返回的json时，出现了一些问题，故此决定花时间自己做个相关的验证测试对比，方便做到心里有数。
js 判断空值的方法
我目前用得比较多的就是：
-
!exp非运算； -
(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||'')。
