可选链操作符跟空值合并运算符
es6 中新增了可选链操作符 ?. 和 空值合并运算符 ??
可选链操作符的使用 (非常实用)
在开发过程中我们需要判断一个对象里面有没有一个属性,并且需要使用这个属性里面对象的值,就需要写类似以下的判断代码
// 定义一个对象
let obj = {
person:{
name: 'jun'
}
}
// 访问 obj 对象下面 person 的 name 属性名的值
// 判断有无 person 对象,有的话才判断有没有 name 这个属性名
if(obj.person && obj.person.name){
// 访问该值
console.log(obj.person.name)
}
使用可选链操作符
let obj = {
person:{
name: 'jun'
}
}
// 访问该值
console.log(obj?.person?.name) // jun
console.log(obj?.person2?.name) // undefined, 不会报错
空值合并运算符的使用
空值合并运算符 ?? 是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
例如
console.log('' || 3 ) // 输出 3, 会将空字符转化为 false
console.log('' ?? 3)
// 输出'' , 表达式左边除了 undefined 和 Null 会返回右边的 3,其他时候都会返回 左边的内容
短路运算
let fn1 = () => 1
let fn2 =() => 2
let fn3 = () => null
console.log(fn1() ?? fn2()) // 打印 1, 并且 fn2 函数不会执行
console.log(fn3() ?? fn2()) // 打印 2, fn3 执行完返回 null, 所以会执行右边表达式 fn2,最后返回 2