javascript - 可选链接在 if 语句中使用时会导致意外结果

Question

我在代码中有一个 if 语句，它检查是否定义了一个对象，然后检查它的一个属性是否相等。我的 if 语句是这样的：

if(obj && obj.a !== x) { // do something }

但是现在我使用了可选链接并将我的 if 语句更改为：

if(obj?.a !== x) { // do something }

但是现在我的代码在这种情况下无法正常工作。即使 obj 未定义，代码也会进入 if 语句。请有人解释为什么会这样？

Answer 1

但是现在我的代码在这种情况下无法正常工作。即使 obj 未定义，代码也会进入 if 语句。

这主要是因为运算符的优先级。可选 channing (?.)比 And (&&)运算符和严格不等式运算符(!==)具有更高的优先级。

让我解释一下这两种情况：

Case 1: if(obj && obj.a !== x) { // do something }

在这里，&&的优先级低于!==。所以这个比较可以等价于或写成：

if(obj && (obj.a !== x)){// do something} 

在这里，如果 obj 为 falsy 或 nullish，则永远不会执行条件。

Case 2: if(obj?.a !== x) { // do something }

在这里，？。优先级高于!==。所以这是比较可能相当于：

if((obj && obj.a) !== x) { // do something }

所以在这种情况下，如果 obj 为空，我们将始终在 if 语句中输入，直到 x 不是未定义的。