js 判断空值的方法

作为一个前端开发人员，会经常碰到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||'')。

来源：CSDN

作者：翡蛟

链接：https://blog.csdn.net/wolf_or_dog/article/details/103489559