动态生成条件变量：用三元运算符与字符串构建替代硬编码 if 分支-html教程-PHP中文网

动态生成条件变量：用三元运算符与字符串构建替代硬编码 if 分支

本文介绍如何用简洁、可扩展的方式动态构建 JavaScript 字符串变量 j 和 k，避免冗长的 16 种 if/else if 组合；核心是基于数组映射关系与条件拼接逻辑，实现按 xOct 阈值自动分流、格式化封装及后缀添加。

本文介绍如何用简洁、可扩展的方式动态构建 javascript 字符串变量 `j` 和 `k`，避免冗长的 16 种 `if/else if` 组合；核心是基于数组映射关系与条件拼接逻辑，实现按 `xoct` 阈值自动分流、格式化封装及后缀添加。

在实际开发中，当面对多个并行条件判断（如 bOct > 3、cOct > 3 等）并需据此向不同目标变量动态追加内容时，硬编码 if 分支不仅易出错、难维护，更严重违背 DRY（Don’t Repeat Yourself）原则。原代码中试图穷举 4 个变量的 2⁴ = 16 种布尔组合，显然不可持续。理想解法应具备声明性、可迭代性与可配置性——即：将变量对（如 b/f 对应 bOct）、阈值规则、格式模板分离，再通过循环或函数式逻辑统一处理。

以下为优化后的完整实现方案，已整合进原始上下文，并增强健壮性与可读性：

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

window.onload = fetch;

function fetch() {
  // 1. 随机生成音名索引与八度数
  const [bPc, cPc, dPc, ePc, fPc, gPc, hPc, iPc] = 
    Array(8).fill().map(() => Math.floor(Math.random() * pc.length));
  const [bOct, cOct, dOct, eOct] = 
    Array(4).fill().map(() => Math.floor(Math.random() * 6));

  // 2. 映射音名：前四组用于 j（>3 时），后四组用于 k（≤3 时）
  const namesForJ = [pc[bPc], pc[cPc], pc[dPc], pc[ePc]]; // b, c, d, e
  const namesForK = [pc[fPc], pc[gPc], pc[hPc], pc[iPc]]; // f, g, h, i
  const octaves = [bOct, cOct, dOct, eOct];

  // 3. 动态构建 j 和 k（核心逻辑）
  let j = "", k = "";

  octaves.forEach((oct, idx) => {
    const nameJ = namesForJ[idx];
    const nameK = namesForK[idx];

    if (oct > 3) {
      j += `${nameJ}${oct} `;
    } else {
      k += `${nameK}${oct} `;
    }
  });

  // 4. 格式化：添加括号（仅当含多个项）、追加 "/w"、清理尾空格
  const formatSegment = (str) => {
    str = str.trim();
    if (str === "") return "";
    const hasSpace = str.includes(" ");
    return `${hasSpace ? "(" : ""}${str}${hasSpace ? ")" : ""}/w`;
  };

  j = formatSegment(j);
  k = formatSegment(k);

  // 5. 输出到 DOM
  text1.textContent = j;
  text2.textContent = k;
}

✅ 关键优势说明：

消除重复逻辑：使用 forEach 遍历 octaves 数组，天然覆盖全部 4 个变量，无需手动写 4 行三元运算符；
清晰的数据映射：namesForJ 与 namesForK 显式声明了“同一八度下该选哪个音名”，语义一目了然；
可复用的格式化函数：formatSegment() 封装了括号包裹、空值处理、后缀添加等共性逻辑，便于后续扩展（如支持其他分隔符或前缀）；
严格空格控制：.trim() 确保无首尾空格，避免 "(C4 )/w" 类错误；includes(" ") 比 indexOf(" ") !== -1 更直观；
DOM 安全输出：使用 textContent 替代 innerHTML，防止潜在 XSS（除非明确需渲染 HTML）。

⚠️ 注意事项：