Hello，大家好，我是 Sunday。

昨天，幫一位同學(xué)看了一個(gè) bug ，代碼大概是這樣的：

偽代碼

然后得到了以下的錯(cuò)誤：

圖片

有經(jīng)驗(yàn)的同學(xué)都知道，這個(gè)錯(cuò)誤是由于 user 中的 priv 是 undefined，所以從 priv 中獲取 idCard 的時(shí)候，拋出了 Cannot read properties of undefined (reading 'idCard') 的錯(cuò)誤。

而想要解決這個(gè)問題，其實(shí)非常簡單，只需要進(jìn)行一個(gè)判空就可以，所以我?guī)退麑懴铝诉@樣的代碼：

圖片

接下來該同學(xué)就問了我一個(gè)問題：“老師，這個(gè) ? 是什么意思？為什么這樣就不報(bào)錯(cuò)了？”

這應(yīng)該不是一個(gè)個(gè)例，我印象中有很多同學(xué)問到過這個(gè)問題，所以咱們今天就一口氣把 3 個(gè)常見的提效操作符（?.、??、??=），分享給大家，幫大家大幅提升開發(fā)效率。

1.可選鏈操作符 (?.)

可選鏈運(yùn)算符（?.）允許讀取位于連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效（是否為 undefined || null）。這也是為什么在上述的描述中，添加了 ?. 之后就不會(huì)報(bào)錯(cuò)的原因。

咱們以下面的這段代碼為例：

// mdn 示例：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

const dogName = adventurer.dog?.name; // 可以簡單理解為 adventurer.dog ? adventurer.dog.name : undefined
console.log(dogName); // undefined

使用場景： 當(dāng)我們 不確定 一個(gè)對(duì)象是否存在時(shí)，調(diào)用對(duì)象屬性，可以使用該操作符。

2.空值合并操作符（??）

空值合并運(yùn)算符（??）是一個(gè)邏輯運(yùn)算符，當(dāng)左側(cè)的操作數(shù)為 null 或者 undefined 時(shí)，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。

以下面這段代碼為例：

// mdn 示例：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
const foo = null ?? 'default string';
console.log(foo); // "default string"

有點(diǎn)類似與 ||（邏輯或），與邏輯或的區(qū)別在于 ?? 操作符對(duì) 0 和 '' 會(huì)判斷為真。

比如：

const baz = 0 ?? 42;
console.log(baz); // 0。因?yàn)?0 在 ?? 中被判斷為 真
----
const baz = 0 || 42;
console.log(baz); // 42。因?yàn)?0 在 || 中被判斷為 假

使用場景： 當(dāng)需要把 0 或 '' 作為 真 時(shí)，使用 ?? ，否則使用 ||

3.邏輯空賦值（??=）

邏輯空賦值運(yùn)算符（x ??= y）僅在 x 是空值（null 或 undefined）時(shí)對(duì)其賦值。以下面這段代碼為例：

// mdn 示例：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment

const a = { duration: 50 };

a.duration ??= 10; // a.duration 存在，所以 不賦值
console.log(a.duration); //  50 

a.speed ??= 25; // a.speed 不存在，所以 賦值
console.log(a.speed); // 25

這個(gè)在某些場景下非常有用，比如 為定時(shí)器賦值時(shí)：

let timer = null

function start () {
  // if (!timer) {
  //   timer = setInterval(() => { ... })
  // }

  timer ??= setInterval(() => { ... })
}

使用場景： 當(dāng)你需要通過 if 判斷某個(gè)變量不存在時(shí)，才需要為該變量賦值時(shí)使用。