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

? 可选链操作符

?是可选链操作符常用于访问引用类型具有不确定性的内部数据时,比如要访问一个对象中的数组,不确定数组一定有数据就可以使用 ? 取读取它的 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 || '空')        // 空

猜你喜欢

转载自blog.csdn.net/qq_43551801/article/details/128228833