为什么 JavaScript 的逻辑 AND (&&) 与 if 条件的工作方式不同？

Question

我从事 JS 开发已有很长时间了，多年来我一直认为我可以使用逻辑 AND 来短路条件语句。事实上，我一直在使用条件渲染的 React 组件中执行此操作。但事实证明它并不总是像我期望的那样工作。问题是，为什么？

以下是 Node 8.15.0 的示例：

> a = 0.0
0
> a && console.log(a)
0
> if(a) console.log(a)
undefined
> !!a && console.log(a)
false

具体来说，为什么 a && console.log(a) 与 if (a) console.log(a)

的工作方式不同

Answer 1

!! 运算符将变量转换为布尔值。 在你的情况下 a 等于 0 所以它会将它转换为 false，因此你看到 false 作为 !!a && console.log(a)[=16= 的输出]

Answer 2

if(a) ... 是一个 语句 。 a && ... 是一个 表达式 .

此行为特定于控制台。如果一行计算为表达式，则输出结果，否则认为一行计算为 undefined.

a && ... 是一个 short-circuit。这意味着如果 a 为假，表达式的计算结果为 a。如果 a 为真，则表达式计算为 ....

这不会影响两者在实际应用程序中而不是在控制台中的使用方式。如果不使用评估结果，if 和短路评估的行为相同，即仅当条件为真时才评估 ...。

Answer 3

第一个表达式向控制台输出 1 行，这就是语句的计算结果：

a && console.log(a)
0

表达式的计算结果显然是 a 的值。那是因为这个 short circuit evaluation 可以被认为等同于以下条件三元：

a ? console.log(a) : a

第二个表达式 的计算结果为undefined，因为它不是一个实际的表达式，而是一个块结构。这次戴牙套：

if (a) { console.log(a) }
undefined

第三个表达式与第一个非常相似，只是这次不是 a 的值被 return 编辑，而是 return 的值子表达式 !!a，或 false:

!!a && console.log(a)
false

---

注意 如果 a 是 truthy 值，则第一个和第三个语句的计算结果将是 undefined，console.log 的 return 值。