使用 Optional Chaining 作數據防護

若是你們閱讀過我以前寫的一篇關於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