本文介绍如何在 JavaScript 中避免 16 种硬编码 if 分支，通过简洁的三元运算符链与字符串规范化逻辑，动态构建符合规则的 j 和 k 字符串，显著提升代码可维护性与可读性。
本文介绍如何在 javascript 中避免 16 种硬编码 if 分支，通过简洁的三元运算符链与字符串规范化逻辑，动态构建符合规则的 `j` 和 `k` 字符串，显著提升代码可维护性与可读性。
在实际开发中，面对多变量、多条件组合的字符串组装逻辑（如本例中基于 bOct–eOct 四个音高八度值的分支判断），若采用传统 if/else if 链处理所有 2⁴=16 种组合，不仅代码冗长、易出错，更严重违背 DRY（Don’t Repeat Yourself）原则。幸运的是，该需求本质是条件筛选 + 格式化拼接，完全可通过声明式、迭代式方式优雅解决。
✅ 核心思路：逐变量决策 + 统一后处理
我们不再枚举“全部大于3”“仅第一个大于3”等组合，而是对每个 xOct 独立判断，并决定其对应字符（b/c/d/e 或 f/g/h/i）是否追加到 j 或 k。随后统一处理空格、括号和 /w 后缀——这正是三元运算符与字符串方法的天然优势场景。
以下是重构后的关键逻辑（嵌入原 fetch() 函数中，替换全部 if 块）：
// 清晰版：逐变量条件拼接（无重复逻辑）
j = (bOct > 3) ? j + b + bOct + " " : j;
j = (cOct > 3) ? j + c + cOct + " " : j;
j = (dOct > 3) ? j + d + dOct + " " : j;
j = (eOct > 3) ? j + e + eOct + " " : j;
k = (bOct <= 3) ? k + f + bOct + " " : k;
k = (cOct <= 3) ? k + g + cOct + " " : k;
k = (dOct <= 3) ? k + h + dOct + " " : k;
k = (eOct <= 3) ? k + i + eOct + " " : k;
// 统一后处理：去首尾空格 → 加括号（仅当含空格）→ 添加 /w → 清理残留空格
j = j.trim();
k = k.trim();
j = j.includes(" ") ? `(${j})` : j;
k = k.includes(" ") ? `(${k})` : k;
j = j ? j + "/w" : "";
k = k ? k + "/w" : "";⚠️ 注意事项与最佳实践
- trim() 不可省略：确保 j/k 开头或结尾无多余空格，否则 includes(" ") 判断失效，且最终字符串格式不洁（如 "C4 /w"）；
- 避免 indexOf(" ") !== -1 写法：includes(" ") 语义更清晰、兼容性足够（ES2016+），推荐使用；
- 空字符串保护：j = j ? j + "/w" : "" 明确处理空值，防止出现 "/w" 这类非法结果；
- 性能考量：本方案时间复杂度为 O(1)（固定 8 次判断 + 几次字符串操作），远优于 16 路分支的潜在深度比较；
- 可扩展性提示：若未来新增变量（如 fOct, jChar 等），只需增加两行三元语句，无需修改任何分支结构。
✅ 最终效果验证（示例）
假设随机生成：
- bOct=4, cOct=2, dOct=5, eOct=1
- b="C", c="D#", d="F", e="G#"
- f="A", g="B", h="C#", i="D"
则：
- j 收集 b（4>3）和 d（5>3）→ "C4 F5 " → trim() → "C4 F5" → includes(" ") → "(C4 F5)" → +"/w" → "(C4 F5)/w"
- k 收集 g（cOct≤3）、i（eOct≤3）→ "B2 D1 " → "B2 D1" → "(B2 D1)" → "(B2 D1)/w"
输出完全符合需求规范。
通过此重构，代码行数减少约 70%，逻辑一目了然，且彻底消除了组合爆炸风险。记住：当条件独立、动作同构时，优先选择循环或链式条件表达式，而非穷举分支——这是写出健壮、可演进 JavaScript 的关键习惯之一。
