空值合并（??）与可选链（?.）操作符

可选链操作符

可选链?.可以让我们在不确定某个值是否存在时使用，当?.前面的值为 undefined 或 null 时，会立即阻止代码的执行并返回 undefined

const obj = null
console.log(obj.a) // 此时浏览器会报错
const arr = []
console.log(arr[0].age) // 此时浏览器会报错

使用可选链

const obj = null
console.log(obj?.a) // 浏览器打印 undefined
const arr = []
console.log(arr[0]?.age) // 浏览器打印 undefined

可选链也可以用来执行一个可能不存在的函数

let user1 = {
  admin() {
    alert('I am admin')
  }
}
let user2 = {}
user1.admin?.() // I am admin
user2.admin?.() // 啥都没有（因为没有方法）但不报错

注意：在可选链前面的变量必须被声明，如果没有声明，将会报错

console.log(person?.name) // 未声明 person 将报错 `person is not defined`

person 必须被 let/const/var 声明

可选链操作符不能用于赋值

const obj = {
uname: 'zs',
age: 18
}
obj?.uname = 'ls' //控制台 Uncaught SyntaxError: Invalid left-hand side in assignment

可选链在运行时会先检查?.左边的值是否被声明（未声明将报错），再检查是否含有?.右边的值或属性或方法，如果存在则返回该值，不存在则返回 undefined(不存在的方法则不执行)

空值合并操作符

需求场景：如果获取到的 username 的不为 null 或 undefined，那么该 name 的新值就是 username，如果获取到的是 null 或 undefined，则返回一个默认值，这种情况一般使用三元表达式

const name = username ? username : 'default'
# or
const name = username || 'default'

但是上面的两种写法都存在一定的缺陷，当 username 为 0 或 false 的时候，name 也会返回 default

ES2020 引入了 ?? 运算符，当??左边为 null 或 undefined 时才返回右边的默认值

const username = false
const name = username ?? 'default' // name = false;