精读《Optional chaining》

摘要：由于具备一定的使用场景，而且支持方式零成本改写为即可，所以就支持它吧不支持的特性下面三个特性不支持，原因是没什么使用场景安全的安全的上面两者的结合首先看一个对象，如果出来的结果是，那这个返回值使用起来也没有意义。

备受开发者喜爱的特性 Optional chaining 在 2019.6.5 进入了 stage2，让我们详细读一下草案，了解一下这个特性的用法以及讨论要点。

借着这次精读草案，让我们了解一下一个完整草案的标准文档结构是怎样的。

一个新特性的文档，首先要描述 起因 是什么，也就是为什么要增加这个特性，大家不会没有理由的就增加一个特性。其次是其他语言是否有现成的实现版本，参考他们并进行归纳总结，可以增加思考角度的全面性。

第三点就是 语法介绍，也就进入了新特性的正题，这里要详细介绍所有可能的使用情况。第四点是 语义，也就是诠释语法的含义。

然后是可选的 是否有不支持的情况，对于不支持的点是否有意而为之，为什么？此处一般会留下讨论的 ISSUE。然后是 暂不考虑的点，是由于性价比低、使用场景少，或者实现成本高的原因，为什么某些已经想到的点暂不考虑，这里也会留下讨论的 ISSUE。

后面一般还有 “正在讨论的点”、“FAQ”、“草案进度”、“参考文献”、“相关问题”、“预先讨论资料” 等内容。

首先让我们回顾一下什么是 “Optional chaining”。

当访问一个深层树形结构的对象时，我们总需要判断中间节点属性是否存在：

var street = user.address && user.address.street;

而且很多 API 返回的属性都可能为 Null，而我们往往只想获取非 Null 时的结果：

var fooInput = myForm.querySelector("input[name=foo]")
var fooValue = fooInput ? fooInput.value : undefined

笔者这里补充，在人机交互的领域，可能为 Null 的情况很多。首先是交互行为模块很多，行为复杂，很容易导致数据分散且难以预测（可能为空），仅是 DOM 元素就需要太多兼容，因为 DOM 被修改的实际太多了，大家都在共享一个可变的结构；其次是交互过程中间状态很多，出现状态残缺的可能性也很大，就拿 SQL 解析为例：后端只要检测 Query 是否正确就可以了，但前端的 SQL 编辑器需要在输入不完整的情况下给出提示，也就是在语法树错误的情况下给出提示，因此需要进行容错。

而 Optional chaining 可以解决为了容错而写过多重复代码的问题：

var street = user.address?.street
var fooValue = myForm.querySelector("input[name=foo]")?.value

正如上面的例子：如果 user.address 为 undefined，那 street 拿到的就是 undefined，而不是报错。

配合另一个在 stage2 的新特性 Nullish Coalescing 做默认值处理非常方便：

// falls back to a default value when response.setting is missing or nullish
// (response.settings == null) or when respsonse.setting.animationDuration is missing
// or nullish (response.settings.animationDuration == null)
const animationDuration = response.settings?.animationDuration ?? 300;

?? 号可以理解为 “默认值场景下的 ||”：

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: "",
    showSplashScreen: false
  }
};

const undefinedValue = response.settings?.undefinedValue ?? "some other default"; // result: "some other default"
const nullValue = response.settings?.nullValue ?? "some other default"; // result: "some other default"
const headerText = response.settings?.headerText ?? "Hello, world!"; // result: ""
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false

0 || 1 的结果是 1，因为 0 判定为 false，而 || 在前面的变量为 false 型才继续执行，而我们想要的是 “前面的对象不存在时才使用后面的值”。?? 则代表了 “前面的对象不存在” 这个含义，即便值为 0 也会认为这个值是存在的。

Optional chaining 也可以用在方法上：

iterator.return?.()

或者试图调用某些未被实现的方法：

if (myForm.checkValidity?.() === false) { // skip the test in older web browsers
    // form validation fails
    return;
}

比如某个旧版本浏览器不支持 myForm.checkValidity 方法，则不会报错，而是返回 false。

Optional chaining 在 C#、Swift、CoffeeScript、Kotlin、Dart、Ruby、Groovy 已经实现了，且实现方式均有差异，可以看到每个语言在实现语法时都是有取舍的，但是大方向基本是相同的。

想了解其他语言是如何实现 Optional chaining 的读者可以 点击阅读原文。

这些语言实现 Optional chaining 的差异基本在 语法、支持范围、边界情况处理 等不同，所以如果你每天要在不同语言之间切换工作，看似相同的语法，但不同的细节可能把你绕晕（所以会的语言多，只会让你变成一个速记字典，满脑子都是哪些语言在哪些语法讨论倾向哪一边，选择了哪些特性这些毫无意义的结论，如果不想记这些，基础语法都没有掌握怎么好意思说会这门语言呢？所以学 JS 就够了）。

Optional Chaining 的语法有三种使用场景：

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

也就是将 . 替换为 ?.，但要注意第二行与第三行稍稍有点反直觉，比如在函数调用时，需要将 func(...args) 写为 func?.(...args)。至于为什么语法不是 func?(...args) 这种简洁一点的表达方式，在 FAQ 中有提到这个例子：

obj?[expr].filter(fun):0 引擎难以判断 obj?[expr] 是 Optional Chaning，亦或这是一个普通的三元运算语句。

可见，要支持 ?. 这个看似简单的语法，在整个 JS 语法体系中要考虑的边界情况很多。

即便是 ?. 这样完整的用法，也需要注意 foo?.3:0 这种情况，不能将 foo?. 解析为 Optional chanining，而要将其解析为 foo? .3 : 0，这需要解析引擎支持 lookahead 特性。

当 ?. 前面的变量值为 null 或 undefined 时，?. 返回的结果为 undefined。

a?.b                          // undefined if `a` is null/undefined, `a.b` otherwise.
a == null ? undefined : a.b

a?.[x]                        // undefined if `a` is null/undefined, `a[x]` otherwise.
a == null ? undefined : a[x]

a?.b()                        // undefined if `a` is null/undefined
a == null ? undefined : a.b() // throws a TypeError if `a.b` is not a function
                              // otherwise, evaluates to `a.b()`

a?.()                        // undefined if `a` is null/undefined
a == null ? undefined : a()  // throws a TypeError if `a` is neither null/undefined, nor a function
                             // invokes the function `a` otherwise

所谓短路，就是指引入了 Optional chaining 后，某些看似一定会执行的语句在特定情况下会短路（终止执行），比如：

a?.[++x]         // `x` is incremented if and only if `a` is not null/undefined
a == null ? undefined : a[++x]

第一个例子，如果 a 时 null/undefined，就不会执行 ++x。

原因是这段代码部分等价于 a == null ? undefined : a[++x]，如果 a == null 为真，自然不会执行 a[++x] 这个语句。但由于 Optional chaining 使这个语句变得 “简洁了”，虽然带来了便利，但也可能导致看不清完整的执行逻辑，引发误判。

所以看到 ?. 语句时，一定要反射性的思考一下，这个语句会触发 “短路”。

Optional chaining 在 JS 的规范中，作用域仅限于调用处。看下面的例子：

a?.b.c(++x).d  // if `a` is null/undefined, evaluates to undefined. Variable `x` is not incremented.
               // otherwise, evaluates to `a.b.c(++x).d`.
a == null ? undefined : a.b.c(++x).d

可以看到 ?. 仅在 a?. 这一层生效，而不是对后续的 b.c、c(++x).d 继续生效。而对于 C+ 与 CoffeeScript，这个语法是对后续所有 get 生效的（这里再次提醒，不要用 CoffeeScript 了，因为对于相同语法，语义都发生了变化，对你与你的同事都是巨大的理解负担，或者说没有人愿意注意，为什么代码在 CoffeeScript 里不报错，而转移到 JS 就报错了，是因为 Optional chaining 语义不一致造成的。）。

正因为 Optional chaining 在 JS 语法中仅对当前位置起保护作用，因此一个调用语句中允许出现多个 ?. 调用：

a?.b[3].c?.(x).d
a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d
  // (as always, except that `a` and `a.b[3].c` are evaluated only once)

上面这段代码，对 a?.b、c?.(x) 的访问与调用是安全的，而对于 b[3]、 b[3].c、c?.(x).d 的调用是不安全的。

在 FAQ 环节也提到了，为什么不学习 C# 与 CoffeeScript 的语义，将安全保护从 a?. 之后就一路 “贯穿” 下去？

原因是 JS 对 Optional chaining 的理解不同导致的。Optional chaining 仅仅是安全访问保护，不代表 try catch，也就是它不会捕获异常，举一个例子：

a?.b()

这个调用，在 a.b 不是一个函数时依然会报错，原因就是 Optional chaining 仅提供了对属性访问的安全保护，不代表对整个执行过程进行安全保护，该抛出异常还是会抛出异常，因此 Optional chaining 没有必要对后面的属性访问安全性负责。

笔者认为 TC39 对这个属性的理解是合理的，否则用 try catch 就能代替 Optional chaining 了。让一个特性仅实现分内的功能，是每个前端从业者都要具备的思维能力。

PS：笔者再多提一句，在任何技术设计领域，这个概念都适用。想想你设计的功能，写过的函数，如果为了图方便，扩大了其功能，终究会带来整体设计的混乱，适得其反。

我们知道，JS 代码可以通过括号的方式进行分组，分组内的代码拥有更高的执行优先级。那么在 Optional chaining 场景下考虑这个情况：

(a?.b).c
(a == null ? undefined : a.b).c

与不带括号的进行对比：

a?.b.c
a == null ? undefined : a.b.c

我们会发现，由于括号提高了优先级，导致在 a 为 null/undefined 时，解析出了 undefined.c 这个必定报错的荒谬语法。因此我们不要试图为 Optional chaining 进行括号分组，这样会打破逻辑顺序，使安全保护不但不生效，反而导致报错。

中文大概可以翻译为 “安全删除” 吧，也就是 JS 的 Optional chaining 支持下面的使用方式：

delete a?.b
a == null ? true : delete a.b

这样不论 b 是否存在，得到的都是 b 删除成功的信号（返回值 true）。

至于为什么要支持 Optional delete，草案里也有提到，笔者认为非常有意思：

讨论重点应该是 “我们为什么不支持 Optional delete”，而不是 “我们为什么要支持 Optional delete”，有点像反证法的思路。由于 Optional delete 具备一定的使用场景，而且支持方式零成本（改写为 a == null ? true : delete a.b 即可），所以就支持它吧！

下面三个特性不支持，原因是没什么使用场景：

安全的 construction：new a?.()

安全的 template literal：a?.`string`

上面两者的结合：new a?.b(), a?.b`string`

首先看 new 一个对象，如果 new 出来的结果是 undefined，那这个返回值使用起来也没有意义。

对于第二个安全的 template literal 来说，比如下面的语法：

a?.b
`c`

会被解析为

a == null ? undefined : a.b`c`

那么对于下面这种翻译结果：

a == null ? undefined : a.b `c`

目前不会有人这么写代码，因为这种语法的使用场景一般都是 “前面的属性必定存在时的简化语法”，比如 styled-components 的：

div`
  width: 300px;
`

而如果解析为：

(a == null ? undefined : a?.b) `c`

则更不会有人愿意尝试这种写法，所以安全的 template literal 这种需求是不存在的，自然第三种需求也是不存在的。

下面一个不支持的特性，虽然有一定使用场景，但依然被否定的：

安全的赋值：a?.b = c

讨论 ISSUE

笔者总结一下，一共有这几种令人烦恼的地方，导致大家不想支持 安全赋值 特性：

短路特性导致的理解成本：

比如 a?.b = c()，如果 a 为 null/undefined，那么函数 c() 就不会被执行，这种语法太违背开发者的常识，如果支持这个特性带来的理解负担会很大。

连带考虑场景很多：

如果支持了这种看似简单的赋值场景，那么至少还有下面五种赋值场景需要考虑到：

简单赋值: a?.b = c

聚合赋值: a?.b += c, a?.b >>= c

自增，自减: a?.b++, --a?.b

解构赋值: { x: a?.b } = c, [ a?.b ] = c

for 循环中的临时赋值: for (a?.b in c), for (a?.b of c)

总和这几种考虑，支持安全赋值会带来更多灵活的用法，导致代码复杂度陡增（想想你的同事大量使用上面的后四种例子，你绝对想要找他决斗，因为这种写法和乱用 window 变量一样，在 JS 允许的框架内写出难以维护的逻辑，像是钻了法律的孔子），因此 TC39 决定不支持这种用法，从源头上杜绝被滥用。

以上不支持的功能点会在静态编译时被禁止，但以后也许会重新讨论。

另外对于 Class 的私有变量是否支持 a?.#b a?.#b() 还在讨论中，这取决于私有成员变量草案是否能最终落地。

目前有两个 Optional chaining 功能点暂不讨论，分别是 Optional spread 与 Optional destructuring

对于 Optional spread，建议是：

const arr = [...?listOne, ...?listTwo];
foo(...?args);

但由于可以结合 Nullish Coalescing 达到同样的效果：

foo(...args ?? [])

所以暂时不深入讨论，因为存在意义不大。

对于 Optional destructuring，建议是：

// const baz = obj?.foo?.bar?.baz; 
const { baz } = obj?.foo?.bar?;

也就是对于解构用法，在最后一个位置添加 ?，使其能安全的解构。

但由于基于这个特性会演变出太多的使用变体：

‪const {foo ?: {bar ?: {baz}}} = obj?

或者

const {
  foo?: {
    bar?: { baz }
  }
} = obj;

对开发者的理解成本压力较大，毕竟 Optional chaining 的出发点只是 ?. 这么简单。而且对于默认值，我们又有 ?? 语法可以快速满足，因此这个特性的讨论也被搁置了。

大部分 Q&A 在上面的解读都有提及，下面列出剩余的两个 Q&A：

原因是与三元运算符冲突了，思考下面的用法：

1.?foo : bar

在 js 中，1. 等价于 1，那么这就是一个标准的三元运算表达式，因此 .? 语法会产生歧义，只能选择 ?.。

由于 . 表达式不关心 . 前面对象的类型，因为它的目的是访问 . 后面的属性，因此不会因为 null?.b 就返回 null，而是统一返回 undefined。

最后，需要 TC39 最终审核后，Optional chaining 才能进入 Stage3，我们拭目以待吧！

写一篇 JS 特性草案的完整解读真的很累，以后也许很少有机会这么完整的解读草案了，但希望借着这次解读 Optional chaining 的机会，让大家理解 TC39 是如何制定草案的，草案都在讨论什么，怎么讨论的，流程有哪些。

同时，还希望让大家意识到，为一个语言添加一个看似简单的新特性有多么的不容易，一个简单的 ?. 语法就牵涉到与三元运算符、分组、解构等等已存在语法的交织与冲突，所以想要安全又妥当的添加一个新特性，参与讨论的人必须对 JS 语言有完整全面的理解，同时也要对边界情况考虑的很周全，懂得对语法融会贯通。

最后，希望大家可以意识到，JS 这么重量级的语言，一个新的语法特性其实也是这么三言两语讨论下来的，其中不乏有一些拍脑袋的地方、对于“即可也可”的情况，稍稍结合一些具体案例就定下来其中一种的现象也是存在的，甚至对于某些规范点根本不存在一个完美的 “真理”，比如为什么语法是 ?. 而不是 a&.b（Ruby 使用的就是 &.），认清了这种情况存在，就不会执着于 “语法的学习”，而转向更底层，更有用的 “语义的学习”，并能通过阅读 TC39 的草案了解其他语言的实现差异，从而快速掌握其他语言的语法。

讨论地址是：精读《Optional chaining》 · Issue #165 · dt-fe/weekly

如果你想参与讨论，请 点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号