JavaScript双switch分支函数仅返回单个字符串的问题及解决

我是编程及JavaScript新手，目前正在学校做测试。我编写了一个包含两个switch分支的函数，期望将card.value与card.suit转换后的字符串拼接后返回，但函数仅返回其中一个字符串：当第一个switch使用card.value时仅返回值转换结果，若改为switch(value)则仅返回花色转换结果。请问原因是什么？如何让函数返回如A♥这样的拼接结果？

原代码：

const prettyCard = function (card) {
  let suit, value

  switch (card.value) {
    case 1:
      return 'A';
      break;
    case 10:
      return 'T';
      break;
    case 11:
      return 'J';
      break;
    case 12:
      return 'Q';
      break;
    case 13:
      return 'K';
      break;
    case 2:
      return '2';
      break;
    case 3:
      return '3';
      break;
    case 4:
      return '4';
      break;
    case 5:
      return '5';
      break;
    case 6:
      return '6';
      break;
    case 7:
      return '7';
      break;
    case 8:
      return '8';
      break;
    case 9:
      return '9';
      break;
  }

  switch (card.suit) {
    case 'HEARTS':
      return '♥';
      break;
    case 'SPADES':
      return '♠';
      break;
    case 'DIAMONDS':
      return '♦';
      break;
    case 'CLUBS':
      return '♣';
      break;
  }
  return value + suit
}
console.log(prettyCard({ suit: 'HEARTS', value: 1 }))

原因分析 #

• 函数提前终止：每个switch的case里都用了return语句，return会立即结束函数并返回值，导致第一个switch执行后直接退出函数，第二个switch和最后的拼接代码根本没机会运行；如果改成switch(value)（此时value是undefined），第一个switch不会匹配任何case，会执行第二个switch，而第二个switch的case里又用了return，同样会提前终止函数。
• 变量未赋值：你声明了let suit, value，但全程没给这两个变量赋值，就算函数能走到最后return value + suit，结果也是undefined + undefined，即NaN。

解决方案 #

把switch分支里的return改为给变量赋值，确保两个switch都能执行完毕，最后再返回拼接结果：

修改后的代码：

const prettyCard = function (card) {
  let suit, value

  switch (card.value) {
    case 1:
      value = 'A';
      break;
    case 10:
      value = 'T';
      break;
    case 11:
      value = 'J';
      break;
    case 12:
      value = 'Q';
      break;
    case 13:
      value = 'K';
      break;
    default: // 用default简化2-9的处理
      value = card.value.toString();
      break;
  }

  switch (card.suit) {
    case 'HEARTS':
      suit = '♥';
      break;
    case 'SPADES':
      suit = '♠';
      break;
    case 'DIAMONDS':
      suit = '♦';
      break;
    case 'CLUBS':
      suit = '♣';
      break;
  }
  return value + suit
}
console.log(prettyCard({ suit: 'HEARTS', value: 1 })) // 输出：A♥

关键修改点 #

1. 将case里的return替换为给value/suit变量赋值，让函数能继续执行后续代码。
2. 给value的switch添加default分支，直接处理2-9的数值转换，避免重复代码。
3. 最后执行return value + suit，得到拼接后的目标字符串。

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