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

最新推荐文章于 2024-07-31 21:39:59 发布

紫轩阁

最新推荐文章于 2024-07-31 21:39:59 发布

阅读量2.5k

点赞数 1

分类专栏： js 文章标签： javascript 前端

原文链接：https://blog.csdn.net/cao919/article/details/121160816

版权

js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

？. != ?? 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 时，
返回其右侧操作数，否则返回左侧操作数。
const foo = null ?? 'default string';
console.log(foo);
// "default string"

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