学习short circuiting时，如何理解&&与||替代三元运算符的执行逻辑？

关于JS逻辑运算符的基础特性 #

JavaScript 中的 &&、|| 不会强制返回布尔值结果，而是直接返回运算过程中最后一个被求值的操作数的原始值，全程遵循短路规则：

• && 运算：从左到右依次求值，遇到第一个假值就立刻停止计算，直接返回该假值；如果所有操作数均为真值，就返回最右侧操作数的值。
• || 运算：从左到右依次求值，遇到第一个真值就立刻停止计算，直接返回该真值；如果所有操作数均为假值，就返回最右侧操作数的值。

原代码的实际运算顺序 #

JavaScript 中逻辑运算符的优先级为 && 高于 ||，因此原代码不会按平铺顺序逐段运算，会按照优先级自动按以下带括号的结构执行：

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

具体执行分支 #

1. 先计算括号内 && 部分的左侧比较表达式 game.odds.team1 < game.odds.team2
   • 若该表达式结果为假值（即 team1 赔率不低于 team2 的场景）：&& 触发短路，完全跳过右侧的模板字符串拼接，直接将该假值作为括号部分的返回值。此时 || 的左侧为假值，按照 || 的短路规则，会直接返回右侧的 ${game.team2} is more likely to win，也就是你观察到的返回 team2 相关文本的场景。
   • 若该表达式结果为真值（即 team1 赔率低于 team2 的场景）：&& 继续求值右侧的模板字符串，将这个非空字符串作为括号部分的返回值。此时 || 的左侧为真值，按照 || 的短路规则，会直接返回这个真值，也就是 team1 获胜概率更高的文本。

等价直观写法 #

这段短路代码的运行逻辑和标准三元条件表达式完全等价，可读性更强：

game.odds.team1 < game.odds.team2 
  ? `${game.team1} is more likely to win` 
  : `${game.team2} is more likely to win`

内容的提问来源于stack exchange，提问作者vdmclcv