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

Question

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

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

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

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

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

Answer 1

But now my code is not working correctly in this case. The code entersif statement even when obj is undefined.

这主要是因为运算符的优先级。可选 channel (?.) 优先级高于 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 不是未定义的。