js中.?、??、??=的用法和含义

一、可选链(.?)

如果一个值为null、或者是undefined

那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么?

其实这种情况就相当于直接在undefined上面访问name属性.

undefined和null是两个比较特殊的数据类型,是不能用点操作符去访问属性的.

那么在一个变量可能为null、或者undefined的时候,恰巧我又需要访问这个变量的一个属性,那我们应该这样做

let a;
let b;
if(!!a){
    b = a.val;
}else{
    b = undefined;
}

只有当a存在的时候,我才会去访问a的name属性.

我们可以看到,这样一个简单的逻辑,我们就要写这么多的东西,那么有没有简单的写法呢?

可选链就可以简化上述代码，如下

let a;
let b = a?.val;

有了?.，我们就可以一直套下去b = a?.val?.haha?.就是不报错.

二、空值合并运算符(??)

有了上面的例子,接下来我们简单一点,直接上举例

let b;
let a = 0;
let c = { name:'echohye' }

if(!!a || a === 0 ){
  b = a;
}else{
  b = c;
}

当我们想判断一个值存在,但是它等于0的时候,我们也需要当作它存在,于是就有了上面那样的例子,其实我们还可以这样做

let b;
let a = 0;
let c = { name:'buzhimingqianduan' }
b = a ?? c;

上面的例子,当a除了undefined或null之外的任何值,b都会等于a,否则就等于c.

那么，当我们使用三元运算符时，a = b?b:c，只要b等于null或undefined,我们就可以简化成a=b??c.

三、空值赋值运算符(??=)

和前面的例子类似

let b = '你好';
let a = 0
let c = null;
let d = ’123‘
b ??= a;  // b = “你好”
c ??= d  // c = '123'

当??=左侧的值为null、undefined的时候,才会将右侧变量的值赋值给左侧变量.

其他所有值都不会进行赋值.

在一些场景下,可以省略很多代码.

js中.?、??、??=的用法和含义