JavaScript中!=与||运算符搭配使用时的逻辑混淆问题

1. ||（逻辑或）的规则是只要任意一个条件为真，整体结果就为真。你编写的判断条件choice != 'rock' || choice != 'paper' || choice != 'scissors'是一个恒真表达式，无论用户输入什么值都会触发if分支：
   • 若用户输入合法的rock：此时choice != 'paper'和choice != 'scissors'都为真，整个条件成立
   • 若用户输入非法值比如apple：三个条件都为真，条件同样成立
2. 你原来的else分支也错误写了return userChoice()，就算判断逻辑修复后也会出现无限递归的问题。

方案1：把||替换为&&（逻辑与） #

逻辑与的规则是所有条件都为真时，整体结果才为真，刚好匹配「输入既不是rock、也不是paper、也不是scissors」的无效输入判断规则，同时修正else分支的递归问题：

function userChoice() {
  let choice = prompt('Choose rock, paper, or scissors.', 'rock')
  // 加可选链避免用户点取消返回null时调用toLowerCase报错
  choice = choice?.toLowerCase()
  // 仅当三个条件都满足时才判定为无效输入
  if (choice != 'rock' && choice != 'paper' && choice != 'scissors') {
    alert('Please choose a valid choice.')
    return userChoice();
  } else {
    console.log(`Player1 chooses ${choice}`)
    // 直接返回用户选择的结果，不要重复调用自身
    return choice
  }
}

方案2：用数组包含判断简化逻辑 #

后续需要新增合法选项时只需要修改数组即可，不需要堆叠多个判断条件：

function userChoice() {
  const validChoices = ['rock', 'paper', 'scissors']
  let choice = prompt('Choose rock, paper, or scissors.', 'rock')?.toLowerCase()
  if (!validChoices.includes(choice)) {
    alert('Please choose a valid choice.')
    return userChoice();
  }
  console.log(`Player1 chooses ${choice}`)
  return choice
}

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