这两行代码有什么不同，一个抛出错误，另一个没有？

问题描述

console.log("#1","a12312a".match(/^\d+/)?.[0].length);
console.log("#2",("a12312a".match(/^\d+/)?.[0]).length);

---

我在编写一些代码时偶然发现了一些我不明白的东西。在 Chrome 89.0.4389.128 (Official Build) (64-bit) 中，上面的代码给出了这个：

#1 undefined
Uncaught TypeError: Cannot read property 'length' of undefined

这两行在我看来是一样的："a12312a".match(/^\d+/)?.[0] 是一个 undefined，它们试图读取 length 的属性 undefined，它应该抛出一个 TypeError。但是第一行没有，而第二行有。

……为什么？我很困惑。我是否遗漏了一些非常基本的东西？

解决方法

.match 返回 null，因为模式不匹配。所以比较是

null?.[0].length

和

(null?.[0]).length

这应该会使流程更加清晰。对于 . 和 ?. 链，当它们从左到右求值时，如果在任何点左边的表达式是 null 或 {{1} }，链将停在那里并将整个事情评估为undefined。

但是，如果您通过将其中一个括在括号中来打破链条，您只会在括号内得到一个简单的表达式：

undefined

没有可选链的特殊机制。

可选链接仅沿着属性访问和函数调用的连续序列的函数。中间的任何其他运算符（例如分组括号）都会破坏链条。