在日常開發(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{csvfkxli}}中d是否存在,只需
a?.b?.c?.d
三種使用場(chǎng)景,靜態(tài)調(diào)用、動(dòng)態(tài)調(diào)用、函數(shù)調(diào)用。