为什么JavaScript的逻辑与运算符（&&）和if条件语句不一样？

Question

我已经从事JavaScript开发很长时间了，多年来我一直认为可以使用逻辑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) 一样工作？

- DaKaZ

---

你希望看到什么行为？在我看来，所有这些看起来都是正确的。如果问题是 undefined，许多 JS repl 在你提供一个不返回值的语句（例如 if 语句）时会打印出 undefined。 - y2bd

它完全按照我预期的方式工作。你预期的是什么？ - Michael

值0不等于True。a && console.log(a)是一行代码，它的意思是：if (a==true) { console.log(a) }...请查看此答案https://dev59.com/pm035IYBdhLWcg3wSN4G#5515349 - Chamov

falsey && val 的结果为 falsey。truthy && val 的结果为 val。你期望得到什么结果？为什么？ - user5734311

为什么 a && console.log(a) 不等同于 if (a) console.log(a)？ - DaKaZ

因为一个是表达式，另一个是语句。var result = a && console.log(a) 的意思很清楚。但是 var result = if (a) console.log(a) 就不太对了。所以你为什么希望这两者表现出相同的行为呢？ - user5734311

Answer 1

if(a) ... 是一个语句（statement）。a && ... 是一个表达式（expression）。

这种行为只适用于控制台。如果一行代码被评估为一个表达式，那么结果将被输出，否则，这被视为该行代码评估结果为 undefined。

a && ... 是一个短路求值。这意味着如果 a 为假值，则表达式的求值结果为 a。如果 a 为真值，则表达式的求值结果为 ...。

这并不影响它们在实际应用程序中的使用方式。如果评估结果未被使用，则无论是 if 还是短路求值都会以相同的方式进行操作，即仅在条件为真时才评估 ...。

- Estus Flask

---

哦，是的！答案是，如果它评估为falsey，则返回表达式的左侧。谢谢！ - DaKaZ

@DaKaZ 它并不总是返回左侧，它返回的是第一个假值。例如，true && "Hello World" && 0 && false 将会是 0。 - Tyler Roper

Answer 2

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

- Dmitry Dubovetsky

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的返回值。

- JJWesterkamp