如何用动态方式替代JavaScript硬编码if语句生成变量j和k？

问题背景 #

当前代码通过硬编码大量else if语句处理b、c、d、e四个变量对应的oct值组合（共16种）来生成j和k变量，这种方式繁琐且不易维护。需求明确：

• 检查所有xOct是否大于3；
• 若xOct>3，将对应的b/c/d/e与xOct存入j；若xOct≤3，将对应的f/g/h/i与xOct存入k；
• 同一变量（j或k）中有多个项时，需用()包裹，项之间加空格；
• 在j或k的末尾添加/w；
• 若j或k无内容，则设为空字符串""。

原示例代码 #

JavaScript代码 #

const pc = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
const text1 = document.getElementById("text1");
const text2 = document.getElementById("text2");

let b = "";
let c = "";
let d = "";
let e = "";

let f = "";
let g = "";
let h = "";
let i = "";

let j = "";
let k = "";

window.onload = fetch();

function fetch() {
  var bPc = Math.floor(Math.random() * pc.length);
  var cPc = Math.floor(Math.random() * pc.length);
  var dPc = Math.floor(Math.random() * pc.length);
  var ePc = Math.floor(Math.random() * pc.length);
  var fPc = Math.floor(Math.random() * pc.length);
  var gPc = Math.floor(Math.random() * pc.length);
  var hPc = Math.floor(Math.random() * pc.length);
  var iPc = Math.floor(Math.random() * pc.length);

  var bOct = Math.floor(Math.random() * 6);
  var cOct = Math.floor(Math.random() * 6);
  var dOct = Math.floor(Math.random() * 6);
  var eOct = Math.floor(Math.random() * 6);

  b += pc[bPc];
  c += pc[cPc];
  d += pc[dPc];
  e += pc[ePc];
  f += pc[fPc];
  g += pc[gPc];
  h += pc[hPc];
  i += pc[iPc];

  if (bOct > 3 && cOct > 3 && dOct > 3 && eOct > 3) {
    j += "(" + b + bOct + " " + c + cOct + " " + d + dOct + " " + e + eOct + ")/w";
    k += "";
  } else if (bOct <= 3 && cOct <= 3 && dOct <= 3 && eOct <= 3) {
    j += "";
    k += "(" + f + bOct + " " + g + cOct + " " + h + dOct + " " + i + eOct + ")/w";
  } else if (bOct > 3 && cOct <= 3 && dOct <= 3 && eOct <= 3) {
    j += b + bOct + "/w";
    k += "(" + g + cOct + " " + h + dOct + " " + i + eOct + ")/w";
  } //more and more "else if" combinations omitted

    text1.innerHTML = j;
    text2.innerHTML = k;
}

HTML代码 #

<p id="text1"></p>
<p id="text2"></p>

高效解决方案 #

通过数组分组+循环遍历的方式可以完全替代硬编码逻辑，代码简洁且扩展性强，修改后的核心实现如下：

修改后的fetch函数 #

function fetch() {
  // 批量生成随机索引和oct值，简化重复代码
  const charIndices = Array.from({length: 8}, () => Math.floor(Math.random() * pc.length));
  const octValues = Array.from({length: 4}, () => Math.floor(Math.random() * 6));

  // 批量赋值字母变量
  [b, c, d, e, f, g, h, i] = charIndices.map(idx => pc[idx]);
  const [bOct, cOct, dOct, eOct] = octValues;

  // 定义每个项的对应关系：主字母、oct值、备用字母
  const itemList = [
    { main: b, oct: bOct, alt: f },
    { main: c, oct: cOct, alt: g },
    { main: d, oct: dOct, alt: h },
    { main: e, oct: eOct, alt: i }
  ];

  // 收集j和k的内容项
  const jContent = [];
  const kContent = [];
  itemList.forEach(item => {
    const text = `${item.oct > 3 ? item.main : item.alt}${item.oct}`;
    item.oct > 3 ? jContent.push(text) : kContent.push(text);
  });

  // 统一格式化函数，处理括号、空格和/w后缀
  const formatOutput = (items) => {
    if (items.length === 0) return "";
    const content = items.join(" ");
    return items.length > 1 ? `(${content})/w` : `${content}/w`;
  };

  // 生成最终的j和k
  j = formatOutput(jContent);
  k = formatOutput(kContent);

  text1.innerHTML = j;
  text2.innerHTML = k;
}

方案优势 #

1. 消除硬编码：不管有多少个变量组合，只需要在itemList数组中添加对应对象即可，无需新增条件判断；
2. 代码复用：通过格式化函数统一处理输出规则，避免重复逻辑；
3. 可读性提升：数据结构清晰，逻辑流程一目了然，后期维护更方便。

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