JS-ES2020链判断运算符（？.）和Null判断运算符（？？）

ES2020引入"链判断运算符"（？.）

const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value

直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不在往下运算，而是返回undefined。

链判断运算符三种用法：

• obj?.prop // 对象属性
• obj?.[expr] // 同上
• func?.(…args) // 函数或对象方法的调用

Null判断运算符（？？）

ES2020引入了一个新的Null判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。

const animationDuration = response.settings?.animationDuration ?? 300;

这个运算符只有一个目的，就是跟链判断运算符?.配合使用，为null或undefined的值设置默认值。
??有一个运算优先级问题，它与&&和||的优先级孰高孰低。现在的规则是，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。

// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs
必须加入表明优先级的括号
(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);

(lhs ?? middle) && rhs;
lhs ?? (middle && rhs);

(lhs || middle) ?? rhs;
lhs || (middle ?? rhs);

(lhs ?? middle) || rhs;
lhs ?? (middle || rhs);