石头剪刀布JS代码出现undefined值，请求原因分析

问题描述 #

编写了一段实现石头剪刀布的JavaScript代码，运行时持续出现undefined值。代码逻辑为：用Math.random()生成0-0.99的随机数，乘以3后通过Math.floor()得到0、1、2，再用switch case生成电脑选择；同时编写了用户输入处理函数userChoice和胜负判断函数determineWinner。尝试将case值改为1、2、3，或把determineWinner的输入改为getComputerChoice，均未解决问题，需明确undefined的产生原因。

原代码如下：

const userChoice = (userInput) => {
  userInput = userInput.toLowerCase();
  if (
    userInput === "rock" ||
    userInput === "scissors" ||
    userInput === "paper"
  ) {
    return userInput;
  } else {
    console.log("Error, please type: rock, paper or scissors.");
  }
};

const getComputerChoice = () => {
  const randomNumber = Math.floor(Math.random() * 3);

  switch (randomNumber) {
    case 0:
      return "rock";
    case 1:
      return "paper";
    case 2:
      return "scissors";
  }
};


const determineWinner = (userChoice, computerChoice) => {
  if (userChoice === computerChoice) {
    return "This game is a tie!";
  }
};
if (userChoice === "rock") {
  if (computerChoice === "paper") {
    return "sorry, computer won!";
  } else {
    return "Congratulations, you won!";
  }
}

if (userChoice === "paper") {
  if (computerChoice === "scissors") {
    return "Sorry, computer won!";
  } else {
    return "Congratulations, you won!";
  }
}

if (userChoice === "scissors") {
  if (computerChoice === "paper") {
    return "Sorry, computer won!";
  } else {
    return "Congratulations, you won!";
  }
}



console.log(determineWinner("rock", "scissors"));
console.log(determineWinner("paper", "scissors"));

产生undefined的核心原因 #

• determineWinner函数结构错误：函数定义的闭合括号}提前结束，导致后续的胜负判断代码都在函数外部。此时函数仅处理了平局场景，非平局情况下函数没有返回值，JavaScript中无返回值的函数默认返回undefined，这是你看到的主要原因。
• userChoice函数存在无返回分支：当用户输入不符合要求时，函数仅打印错误提示但没有返回值，调用该函数会得到undefined。
• getComputerChoice的潜在风险：虽然Math.floor(Math.random()*3)只会生成0、1、2，但如果出现意外值（理论概率极低），switch没有default分支，函数会返回undefined。

修正后的代码 #

const userChoice = (userInput) => {
  userInput = userInput.toLowerCase();
  if (
    userInput === "rock" ||
    userInput === "scissors" ||
    userInput === "paper"
  ) {
    return userInput;
  } else {
    console.log("Error, please type: rock, paper or scissors.");
    // 添加返回值，避免undefined
    return null;
  }
};

const getComputerChoice = () => {
  const randomNumber = Math.floor(Math.random() * 3);

  switch (randomNumber) {
    case 0:
      return "rock";
    case 1:
      return "paper";
    case 2:
      return "scissors";
    // 添加default分支，覆盖极端情况
    default:
      return "rock";
  }
};


const determineWinner = (userChoice, computerChoice) => {
  if (userChoice === computerChoice) {
    return "This game is a tie!";
  }
  // 将胜负判断代码移到函数内部
  if (userChoice === "rock") {
    return computerChoice === "paper" ? "Sorry, computer won!" : "Congratulations, you won!";
  }

  if (userChoice === "paper") {
    return computerChoice === "scissors" ? "Sorry, computer won!" : "Congratulations, you won!";
  }

  if (userChoice === "scissors") {
    return computerChoice === "paper" ? "Congratulations, you won!" : "Sorry, computer won!";
  }
  // 处理无效用户输入的情况
  return "Invalid user choice!";
};

console.log(determineWinner("rock", "scissors")); // 输出Congratulations, you won!
console.log(determineWinner("paper", "scissors")); // 输出Sorry, computer won!

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