js中 ^ !! ! 运算符的巧用 / 判断开始日和结束日案例 / 判断两个变量只有一个为空的情况
前言
今天敲代码的时候，遇到一个小问题。前端有两个输入框，一个是开始日，一个是结束日。现在需要判断用户输入的情况，大致上有以下四种：
- 都没有输入
- 只输入了一个
- 都输入了，但是开始日大于结束日
- 都输入了，且合法
因为不同情况下的错误信息显示不同，所以要区分判断。我重点把目光放在了第二种。
第二种情况的判断逻辑
最简单的方法也是最直观的方法：
if ((!start && end) || (start && !end))
但是这样并不精简，优雅。
群里有一位老哥提供了更加优美的代码：
!!(!a ^ !b)
下面来解释一下这种判断方法的原理。
^运算符
^运算符（位异或）用于对两个二进制操作数逐位进行比较，并根据如表格所示的换算表返回结果。
| 第一个数的位值 | 第二个数的位值 | 运算结果 |
|---|---|---|
| 1 | 1 | 0 |
| 1 | 0 | 1 |
| 0 | 1 | 1 |
| 0 | 0 | 1 |
可以看到，位异或的作用就是逐位判断两个变量的位值。
代入到判断逻辑中，!a和!b都已经被强制转换成了Boolean，所以它们的true、false状态就是简单的1或者0，二者如果状态相同，说明两个日期都输入了或者都没输入，这种情况为前言中的1、3、4情况，二者状态不同，说明只输入了一个日期，这种情况为第二种情况。
再看前面的!!这个其实是因为js中值没有类型，连续两次!!强制将结果转化为Boolean类型。在其他判断空值的情况下，我们可以利用这个运算符，快速判断控制：
// complicate
if (a === null || a === undefined || a === '') {}
// simple
if (!!a) {}
回到我们的case中，第二种情况的判断逻辑可以精简成这样：
if (!(!start ^ !end)) {
// error 2
}
OK！感谢群里老哥的教导，今天的分享就到这里。