如何利用序列式全局变量循环改写多分支条件逻辑？

首先可以肯定的是，这种重复的多分支逻辑完全可以通过循环结合全局变量来优化，不仅能大幅减少冗余代码，后续维护（比如新增等级、修改选项）也会轻松很多。下面给你两种具体的实现思路：

思路1：将全局变量整理为数组（推荐） #

最规范的做法是把分散的roastAboutCheapLvl1到roastAboutCheapLvl5全局变量整合为一个数组，这样可以直接通过索引关联选项的位置：

// 先把全局变量整理成数组（索引1-5对应选项1-5，用null占位对齐序号）
const roastAboutCheapLevels = [
  null,
  roastAboutCheapLvl1,
  roastAboutCheapLvl2,
  roastAboutCheapLvl3,
  roastAboutCheapLvl4,
  roastAboutCheapLvl5
];

if(lvlOfRoast.value == 1) {
  const selectedIndex = selector.selectedIndex;
  if(selectedIndex === 0) {
    window.alert("choose a topic");
  } else if(selectedIndex >=1 && selectedIndex <=5) {
    // 直接通过索引取对应数据，无需多个else if分支
    document.getElementById("generatedRoast").innerHTML = randomRoast(roastAboutCheapLevels[selectedIndex]);
  }
}

这种方式的优势是代码可读性更强，后续新增等级时只需要往数组里加元素，不需要修改逻辑部分。

思路2：直接通过window对象访问全局变量（不修改原有变量命名） #

如果暂时不想改动现有全局变量的命名，因为所有全局变量都挂载在window对象上，我们可以通过字符串拼接变量名的方式动态获取：

if(lvlOfRoast.value == 1) {
  const selectedIndex = selector.selectedIndex;
  if(selectedIndex === 0) {
    window.alert("choose a topic");
  } else {
    // 拼接全局变量名：roastAboutCheapLvl + 选中的选项索引
    const targetRoast = window[`roastAboutCheapLvl${selectedIndex}`];
    if(targetRoast) { // 额外判断避免变量不存在时报错
      document.getElementById("generatedRoast").innerHTML = randomRoast(targetRoast);
    }
  }
}

这种方式不需要修改原有全局变量的结构，适合快速重构，但如果后续变量名有变动，需要同步修改拼接的字符串，维护成本略高。

额外优化建议 #

• 可以把lvlOfRoast.value的判断和选项处理逻辑进一步封装成函数，让代码更模块化；
• 建议给selector的每个选项设置value属性（比如value="1"到value="5"），这样可以直接通过selector.value获取对应等级，比用selectedIndex更直观。

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