??(空值合并操作符) 与 ?.(可选链操作符)

??(空值合并操作符)

const result = res ?? ''

当 ?? 变量值为 null 或 undefined 时，返回右侧的值；否则返回左侧的值

主要区别 ?? 与 || 之间的差异

|| 当左侧值为 false 时，返回右侧的值，否则返回左侧的值

核心点就在于值为 false，除了 null、undefined，还有 0 和 ‘’ 的返回值也是 false，但如果我们需要值为 0 或 ‘’ 时，|| 就无法满足我们的需求了，而 ?? 就可以完美解决这个问题

?.(可选链操作符)

if(data.children?.title) {
 console.log(data.children.title)
}

?. 可选链操作符运行读取对象深处的属性，而不用明确该属性是不是存在

假设 data 对象中没有 children 属性，而我们直接读取 data.children.title 的属性值，编译器就会直接报错，因为 js 无法从 undefined 中读取 title 的属性值

if(data.children && data.children.title) {
 console.log(data.children.title)
}

可以通过上面这个方法解决问题，但 data.children 显得有些多余

?. 就可以解决这个问题，哪怕 data.children 为 null 或 undefined，编译器也不会报错，而是直接返回 undefined，使表达式更短、更简明