为什么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

if(a) ...是声明。 a && ...是表达式。

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

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

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

Answer 2

!!运算符将变量转换为布尔值。 在您的情况下，a等于0，因此它将转换为false，因此，您看到false作为!!a && console.log(a)

的输出

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的值而是返回子表达式!!a的值，或false：

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

---

注意：如果a是一个 truthy 值，则第一条语句和第三条语句都将求值为undefined，即{{ 1}}。