可选链操作符跟空值合并运算符

可选链操作符跟空值合并运算符

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