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
javascript的特性!(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;
复制代码
参考：
2、双问号 ??
当我们需要对⼀个变量赋值时，⼜担⼼赋的值并不是有效的，我们就会使⽤ || （如：let arr = xxx || []），但是使⽤ || 可能会遇到 '' 和 0 的情况赋值失败，那么就可以使⽤ ??。
空值合并操作符（ ?? ）是⼀个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
参考：
三、置位运算符和逻辑运算符
1、⼆进制或 |
使⽤⼆进制运算符 |，⾸先会将 | 前后的变量转化为⼆进制，然后进⾏⼆进制运算，只要相同位有 1 就为 1，否则为 0。
2、逻辑或 ||
只要 || 前⾯为false，不管 || 后⾯是true还是false，都返回 || 后⾯的值。
只要 || 前⾯为true，不管 || 后⾯是true还是false，都返回 || 前⾯的值。
3、⼆进制与 &
使⽤⼆进制运算符 &，⾸先会将 & 前后的变量转化为⼆进制，然后进⾏⼆进制运算，只有相同位中两位都为 1 才为 1，否则为 0。
4、逻辑与 &&
只要 && 前⾯是false，⽆论 && 后⾯是true还是false，结果都将返 && 前⾯的值。
只要 && 前⾯是true，⽆论 && 后⾯是true还是false，结果都将返 && 后⾯的值。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。