可选链操作符?. 与 空值合并运算符??

一、可选链运算符?. (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