控制台条件console.log始终触发问题排查（石头剪刀布游戏）

我正在开发一款可在控制台运行的简易石头剪刀布游戏，希望当玩家输入"rock"、"paper"、"scissors"之外的内容时，控制台输出"Invalid"提示。

我编写的判断语句如下：

if (playerSelection !== "rock", "paper", "scissors") {
    console.log("Invalid")
}

但这段代码会在所有情况下都触发console.log输出"Invalid"，无法定位问题所在。以下是完整代码：

//定义游戏选项数组
const getComputerChoice = ["rock", "paper", "scissors"]

//随机选择电脑的选项
const computerSelection = Math.floor(Math.random() * getComputerChoice.length);

//创建输入提示框并转为小写
const playerSelection = prompt("Rock, Paper, or Scissors?").toLowerCase();


//玩家选择rock的情况
if (playerSelection === "rock" && getComputerChoice[computerSelection] === "rock") {
    console.log("It's a tie!")
} else if (playerSelection === "rock" && getComputerChoice[computerSelection] === "paper") {
    console.log("You lose! Paper beats rock")
} else if (playerSelection === "rock" && getComputerChoice[computerSelection] === "scissors") {
    console.log("You win! Rock beats scissors")
}

//玩家选择paper的情况
if (playerSelection === "paper" && getComputerChoice[computerSelection] === "rock") {
    console.log("You win! Paper beats rock")
} else if (playerSelection === "paper" && getComputerChoice[computerSelection] === "paper") {
    console.log("It's a tie!")
} else if (playerSelection === "paper" && getComputerChoice[computerSelection] === "scissors") {
    console.log("You lose! Scissors beats paper")
}

//玩家选择scissors的情况
if (playerSelection === "scissors" && getComputerChoice[computerSelection] === "rock") {
    console.log("You lose! Rock beats scissors")
} else if (playerSelection === "scissors" && getComputerChoice[computerSelection] === "paper") {
    console.log("You win! Scissors beats paper")
} else if (playerSelection === "scissors" && getComputerChoice[computerSelection] === "scissors") {
    console.log("It's a tie!")
}

//玩家输入无效内容的判断
if (playerSelection !== "rock", "paper", "scissors") {
    console.log("Invalid")
}

你写的判断语句误用了逗号运算符，在JavaScript中，逗号运算符会依次执行每个表达式，最后返回最后一个表达式的值。所以playerSelection !== "rock", "paper", "scissors"实际上等价于最后一个值"scissors"，而字符串"scissors"在条件判断中会被转为布尔值true，导致这个if条件永远成立，不管玩家输入什么都会输出"Invalid"。

有两种简单的修正方式：

方式一：使用逻辑与（&&）连接多个不等判断 #

把无效判断改成：

if (playerSelection !== "rock" && playerSelection !== "paper" && playerSelection !== "scissors") {
    console.log("Invalid")
}

这里必须用逻辑与，因为需要同时满足“不等于rock”“不等于paper”“不等于scissors”三个条件，才判定为无效输入。

方式二：使用数组的includes()方法（更简洁） #

利用你已经定义的getComputerChoice数组，直接检查玩家输入是否不在数组中：

if (!getComputerChoice.includes(playerSelection)) {
    console.log("Invalid")
}

includes()方法会返回布尔值，表示数组是否包含指定元素，前面加!取反，就表示“不包含该元素”的情况。

1. 可以先判断输入是否有效，如果无效直接输出提示并终止后续代码，避免无效输入触发后面的胜负判断逻辑：

// 先判断无效输入
if (!getComputerChoice.includes(playerSelection)) {
    console.log("Invalid");
    // 终止后续代码执行
    return;
}

// 再执行胜负判断逻辑...

2. 胜负判断逻辑可以简化，不用写大量重复的if-else，比如先定义胜负规则对象，再通过规则匹配结果：

// 定义胜负规则：key是玩家选择，value是该选择能击败的选项
const winRules = {
    rock: "scissors",
    paper: "rock",
    scissors: "paper"
};

const computerChoice = getComputerChoice[computerSelection];

if (playerSelection === computerChoice) {
    console.log("It's a tie!");
} else if (winRules[playerSelection] === computerChoice) {
    console.log(`You win! ${playerSelection.charAt(0).toUpperCase() + playerSelection.slice(1)} beats ${computerChoice}`);
} else {
    console.log(`You lose! ${computerChoice.charAt(0).toUpperCase() + computerChoice.slice(1)} beats ${playerSelection}`);
}

这样代码会更简洁易维护。

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