今天給大家分享可選鏈運(yùn)算符（?.）

背景：

在 ES2020 之前，如果要訪問(wèn) JavaScript 中對(duì)象的嵌套屬性，則必須在每個(gè)級(jí)別檢查是否為 null 或 undefined，否則最終將會(huì)拋出 TypeError。

為了避免出現(xiàn) TypeError，我們將不得不創(chuàng)建臨時(shí)變量或執(zhí)行一系列增量 && 調(diào)用，這看起來(lái)很丑陋，并且同時(shí)占用了空間和時(shí)間。

例如：

在ES2020中，通過(guò)可選鏈運(yùn)算符??.?，現(xiàn)在我們就可以內(nèi)聯(lián)進(jìn)行這些檢查了。

官方定義：

可選鏈運(yùn)算符（?.）允許讀取位于連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。?. 運(yùn)算符的功能類似于 . 鏈?zhǔn)竭\(yùn)算符，不同之處在于，在引用為空?(nullish )?(null 或者 undefined)?的情況下不會(huì)引起錯(cuò)誤，該表達(dá)式短路返回值是 undefined。與函數(shù)調(diào)用一起使用時(shí)，如果給定的函數(shù)不存在，則返回 undefined。

mdn

語(yǔ)法:

描述

可選鏈與對(duì)象的引用

可選鏈運(yùn)算符之前，對(duì)象引用是為了避免出錯(cuò)，使用用&&來(lái)驗(yàn)證

有了可選鏈運(yùn)算符（?.），在訪問(wèn) obj.first.second 之前，不再需要明確地校驗(yàn) obj.first 的狀態(tài)，再并用短路計(jì)算獲取最終結(jié)果：

通過(guò)使用??.?運(yùn)算符取代?.?運(yùn)算符，JavaScript 會(huì)在嘗試訪問(wèn) obj.first.second 之前，先隱式地檢查并確定 obj.first 既不是 null 也不是 undefined。如果obj.first 是 null 或者 undefined，表達(dá)式將會(huì)短路計(jì)算直接返回 undefined。

這等價(jià)于以下表達(dá)式，但實(shí)際上沒有創(chuàng)建臨時(shí)變量：

可選鏈與函數(shù)調(diào)用

函數(shù)調(diào)用時(shí)如果被調(diào)用的方法不存在，使用可選鏈可以使表達(dá)式自動(dòng)返回undefined而不是拋出一個(gè)異常。

注：?如果存在一個(gè)屬性名且不是函數(shù)，使用 ?.?仍然會(huì)產(chǎn)生一個(gè) TypeError 異常?(x.y is not a function).

處理可選的回調(diào)函數(shù)或者事件處理器

使用?.的你可以忽略這些額外的校驗(yàn)

可選鏈和表達(dá)式

當(dāng)使用方括號(hào)與屬性名的形式來(lái)訪問(wèn)屬性時(shí)，你也可以使用可選鏈運(yùn)算符：

可選鏈不能用于賦值

可選鏈訪問(wèn)數(shù)組元素

基本例子

如下的例子在一個(gè)不含 bar 成員的 Map 中查找 bar 成員的 name 屬性，因此結(jié)果是 undefined。

短路計(jì)算

當(dāng)在表達(dá)式中使用可選鏈時(shí)，如果左操作數(shù)是 null 或 undefined，表達(dá)式將不會(huì)被計(jì)算，例如：

連用可選鏈運(yùn)算符

可以連續(xù)使用可選鏈讀取多層嵌套結(jié)構(gòu)：

使用空值合并運(yùn)算符

空值合并運(yùn)算符可以在使用可選鏈時(shí)設(shè)置一個(gè)默認(rèn)值：

茍有恒?,?何必三更眠五更起

關(guān)注我，一起學(xué)習(xí)吧