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

Question

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

---

我在写一些代码时偶然发现了一些我不理解的东西。在Chrome 89.0.4389.128(官方版本((64位(中，上面的代码给出了以下内容：

#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

而没有可选链条的特殊机制。

可选的仅沿属性访问和函数调用的连续序列链接函数。介于两者之间的任何其他运算符(例如对圆括号进行分组(都会打断链。