一、可选链运算符?. (IE浏览器不兼容)
?.运算符功能类似于 .运算符，不同之处在于如果链条上的一个引用是nullish(null或undefined)，. 操作符会引起一个错误，?.操作符取而代之的是会按照短路计算的方式返回一个undefined。当?.操作符用于函数调用时，如果该函数不存在也将会返回 undefined。
1.语法
obj?.prop
obj?.[表达式]
arr?.[index]
func?.(args)
// obj?.prop 举例
let obj = {
params:{
id:1,
val:2
}
}
console.log(obj.params.id) // 1
console.log(obj.params?.id) // 1
// 假如 obj.params是null
console.log(obj.params.id) // Error: Cannot read property 'id' of null
console.log(obj.params?.id) // undefined
// obj.params?.id 相当于(obj.params=== null || obj.params === undefined) ? undefined : obj.params.id
// arr?.[index]同理,数组arr如果是null, 可选链可以自动返回undefined而不是抛出一个异常。
// obj?.[表达式] 举例
let class1= {
student1:"小明",
student2:"小芳",
student3:"小强"
}
function dianming(num) {
console.log(class1?.['student'+num])
}
dianming(1) // 小明
//func?.(args) 举例
let say = {
apple:()=>{ return "我是苹果"},
banana:()=>{ return "我是香蕉"},
cherry:()=>{ return "我是车厘子"}
}
console.log(say.apple()) // 我是苹果
console.log(say.banana()) // 我是香蕉
console.log(say.cherry()) // 我是车厘子
console.log(say.yohoo()) // Error: say.yohoo is not a function
console.log(say.yohoo?.()) // undefined
//函数调用时如果被调用的方法不存在，使用可选链可以使表达式自动返回undefined而不是抛出一个异常。
2.可选链在赋值时无效
let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
3.叠加可选链操作符
let obj = {
name:'obj',
params:{
id:1,
value:2
}
}
console.log(obj?.params?.id) // 1
console.log(obj?.params?.count) //undefined
console.log(obj?.query?.id) //undefined
4.短路
可选链运算符，只要左侧遇到无效值，右侧运算就会停止，这种情况称为短路。
const nothing = null;
let index = 0;
nothing?.[index++]; // undefined
index; // 0
二、空值合并运算符??
??是一个逻辑运算符，当左侧操作数是null或者undefined时，会返回右侧操作数；否则则返回左侧操作数。
与逻辑或||操作符不同，逻辑或会在左操作数为 假值(比如，0 NaN或者‘’)时返回右侧操作数。
1.语法
// 左侧表达式为 null 或 undefined 时返回右侧的表达式
leftExpr ?? rightExpr
let myText = '';
let txt1 = myText || 'Hello'
console.log(txt1) // Hello
let txt2 = myText ?? 'Hello'
console.log(txt2) // ''
2.短路
当左表达式不为null或undefined时，不会对右表达式进行求值。
let a = undefined
let b = false
let c = 123
console.log( a ?? c) // 123
console.log( b ?? c) // false
3.不能与AND 或 OR 操作符共用
直接与 AND（&&）和 OR（||）操作符组合使用 ?? 是不可取的。
null || undefined ?? "foo"; // raises a SyntaxError
true || undefined ?? "foo"; // raises a SyntaxError
