短路代替三元运算符

Question

尝试学习短路并做一些作业。有以下代码

game.odds.team1 < game.odds.team2 && `${game.team1} is more likely to win` || `${game.team2} is more likely to win`

我的理解是 && 运算符将左侧视为表达式的一部分，将整个右侧视为第二部分。所以我不太明白为什么最后会返回{game.team2}....。

你能帮我澄清一下吗？

附：更准确地说，上面的代码运行良好，并且完成了它必须做的事情，但我很难理解它是如何工作的以及为什么会这样工作。

Answer 1

这段代码的问题是有三个部分可以改变结果。

a < b && c || d
^^^^^    ^    ^

此答案采用术语truthy 和falsy，尤其是对于部分c 和d。

如果a < b的第一个条件是true，则只要c为真，就需要c。如果没有，则需要d。

如果第一个条件是false，则取d，因为短路了&&。

为了更好地理解，这里有一张真相表。 （- 表示值无关紧要）：

a < b	c	d	result
true	truthy	-	c
true	falsy	d	d
false	-	d	d

Answer 2

我的理解是 && 运算符将左侧视为表达式的一部分，将整个右侧视为第二部分

不，它没有。 && 比 || 有一个 higher precedence。它被解析为

((game.odds.team1 < game.odds.team2) && `${game.team1} is more likely to win`) || `${game.team2} is more likely to win`

但是，是的，虽然这是一个很好的练习，但您绝对应该为此使用 ?: 条件运算符 :-) 除了表现力之外，另一个原因是 c ? t : e 并不总是等于 c && t || e。你能弄清楚t 的值可能是什么吗？

Answer 3

编辑：根据您的问题，之前的解决方案已被删除

由于您只需要了解逻辑运算符的短路评估是如何工作的，所以我将添加以下说明：

I - 关键点：

1- 逻辑与运算符&& 返回第一个假值，如果所有操作数都被求值，则返回最后一个。

2-逻辑或运算符||返回第一个真值，如果所有操作数都被求值，则返回最后一个。

3- AND && 运算符的优先级高于 OR ||

4-检查JS运算符优先级的table list

在您的示例中，逻辑 OR 的两个操作数（参数）都是真值（字符串）。

II - 示例：

从您的代码开始，让我们考虑这个值对象：

const game = {
    odds: {
        team1: 10,
        team2: 3
    }
}

const winner = game.odds.team1 < game.odds.team2 && `$team1 is more likely to win` || `team2 is more likely to win`
console.log(winner)

在这里，winner 将分配给最后一个操作数。但为什么？让我们分解逻辑（记住关键点）：

1- game.odds.team1 < game.odds.team2 是 false 和 $team1 is more likely to win 是真值，因为它是一个字符串，那么 && 将返回第一个假值。

2- game.odds.team1 < game.odds.team2 返回（仍然为假）。现在用team2 is more likely to win 进行评估，这是一个真实的字符串。

3- 逻辑或返回第一个真值，因此team2 is more likely to win 被分配给winner。

我希望现在很清楚