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

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]is an undefined，并且他们正在尝试读取应该抛出 alength的属性。但是第一行没有，而第二行没有。undefinedTypeError

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

score 6 · Accepted Answer

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

null?.[0].length

和

(null?.[0]).length

这应该使过程更清晰。使用.and?.链，当它们从左到右求值时，如果在任何时候左边的表达式是nullor undefined，链将停在那里并将整个事物求值为undefined。

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

(undefined).length

没有可选链的特殊机制。

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

1 回答 1