使用 Optional Chaining 做數據防御

zhonghanwen 發布于2019-08-22 17:15 / 1157人閱讀

摘要：如果大家閱讀過我之前寫的一篇關于解構的文章，那一定會了解到解構達到數據防御功能，那么本文要介紹的是另一種數據防御方式可選鏈。什么是允許我們檢查對象是否存在，然后才試圖訪問它的屬性。如何使用目前在階段。

如果大家閱讀過我之前寫的一篇關于ES6解構的文章，那一定會了解到解構達到數據防御功能，那么本文要介紹的是另一種數據防御方式Optional Chaining（可選鏈）。

什么是Optional Chaining

Optional Chaining允許我們檢查對象是否存在，然后才試圖訪問它的屬性。其他編譯語言也有類似的功能，如C#的 Null-conditional operator。

為什么我們需要Optional Chaining

在訪問對象或數組之前，您是否曾經檢查過它的屬性？如果你不檢查，你可能會遇到以下問題：

if (a && a.b && a.b.length > 0) {
    console.log("666");
}

之所以執行這些檢查，是因為 JavaScript的對象不需要事先聲明結構或schema。因此，如果不判斷他的父級是否為一個對象就開始訪問其屬性可能會遇到錯誤：

當b為undefined時就報錯了。

Optional Chaining 可以解決什么問題呢？

如果使用 Optional Chaining ，代碼竟然可以如此簡潔：

if (a?.b?.length > 0) {
    console.log("666");
}

怎么樣？告別了繁瑣各種 & 和各種層層檢查，這又是一股清流。
但是，請記住可選的鏈接操作符是?.不是? 這意味著當你訪問數組其中一個元素時，應該這樣：

const firstItem = a?.b?.[0]; // right
const firstItem = a?.b?[0]; // wrong

同樣地，如果你要訪問一個函數時，應該這樣：

const execFunc = a?.func?.(); // right
const execFunc = a?.func?(); // wrong

更多玩法

除了數據防御，Optional Chaining 還可以使用在更多的場景中：
判斷并執行函數

a?.();
// 等價于
a == null ? undefined : a();
// 等價于
a && a();

條件執行

a?.[++x];
// 等價于
a == null ? undefined : a[++x];

a?.b.c(++x).d;
// 等價于
a == null ? undefined : a.b.c(++x).d;

更加復雜的嵌套

a?.b[3].c?.(x).d
// 等價于
a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d;
// 注：嵌套一出來無論怎么寫，感覺可讀性不強了，所以，別炫技。

也可以分組，可讀性更強

(a?.b).c;
// 等價于
(a == null ? undefined : a.b).c;

刪除對象中的屬性

delete a?.b
// 等價于
a == null ? undefined : delete a.b

Optional Chaining 是如何工作的？

?.先判斷他的Left-Hand-Side 是否是null或 undefined，如果是，那么此表達式短路并返回 undefined，否則，表達式依次類推執行到最后。

如何使用？

Optional Chaining目前在Stage 1階段。在使用之前，大家可以先到這里體驗一波: codepan
雖然目前Optional Chaining 是草案，但可以通過 Babel 插件 babel-plugin-syntax-optional-chaining 來嘗鮮。

參考資料

proposal-optional-chaining

云服務器 GPU云服務器 Chaining optional Optional鏈 Optional詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94993.html

精讀《Optional chaining》

摘要：由于具備一定的使用場景，而且支持方式零成本改寫為即可，所以就支持它吧不支持的特性下面三個特性不支持，原因是沒什么使用場景安全的安全的上面兩者的結合首先看一個對象，如果出來的結果是，那這個返回值使用起來也沒有意義。 1. 引言備受開發者喜愛的特性 Optional chaining 在 2019.6.5 進入了 stage2，讓我們詳細讀一下草案，了解一下這個特性的用法以及討論要點。 ...

cncoder 2019-08-23 18:09 評論0 收藏0
即將到來 Javascript 三個改變，你會很喜歡它們的，因為確實是方便了很多！

摘要：你將看到它們的語法時時關注它們的進展與更新。標準有個版本，個發布第個版本被放棄了。此建議的目的只是避免在起草建議被放棄或發生重大帶來的麻煩。如果使用過度，將導致性能下降。在這個場景中，數字和空字符串都被認為是假的。 showImg(https://segmentfault.com/img/bVbj2Az?w=2000&h=1333); 想閱讀更多優質文章請猛戳GitHub博客,一年百來...

tinysun1234 2019-08-23 13:40 評論0 收藏0
[Frontend Tips] JS: Optional Chaining, 再也不怕一長串的屬性調

摘要：剛才看了下一個新特性，這是干啥用的呢過去在屬性鏈的調用中，很容易因為某個屬性不存在而導致之后出現的錯誤。要注意操作符是，而不是單獨的。類似的，如果需要取屬性鏈中某函數并執行，就應該是。剛才看了下一個 JS 新特性——「Optional Chaining」，這是干啥用的呢？過去在 Object 屬性鏈的調用中，很容易因為某個屬性不存在而導致之后出現Cannot read proper...

K_B_Z 2019-08-22 14:54 評論0 收藏0