如何优化Electron+TypeScript单位转换器代码，减少大量if语句？

核心思路是用单位-幂次映射表统一处理单位转换逻辑，通过计算输入单位与输出单位的幂次差直接完成换算，彻底消除嵌套if结构。

步骤1：定义单位映射关系 #

创建一个对象，将每个存储单位对应到它相对于字节的1024幂次：

const unitMap: Record<string, number> = {
  Kilobyte: 1,
  Megabyte: 2,
  Gygabyte: 3,
  Terabyte: 4,
  Pentabyte: 5
};

步骤2：重构转换函数 #

利用映射表将原有的嵌套if逻辑压缩为简洁的通用计算：

// 提前获取DOM元素，避免重复查询
const nameInput = document.getElementById("input-number") as HTMLInputElement; 
const inputVal = document.getElementById("input-val") as HTMLSelectElement; 
const outputVal = document.getElementById("output-val") as HTMLSelectElement; 
const submitButton = document.getElementById("Convertir");
const resultadoF = document.querySelector('#restultadoFinal')!;

function convertUnits(): void {
  const cantidad = nameInput.valueAsNumber;
  const inputUnit = inputVal.value;
  const outputUnit = outputVal.value;

  // 输入合法性校验
  if (isNaN(cantidad)) {
    alert("Favor de ingresar un numero valido");
    return;
  }

  // 从映射表获取对应幂次
  const inputPower = unitMap[inputUnit];
  const outputPower = unitMap[outputUnit];

  // 通用转换公式：先转字节，再转目标单位
  const bytes = cantidad * Math.pow(1024, inputPower);
  const resultado = bytes / Math.pow(1024, outputPower);

  // 更新结果显示
  resultadoF.innerHTML = `El Resultado es: ${resultado}`;
}

submitButton!.addEventListener("click", convertUnits);

优化点说明 #

• 消除冗余if：通过映射表直接关联单位与幂次，无需逐个判断单位类型
• 减少DOM开销：提前获取结果元素，避免每次点击都重复查询DOM
• 扩展性更强：后续新增单位只需在unitMap中添加一行，无需修改转换逻辑
• 可读性提升：代码结构清晰，转换逻辑一目了然

额外小提示 #

如果需要控制结果精度，可以用toFixed()方法保留指定小数位数：

resultadoF.innerHTML = `El Resultado es: ${resultado.toFixed(2)}`;

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