JavaScript中 ?. 、?? 、??= 的用法以及含义

可选链(?.)

如果一个值为null、或者是undefined.那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么?

let a;
let b = a.name;
//Uncaught TypeError: Cannot read properties of undefined (reading 'name')

其实这种情况就相当于直接在undefined上面访问name属性.undefined和null是两个比较特殊的数据类型,是不能用点操作符去访问属性的.那么在一个变量可能为null、或者undefined的时候,恰巧我又需要访问这个变量的一个属性,那我们应该这样做

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

可以使用可选链，更简单

let a;
let b = a?.name;

我们终于看到?.这个东西了,其实这个就叫做可选链,表达的意思,就和刚才if else的例子是一个意思,只有当a存在,同时a具有name属性的时候,才会把值赋给b,否则就会将undefined赋值给b.重要的是,不管a存在与否,这么做都不会报错.
当然我们还可以这么干

let a;
let b;
b = a?.name?.age?.haha?.就是不报错
a?.b?.c('还是不报错')

空值合并运算符(??)

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

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

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

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

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

b = a ?? c; //0

console.log( ' '?? "xx")  //  空值

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

值得注意的是 ：?? 是忽视 null ,undefined 等错误的值

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

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

当??=左侧的值为null、undefined的时候,才会将右侧变量的值赋值给左侧变量.其他所有值都不会进行赋值.同样在一些场景下,可以省略很多代码.
举例：

var ibo = {}
console.log(ibo?.a ?? 111) //  111
var ibo = {a:{b:1}}
console.log(ibo?.a?.b ?? 111) //1

console.log(1??'2') //  1
console.log(null ?? "xx") // xx
undefined
console.log(undefined ?? "xx") //  xx
console.log( ' '?? "xx")  //  空值