无效合并和三元的运算符优先级答案

【问题标题】：Operator precedence of nullish coalescing and ternary无效合并和三元的运算符优先级
【发布时间】：2021-08-07 00:56:15
【问题描述】：

有人可以解释为什么result 在此语句中的计算结果为20？

let result = 10 ?? true ? 20 : 30;

鉴于 nullish 合并以从左到右的方式评估语句并且 precedence 高于三元运算符，为什么不假设 result 应该是 10 是安全的？

注意：如果添加了分组运算符，则result 为10。

let result = 10 ?? (true ? 20 : 30);

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
“为什么安全” 您自己给出了答案：“nullish coalescing 以从左到右的方式评估语句，优先级高于三元运算符”。这意味着您的第一个表达式等同于(10 ?? true) ? 20 : 30。就像* 的优先级高于+：1 * 2 + 3 === (1 * 2) + 3

标签： javascript operators

【解决方案1】：

据我了解，nullish coalescing operator (??) 的 operator presedence 比 conditional (ternary) operator 高，所以它应该首先执行。

（docs 表示 ?? 运算符的运算符优先级得分为 5，而 ... ? ... : ... 的得分为 4。）

所以

let result = 10 ?? true ? 20 : 30;

基本上评估为

let result = (10 ?? true) ? 20 : 30; // => 10 ? 20 : 30

鉴于 10 是 truthy 值，它 (10 ? 20 : 30) 的计算结果为 20

额外细节

您可能会注意到JavaScript table of operator presedence 中有一个“关联性” 列。

您可能想知道它是否在这种情况下起作用。但这个问题的答案似乎是它没有。这在以下引用中说明（来自文档）：

a OP1 b OP2 c ... 如果 OP1 和 OP2 的优先级不同（见下表），优先级最高的运算符优先和关联性无关紧要。

[相同但表述不同：]

当有多个具有相同优先级的运算符时，关联性的差异就会发挥作用。

Source

【讨论】：

啊，现在说得通了——谢谢你的解释！
@IliasT 很高兴它有帮助。没问题！ ^__^

【解决方案2】：

正如上面 blex 的评论中所述，该语句只是将合并操作减少到值 10，然后评估 10 ？ 20 : 30。由于 10 是真值，所以这里的三元运算会返回真值，即 20。

【讨论】：

【解决方案3】：

不会有结合无效合并和三元的情况。看看这个例子：

a ?? false ? 'foo' : 'bar'

如果a 为真，则a 被选中，'foo' 显然被返回。
如果a 为空，即null, undefined，则选择false，并返回'bar'。
如果a 是其他虚假值，即'', 0, false，则选择a。但是，a 在三元的角度仍然是 falsy，因此返回了 'bar'。
如果您想对条件语句进行无效检查，请改用：

a != null ? 'foo' : 'bar' // a is not null or undefined
!a && a != null ? 'bar' : 'foo' // a is not '', 0, or false. Does anyone really use this one?

【讨论】：