双问号操作符和可选链操作符

Posted 2021-11-02 秋水不寒

双问号操作符（??），也被称作空值合并运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数

const foo = null ?? 'default string';
console.log(foo); // "default string"

可能有人会问 ??  和 || 有什么区别呢？

?? 的左侧只判断两种情况：null 和 undefined，而 || 的左侧只要是假值（包括'' 和 0）都会返回右侧的值

const number = 0;
console.log(number || 100); // 100
console.log(number ?? 100); // 0

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

这等价于以下表达式，但实际上没有创建临时变量：

1 2	let temp = obj.first; let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);注意：可选链不能用于赋值

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment；

短路计算

当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算，例如：

1 2 3 4 5

let potentiallyNullObj = null; let x = 0; let prop = potentiallyNullObj?.[x++]; console.log(x); // x 将不会被递增，依旧输出 0