? 可选链操作符以及 ?? 与 || 的区别

? 可选链操作符

？是可选链操作符，常用于访问引用类型具有不确定性的内部数据时，比如要访问一个对象中的数组，不确定数组一定有数据就可以使用 ? 取读取它的 length 属性，如果对象没有这个属性也仅会返回 undefined 而不会报错，这样可以有效规避“undefuned上没有 length 属性”的报错！

代码示例：

let data = {name: 'zs'}
console.log(data.list.length)        // 代码会报错！！！！

let data = {name: 'zs'}
console.log(data.list?.length)       // 返回 undefined 而不会报错

?? 和 ||

?? 和 || 运算符都可以用于设置“默认值/备用值”的情况，但二者具有些微差别：

?? 运算符仅有在左侧数据为 undefined 或 null 时才会取右侧的值，所以左侧数据为 0 / false 时不会取右侧数据，仍旧取左侧的 0 / false

代码示例：

let a = null
console.log(a ?? '空')        // 空

let a = undefined
console.log(a ?? '空')        // 空

let a = 0
console.log(a ?? '空')        // 0

let a = false
console.log(a ?? '空')        // false

|| 运算符是只要左侧数据不为真就会取右侧的数据，所以左侧数据为 0 / false 时也会取右侧数据

代码示例：

let a = 0
console.log(false || '空')        // 空

let a = false
console.log(false || '空')        // 空

let a = null
console.log(false || '空')        // 空

let a = undefined
console.log(false || '空')        // 空