JS实现运动学计算器：多选复选框匹配运动学方程的最优方案

核心优化：用「变量组合映射表」替代嵌套if #

嵌套if会让代码臃肿且难以维护，推荐将已知变量的组合与对应的求解逻辑做成键值对映射表，直接通过选中的变量组合匹配计算规则，逻辑更清晰、扩展性更强。

步骤1：快速获取选中的已知变量 #

假设你的复选框value属性设为对应变量名（如s、u、v、a、t），可以用以下代码获取选中项：

// 提取所有选中复选框的变量名
const checkedVars = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
  .map(box => box.value);

// 校验选中数量（必须为3个）
if (checkedVars.length !== 3) {
  alert('请选择恰好3个已知变量');
  return;
}

步骤2：构建方程映射表 #

把所有可能的3变量组合作为键，对应值为求解剩余两个变量的函数。为了避免顺序影响，将变量名排序后作为键：

// 运动学方程映射表：排序后的变量组合 → 求解函数
const equationMap = {
  // 已知u、v、t，求s和a
  'u,v,t': (u, v, t) => {
    const s = (u + v) * t / 2;
    const a = (v - u) / t;
    return { s, a };
  },
  // 已知u、a、t，求s和v
  'u,a,t': (u, a, t) => {
    const v = u + a * t;
    const s = u * t + 0.5 * a * t ** 2;
    return { v, s };
  },
  // 已知u、v、a，求s和t
  'u,v,a': (u, v, a) => {
    const s = (v ** 2 - u ** 2) / (2 * a);
    const t = (v - u) / a;
    return { s, t };
  },
  // 补充剩余7种变量组合的方程（共C(5,3)=10种）
};

步骤3：匹配映射表并执行计算 #

// 对选中变量排序，生成映射表的键
const key = checkedVars.sort().join(',');
const calculateFn = equationMap[key];

if (!calculateFn) {
  alert('暂不支持该变量组合的计算');
  return;
}

// 获取输入框数值（假设输入框id与变量名一致，如id="u"）
const inputValues = checkedVars.map(varName => parseFloat(document.getElementById(varName).value));
// 执行计算
const results = calculateFn(...inputValues);

// 渲染结果（假设结果元素id为「变量名-result」）
for (const [varName, value] of Object.entries(results)) {
  document.getElementById(`${varName}-result`).textContent = value.toFixed(2);
}

额外优化建议 #

• 输入校验：计算前检查输入是否为有效数字，避免NaN错误
• 动态交互：选中复选框时自动显示对应输入框，隐藏未选中项，提升用户体验
• 方程补全：提前枚举完所有10种变量组合，确保功能完整性

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