JavaScript 奇怪的操作符——感叹号、问号、逻辑运算符、置位运算符

？. != ?? JavaScript 奇怪的操作符（一）——感叹号、问号、逻辑运算符、置位运算符

零、前言

最近在看公司大佬代码的过程中发现了挺多有趣的操作符，有些是以前见过也用过的，但是也有很多没见过的，而且熟练使用一些操作符能够加快开发速度并且使代码更加优雅。特此记录一下。

由于 JavaScript 的操作符有很多，这段时间准备慢慢看看其他操作符在实际项目中的有趣操作。

一、感叹号操作符

1、一个感叹号 !

将变量转化为 Boolean 类型（取反），其中 null、undefined、0 、NaN、false和空字符串''都会被转化为 true，其他的则为 false。（值得注意的是，其中字符串 '0' 也为 false）

!null; // true
!undefined; // true
!0; // true
!NaN; // true
!false; // true
!''; // true
​
!'0'; //false
!123; //false
!'a'; //false
![]; //false
!{}; //false
!(function(){}); // false
复制代码

2、两个感叹号 !!

两个感叹号 !! 被用来做类型判断，可以看作为在第一步!（变量）之后再做逻辑取反运算，规则如下：

• undefined 和 null 被判断为 false；
• 任何引用数据类型都会被判断为 true，不论其是否为空数组空对象等；
• 字符串类型，空字符串会被判断为 false，其他则为 true；
• 数字类型，0 和 NAN 会被判断为 false，其余为 true；
• 注意：字符串 '0' 会被判断为 true。

3、三个感叹号

三个感叹号 !!! 并无特殊用途，一般是由于 !! 表示的为布尔值 Boolean，加一个 ! 为对其的取反。

二、问号操作符

1、可选链 ?.

这是 JavaScript 的一个新特性，在访问 JavaScript 对象的嵌套属性的时候，使用该运算符将不再需要在每个级别检查是否为 null 和 undefined。

而发现这一运算符是在看大佬代码的时候遇到这么一个语句：res?.data?.list ，顿时觉得非常有意思，经过查询和测试，发现这就是语句等同于 res && res.data && res.data.list。

总的来说，这语句其实就是为了解决访问多层对象属性（比如 res.data.list ）时，如果属性 res.data 为空会报引用错误的问题。

使用 ?. 远比 && 美观且更好理解。

let data = res?.data?.list;
// => 等价于
let data = res && res.data &&res.data.list;
复制代码

参考：MDN 可选链操作符

2、双问号 ??

当我们需要对一个变量赋值时，又担心赋的值并不是有效的，我们就会使用 || （如：let arr = xxx || []），但是使用 || 可能会遇到 '' 和 0 的情况赋值失败，那么就可以使用 ??。

空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

参考：MDN 空值合并运算符

三、置位运算符和逻辑运算符

1、二进制或 |

使用二进制运算符 |，首先会将 | 前后的变量转化为二进制，然后进行二进制运算，只要相同位有 1 就为 1，否则为 0。

2、逻辑或 ||

只要 || 前面为false,不管 || 后面是true还是false，都返回 || 后面的值。

只要 || 前面为true,不管 || 后面是true还是false，都返回 || 前面的值。

3、二进制与 &

使用二进制运算符 &，首先会将 & 前后的变量转化为二进制，然后进行二进制运算，只有相同位中两位都为 1 才为 1，否则为 0。

4、逻辑与 &&

只要 && 前面是false，无论 && 后面是true还是false，结果都将返 && 前面的值。

只要 && 前面是true，无论 && 后面是true还是false，结果都将返 && 后面的值。

作者：starcao
链接：https://juejin.cn/post/6992859625540288526
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。