如何消除JavaScript多if else？表单仅传修改数据的代码优化

嘿，我完全懂你现在的困扰——一堆重复的if-else不仅写着麻烦，以后改需求的时候还要挨个改，简直是维护噩梦！咱们来把这段代码彻底简化，核心思路就是提取公共逻辑+动态构建差异字段，具体步骤如下：

1. 先提取所有分支的公共属性 #

你看原代码里，不管哪个if分支，datetime、id、status这三个字段都是必须的，所以咱们先把这部分单独拎出来，不用在每个分支里重复写：

if (editAppointment) {
  const id = Number(queryString.parse(props.location.search).id);
  // 先定义公共基础数据
  const editData = {
    datetime: moment.utc(date).format(),
    id: id,
    status: status,
  };

2. 动态构建需要更新的patient字段 #

接下来处理patient部分：只有当用户修改了phone或email时，我们才需要把对应的字段放进patient对象里，同时patientId是必须要传的。咱们可以先创建一个空的patient对象，然后逐一判断哪些字段有变化，把变化的字段加进去：

const patientUpdates = { id: patientDetails.patientId };
  // 判断phone是否修改
  if (phone !== patientDetails.phone) {
    patientUpdates.phone = patientDetails.phone;
  }
  // 判断email是否修改
  if (email !== patientDetails.email) {
    patientUpdates.email = patientDetails.email;
  }

3. 把patient数据整合到editData中 #

最后，只要patientUpdates里除了id还有其他字段（也就是用户确实修改了phone或email），就把它加到editData里：

// 如果有需要更新的patient字段，就添加到editData
  if (Object.keys(patientUpdates).length > 1) {
    editData.patient = patientUpdates;
  }
}

完整优化后代码 #

把上面的步骤整合起来，最终代码就变得非常简洁，而且逻辑清晰：

if (editAppointment) {
  const id = Number(queryString.parse(props.location.search).id);
  const editData = {
    datetime: moment.utc(date).format(),
    id: id,
    status: status,
  };

  const patientUpdates = { id: patientDetails.patientId };
  if (phone !== patientDetails.phone) {
    patientUpdates.phone = patientDetails.phone;
  }
  if (email !== patientDetails.email) {
    patientUpdates.email = patientDetails.email;
  }

  if (Object.keys(patientUpdates).length > 1) {
    editData.patient = patientUpdates;
  }

  // 这里发起你的API请求，用editData即可
}

为什么这样更好？ #

• 减少重复代码：公共部分只写一次，后续改datetime格式或者加新的公共字段，只需要改一处
• 逻辑更清晰：每个判断只负责单一职责，一眼就能看出哪些字段会被更新
• 扩展性强：以后如果要加其他可修改的字段（比如姓名、地址），只需要加一个对应的判断即可，不用新增一堆if-else分支

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