使用 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