JS 中的!与!!用法

场景

今天查看同事MR的代码，无意发现

const hasHookUrl = !!(data && data.hookUrl)

等等，那两个叹号是什么意思

！

js中的！用法比较灵活，逻辑运算常常会用！，做类型判断也可以用！

！可以将变量转换成boolean类型，null、undefined和空字符串取反都为true，其余都为false

!null  // true
!undefined // true
!'' // true
!100 //false
!'abc' // false

!!

!!常常用来做类型判断，在第一步!(变量)之后再做逻辑取反运算

例如：判断变量a为非空、未定义或者非空字符串才能执行方法提的内容。

var a;
if(a!=null&&typeof(a)!=undefined&&a!=''){}

实际上我们只需要写一个判断表达：

if(!!a){}

总结

“！”是逻辑与运算，并且可以与任何变量进行逻辑与将其转化为布尔值

“!!”则是逻辑与的取反运算

题外话 && 和 ||

那段代码还有 && 不知道你们发现了没有

在js中，以下内容会被当成false处理:"" , false , 0 , null , undefined , NaN

a || b

如果a是true，那么b不管是true还是false，都返回true。因此不用判断b了，这个时候刚好判断到a，因此返回a。

如果a是false，那么就要判断b，如果b是true，那么返回true，如果b是false，返回false，其实不就是返回b了吗。

应用

在js中，如果一个变量不一定有值，则设置默认值，例如：

	var a = num || 5;

a && b

如果a是false，那么b不管是true还是false，都返回false，因此不用判断b了，这个时候刚好判断到a，因此返回a。

如果a是true，那么就要在判断b，和刚刚一样，不管b是true是false，都返回b。

应用

js中，从后台返回的字段可能没有，如何才能不影响UI呢

{
	data.name && (
    	<div>
        	<label>姓名</label>
            <span>{data.name}</span>
        </div>
    )
}

注意 ⚠️

在最新的JavaScript规范中，!!是避免使用的。

[JS小技巧] JS 中的!与!!用法

JS 中的!与!!用法