JS开发抽牌游戏触发TypeError: card_name未定义报错如何解决

报错核心原因 #

你遇到的TypeError: card_name is not defined错误，以及大概率会后续出现的属性读取错误，核心触发点如下：

• 随机索引生成逻辑错误：Math.round(Math.random() * 52)生成的整数范围是0_{52，而你的cards数组只有52个元素，有效索引为0}51。当随机值为52时，cards[52]为undefined，此时给card_name赋值为undefined，后续访问card_name[0]时会抛出属性读取错误，部分运行环境下也会误报变量未定义。如果确认没有拼写错误，优先修复随机数逻辑即可解决该报错。
• 额外排查点：确认cards、decks、cards_drawn三个变量都在draw_card函数的可访问作用域内声明，不存在跨作用域无法读取的问题。

其他逻辑缺陷修复 #

你的代码还有几处逻辑错误会导致抽牌功能无法正常运行：

• 遍历已抽卡牌的判断逻辑错误：for...in遍历数组得到的是索引值，你当前拿索引和卡牌名称对比，永远无法匹配，计数逻辑完全失效。需要改为对比cards_drawn[i]和card_name[0]。
• 抽牌计数未重置：drawn_times变量定义在while循环外部，每次进入下一轮抽牌循环时不会清零，计数结果永远叠加，逻辑完全错误。需要把变量声明放到while循环内部。
• 全局变量泄漏：for (i in cards_drawn)中的循环变量i没有用let声明，会被自动提升为全局变量，造成变量污染。
• 逻辑冗余：可以直接用数组方法统计已抽次数，无需手动遍历计数，代码可读性更高。

修复后的参考代码 #

const draw_card = () => {
  let drawn_card, card_name;
  // 循环找到符合条件的卡牌
  while (true) {
    // 生成0~51的有效随机索引
    drawn_card = Math.floor(Math.random() * 52);
    card_name = cards[drawn_card];
    // 统计当前卡牌已抽次数
    const drawn_times = cards_drawn.filter(item => item === card_name[0]).length;
    // 未超过牌组数量则可以抽牌
    if (drawn_times < decks) {
      cards_drawn.push(card_name[0]);
      break;
    }
  }
  return card_name;
}

draw_card();

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