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

Dear 丶 2022-09-16 01:27 142阅读 0赞

**双问号操作符**（`??`），也被称作**空值合并运算符**，当左侧的操作数为 `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`。

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>let</code>&nbsp;<code>temp = obj.first;</code></p> <p><code>let</code>&nbsp;<code>nestedProp = ((temp === </code><code>null</code>&nbsp;<code>|| temp === undefined) ? undefined : temp.second);注意：可选链不能用于赋值</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

### [短路计算][Link 1] ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>let</code>&nbsp;<code>potentiallyNullObj = </code><code>null</code><code>;</code></p> <p><code>let</code>&nbsp;<code>x = 0;</code></p> <p><code>let</code>&nbsp;<code>prop = potentiallyNullObj?.[x++];</code></p> <p></p> <p><code>console.log(x); </code><code>// x 将不会被递增，依旧输出 0</code></p> </td> 
  </tr> 
 </tbody> 
</table>

[nullish]: https://wiki.developer.mozilla.org/en-US/docs/Glossary/nullish
[null]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null
[undefined]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining#%E7%9F%AD%E8%B7%AF%E8%AE%A1%E7%AE%97