這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)可選鏈操作符(?.)的示例分析，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站開(kāi)發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),響應(yīng)式網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:18982081108

什么是可選鏈操作符(?.)

可選鏈操作符(?.)允許讀取位于連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。

比如，思考一個(gè)存在嵌套結(jié)構(gòu)的對(duì)象 obj。不使用可選鏈的話，查找一個(gè)深度嵌套的子屬性時(shí)，需要驗(yàn)證之間的引用，例如：

let nestedProp = obj.first && obj.first.second;

為了避免報(bào)錯(cuò)，在訪問(wèn)obj.first.second之前，要保證 obj.first 的值既不是 null，也不是 undefined。

如果只是直接訪問(wèn) obj.first.second，而不對(duì) obj.first 進(jìn)行校驗(yàn)，則有可能拋出錯(cuò)誤。

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

let nestedProp = obj.first?.second;

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

let temp = obj.first; let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

?. 操作符的功能類似于 . 鏈?zhǔn)讲僮鞣?，不同之處在于?/p>

在引用為空(nullish) (null 或者 undefined) 的情況下不會(huì)引起錯(cuò)誤，該表達(dá)式短路返回值是: undefined。

與函數(shù)調(diào)用一起使用時(shí)，如果給定的函數(shù)不存在，則返回 undefined。

當(dāng)嘗試訪問(wèn)可能不存在的對(duì)象屬性時(shí)，使用可選鏈操作符將會(huì)使表達(dá)式更短、更簡(jiǎn)明。

有兩點(diǎn)需要我們留意：

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

let result = someInterface.customMethod?.();

如果 someInterface 自身是 null 或者 undefined ，異常 TypeError 仍會(huì)被拋出。

如果你希望允許 someInterface 也為 null 或者 undefined，那么你需要像這樣寫  someInterface?.customMethod?.()

可選鏈不能用于賦值

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

如何啟用這個(gè)功能

// install npm install --save-dev @babel/plugin-proposal-optional-chaining  // babel config {  "plugins": [     "@babel/plugin-proposal-optional-chaining" //可選鏈     "@babel/plugin-proposal-nullish-coalescing-operator", //雙問(wèn)號(hào)   ] }

可選鏈操作符(?.) 是如何工作的

const a = {   b: 1 };  console.log(a?.b);

會(huì)被轉(zhuǎn)換成：

const a = {   b: 1 };  console.log(a === null ? void 0 : a.b);

 

如果層級(jí)更深， 會(huì)創(chuàng)建臨時(shí)變量用于記錄：

const a = {   b: {     c: 1,     d: 2,   } };  console.log(a?.b?.c)

會(huì)被轉(zhuǎn)換成：

var _a$b;  const a = {   b: {     c: 1,     d: 2   } }; console.log(   a === null || a === void 0     ? void 0      : (_a$b = a.b) === null || _a$b === void 0       ? void 0       : _a$b.c );

 

Heny發(fā)布的相關(guān)些資料

Heny 目前是 babel 項(xiàng)目的負(fù)責(zé)人，之前發(fā)過(guò)一片介紹當(dāng)前 babel 困境的文章: 知名團(tuán)開(kāi)源項(xiàng)目存活有多難?被數(shù)百萬(wàn)人使用的 Babel  陷入財(cái)務(wù)困境

上述就是小編為大家分享的可選鏈操作符(?.)的示例分析了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：可選鏈操作符(?.)的示例分析
標(biāo)題URL：http://aaarwkj.com/article32/psoisc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、小程序開(kāi)發(fā)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)