js中‘??‘（空值合并操作符）和‘?.‘（可选链操作符）的使用

?? 空值合并操作符
用法：逻辑操作符，左侧为null和undefined时，才返回右侧的值

var name = null
console.log(name ??　'-')　// -

var obj = {
  name: 'sun'
}
console.log(obj.name ?? '-') // sun
console.log(obj.age ?? '-') // -

?. 可选链操作符
可选链在JavaScript中是一种简写形式
功能类似于‘.’ 链式操作符，不同之处在于，在引用为空null 或者 undefined 的情况下不会引起错误，该表达式短路返回值是 undefined
举个例子：

var personObj = {
  sun: {
    age: 18
  }
}
// 我们正常的调用是
console.log(personObj.sun.age) // 18

但是如果是下面这种情况

var personObj = {}
console.log(personObj.sun) // 返回undefined
console.log(personObj.sun.age) // 报错Cannot read property 'age' of undefined
// 因为personObj.sun是undefined，继续读取personObj.sun.age会报错

解决方法：
我们最想想到的可能是if else 判断或者使用三目运算符

var personObj = {}
console.log(personObj.sun ? personObj.sun.age : '-' ) // -

但是这样写不够简便，JavaScript就提供了可选链

//当写成  a?.b, 编译器会自动生成如下代码
a === null || a === void 0 ? void 0 : a.b
// 备注：undefined这个值在非严格模式下会被重新赋值，使用void 0必定返回真正的 undefined

可选链’?.'前面的部分是 undefined 或者 null，它会停止运算并返回该部分
上面我们就可以简写为

var personObj = {}
console.log(personObj.sun ?.age) // undefined 不会报错

注意：personObj 是需要声明的，不然会报错

扩展使用 ?.() 和 ?.[]：
?.() 用于调用一个可能不存在的函数

let funObj = {
  name() {
    console.log('小太阳')
  }
}
let funObjNull = {}
funObj.name() ?. () // 小太阳
funObjNull.name ?. () // 不打印

如果我们想使用方括号 [] 而不是点符号 . 来访问对象属性，语法 ?.[] 也可以使用

let personObj = {
  name: 'sun'
};
let personObj2 = null;
let key = 'name';
console.log( personObj?.[key] ); // sun
console.log( personObj2?.[key] ); // undefined

// 和delete一起使用
delete personObj?.name; // 如果 user 存在，则删除 user.name

??配合?.一起使用(当没数据的时候给个默认值)

var personObj = {
  sun: {
    age: 18
  }
}
console.log(personObj.sun ?. age ?? '-')  // 18
console.log(personObj.sun ?.address ?? 'xxx' ) // xxx