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

Question

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，他们正在尝试读取undefined 的属性length，它应该抛出一个TypeError。但是第一行没有，而第二行有。

……为什么？我糊涂了。我错过了一些非常基本的东西吗？

Answer 1

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

null?.[0].length

和

(null?.[0]).length

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

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

(undefined).length

没有可选链的特殊机制。

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