使用 Optional Chaining 做数据防御

zhonghanwen 发布于2019-08-22 17:15 / 1140人阅读

摘要：如果大家阅读过我之前写的一篇关于解构的文章，那一定会了解到解构达到数据防御功能，那么本文要介绍的是另一种数据防御方式可选链。什么是允许我们检查对象是否存在，然后才试图访问它的属性。如何使用目前在阶段。

如果大家阅读过我之前写的一篇关于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详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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