为什么JavaScript的逻辑AND（&&）与if条件运算符不同？

Question

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

这是节点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 && ...是短路 。 这意味着，如果a为假，则表达式的计算结果为a 。 如果a为真，则表达式的计算结果为...

这不会影响两者在实际应用程序中而非控制台中的使用方式。 如果不使用评估的结果，无论if短路评价;采取同样的方式，即评估...只有当条件为truthy。

Answer 2

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

Answer 3

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

a && console.log(a)
0

该表达式显然评估a的值。 这是因为可以将这种短路评估视为等效于以下条件三进制：

a ? console.log(a) : a

第二个表达式的计算结果为undefined因为它不是实际表达式，而是块构造。 这次用花括号：

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

第三个表达式与第一个表达式非常相似，除了这次不是返回a的值而是子表达式!!a或false ：

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

---

注意如果a将是一个真实值，则第一条语句和第三条语句都将评估为undefined ，即console.log的返回值。