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、两个感叹号 !!

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

undefinednull 被判断为 false;
任何引用数据类型都会被判断为 true,不论其是否为空数组空对象等;
字符串类型,空字符串会被判断为 false,其他则为 true;
数字类型,0NAN 会被判断为 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 时,
返回其右侧操作数,否则返回左侧操作数。
const foo = null ?? 'default string';
console.log(foo);
// "default string"

const baz = 0 ?? 42;
console.log(baz);
//  0

参考: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
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的:(js,javascript,前端)