在日常開發(fā)中有時(shí)會(huì)碰到這種情況，我們需要判斷一個(gè)較深層次的對(duì)象屬性是否存在。用普通的if方法，需要逐個(gè)判斷中間節(jié)點(diǎn)是否有效，代碼會(huì)比較繁瑣，和顯得很蠢，而Optional Chaining可以幫助我們用一句代碼解決。

可選鏈?zhǔn)?code>Js的新動(dòng)態(tài)，有希望被加入到ECMAScript中去。

一種可以在當(dāng)前值可能為null的可選值上請(qǐng)求和調(diào)用屬性、方法及下標(biāo)的方法。
接下來介紹一下它的使用方法，使用前需先安裝配置

1.安裝配置

安裝

yarn add @babel/plugin-proposal-optional-chaining --dev

配置 .babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

2.需求場(chǎng)景

在項(xiàng)目中，經(jīng)常會(huì)遇到對(duì)象的屬性鏈訪問，很容易因?yàn)橐粋€(gè)屬性不存在出現(xiàn)Cannot read property 'xxx' of undefined的問題。Optional Chaining就解決了這一問題。

它會(huì)先判斷前面的值, 如果 undefined 或者 null, 就結(jié)束后面的調(diào)用, 直接返回 undefined。

3.使用方法

?. 操作符

a?.b
//相當(dāng)于
a == null ? undefined : a.b
//先判斷前面的值, 如果 undefined 或者 null, 就結(jié)束后面的調(diào)用, 直接返回 undefined

日常使用中再也不用用if一層一層的逐個(gè)判斷中間節(jié)點(diǎn)是否有效，例如想要看a{b{cu0z1t8os}}中d是否存在，只需

a?.b?.c?.d

三種使用場(chǎng)景，靜態(tài)調(diào)用、動(dòng)態(tài)調(diào)用、函數(shù)調(diào)用。