資訊專欄INFORMATION COLUMN
摘要：如果大家閱讀過(guò)我之前寫(xiě)的一篇關(guān)于解構(gòu)的文章，那一定會(huì)了解到解構(gòu)達(dá)到數(shù)據(jù)防御功能，那么本文要介紹的是另一種數(shù)據(jù)防御方式可選鏈。什么是允許我們檢查對(duì)象是否存在，然后才試圖訪問(wèn)它的屬性。如何使用目前在階段。
如果大家閱讀過(guò)我之前寫(xiě)的一篇關(guān)于ES6解構(gòu)的文章，那一定會(huì)了解到解構(gòu)達(dá)到數(shù)據(jù)防御功能，那么本文要介紹的是另一種數(shù)據(jù)防御方式Optional Chaining（可選鏈）。
什么是Optional ChainingOptional Chaining允許我們檢查對(duì)象是否存在，然后才試圖訪問(wèn)它的屬性。其他編譯語(yǔ)言也有類似的功能，如C#的 Null-conditional operator。
為什么我們需要Optional Chaining在訪問(wèn)對(duì)象或數(shù)組之前，您是否曾經(jīng)檢查過(guò)它的屬性？如果你不檢查，你可能會(huì)遇到以下問(wèn)題：
if (a && a.b && a.b.length > 0) {
console.log("666");
}
之所以執(zhí)行這些檢查，是因?yàn)?JavaScript的對(duì)象不需要事先聲明結(jié)構(gòu)或schema。因此，如果不判斷他的父級(jí)是否為一個(gè)對(duì)象就開(kāi)始訪問(wèn)其屬性可能會(huì)遇到錯(cuò)誤：
當(dāng)b為undefined時(shí)就報(bào)錯(cuò)了。
如果使用 Optional Chaining ，代碼竟然可以如此簡(jiǎn)潔：
if (a?.b?.length > 0) {
console.log("666");
}
怎么樣？ 告別了繁瑣各種 & 和 各種層層檢查，這又是一股清流。
但是，請(qǐng)記住可選的鏈接操作符是?.不是? 這意味著當(dāng)你訪問(wèn)數(shù)組其中一個(gè)元素時(shí)，應(yīng)該這樣：
const firstItem = a?.b?.[0]; // right const firstItem = a?.b?[0]; // wrong
同樣地，如果你要訪問(wèn)一個(gè)函數(shù)時(shí)，應(yīng)該這樣：
const execFunc = a?.func?.(); // right const execFunc = a?.func?(); // wrong更多玩法
除了數(shù)據(jù)防御，Optional Chaining 還可以使用在更多的場(chǎng)景中：
判斷并執(zhí)行函數(shù)
a?.(); // 等價(jià)于 a == null ? undefined : a(); // 等價(jià)于 a && a();
條件執(zhí)行
a?.[++x]; // 等價(jià)于 a == null ? undefined : a[++x];
a?.b.c(++x).d; // 等價(jià)于 a == null ? undefined : a.b.c(++x).d;
更加復(fù)雜的嵌套
a?.b[3].c?.(x).d // 等價(jià)于 a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d; // 注：嵌套一出來(lái)無(wú)論怎么寫(xiě)，感覺(jué)可讀性不強(qiáng)了，所以，別炫技。
也可以分組，可讀性更強(qiáng)
(a?.b).c; // 等價(jià)于 (a == null ? undefined : a.b).c;
刪除對(duì)象中的屬性
delete a?.b // 等價(jià)于 a == null ? undefined : delete a.bOptional Chaining 是如何工作的？
?.先判斷他的Left-Hand-Side 是否是null或 undefined，如果是，那么此表達(dá)式短路并返回 undefined，否則，表達(dá)式依次類推執(zhí)行到最后。
如何使用？Optional Chaining目前在Stage 1階段。 在使用之前，大家可以先到這里體驗(yàn)一波: codepan
雖然目前Optional Chaining 是草案，但可以通過(guò) Babel 插件 babel-plugin-syntax-optional-chaining 來(lái)嘗鮮。
proposal-optional-chaining
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94993.html
摘要：由于具備一定的使用場(chǎng)景，而且支持方式零成本改寫(xiě)為即可，所以就支持它吧不支持的特性下面三個(gè)特性不支持，原因是沒(méi)什么使用場(chǎng)景安全的安全的上面兩者的結(jié)合首先看一個(gè)對(duì)象，如果出來(lái)的結(jié)果是，那這個(gè)返回值使用起來(lái)也沒(méi)有意義。 1. 引言 備受開(kāi)發(fā)者喜愛(ài)的特性 Optional chaining 在 2019.6.5 進(jìn)入了 stage2，讓我們?cè)敿?xì)讀一下草案，了解一下這個(gè)特性的用法以及討論要點(diǎn)。 ...
摘要：你將看到它們的語(yǔ)法時(shí)時(shí)關(guān)注它們的進(jìn)展與更新。標(biāo)準(zhǔn)有個(gè)版本，個(gè)發(fā)布第個(gè)版本被放棄了。此建議的目的只是避免在起草建議被放棄或發(fā)生重大帶來(lái)的麻煩。如果使用過(guò)度，將導(dǎo)致性能下降。在這個(gè)場(chǎng)景中，數(shù)字和空字符串都被認(rèn)為是假的。 showImg(https://segmentfault.com/img/bVbj2Az?w=2000&h=1333); 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)...
摘要：剛才看了下一個(gè)新特性，這是干啥用的呢過(guò)去在屬性鏈的調(diào)用中，很容易因?yàn)槟硞€(gè)屬性不存在而導(dǎo)致之后出現(xiàn)的錯(cuò)誤。要注意操作符是，而不是單獨(dú)的。類似的，如果需要取屬性鏈中某函數(shù)并執(zhí)行，就應(yīng)該是。 剛才看了下一個(gè) JS 新特性——「Optional Chaining」，這是干啥用的呢？ 過(guò)去在 Object 屬性鏈的調(diào)用中，很容易因?yàn)槟硞€(gè)屬性不存在而導(dǎo)致之后出現(xiàn)Cannot read proper...
閱讀 1080·2021-11-24 10:27
閱讀 3351·2021-11-18 10:02
閱讀 2408·2021-11-16 11:45
閱讀 3173·2021-11-15 18:10
閱讀 841·2021-09-22 15:23
閱讀 1544·2019-08-30 15:53
閱讀 3030·2019-08-30 13:20
閱讀 1678·2019-08-30 12:53
