如何用循环优化多分支else if条件，不修改主循环与输出

原代码通过遍历data.schedule生成单选框，但仅处理了data.order.length为0和1的场景。若要支持data.order.length从1到22的情况，无需编写22个else if分支，可通过统一的存在性判断来简化逻辑，同时保证主循环和输出结果完全不变。

原代码 #

for (var i = 0; i < data.schedule.length; i++) {
  if (data.order.length == 0) {
    const markup = `<div class="col-4 col-sm-3 col-md-2 col-lg-2 col-xl-1 mt-2 me-xl-4 text-center"> <input type="radio" class="btn-check" name="schedule_id" id="${data.schedule[i].id}" autocomplete="off" value="${data.schedule[i].id}">
      <label class="btn btn-sm btn-outline-dark" for="${data.schedule[i].id}">${data.schedule[i].start}</label></div>`;
    document
      .querySelector("#myTime")
      .insertAdjacentHTML("beforeend", markup);
  }

  else if (data.order.length == 1) {
    if (data.order[0].schedule_id == data.schedule[i].id) {
      const markup = `<div class="col-4 col-sm-3 col-md-2 col-lg-2 col-xl-1 mt-2 me-xl-4 text-center"> <input type="radio" class="btn-check" name="schedule_id" id="${data.schedule[i].id}" autocomplete="off" value="${data.schedule[i].id}" disabled>
              <label class="btn btn-sm btn-outline-dark" for="${data.schedule[i].id}">${data.schedule[i].start}</label></div>`;
      document
        .querySelector("#myTime")
        .insertAdjacentHTML("beforeend", markup);
    } else {
      const markup = `<div class="col-4 col-sm-3 col-md-2 col-lg-2 col-xl-1 mt-2 me-xl-4 text-center"> <input type="radio" class="btn-check" name="schedule_id" id="${data.schedule[i].id}" autocomplete="off" value="${data.schedule[i].id}">
              <label class="btn btn-sm btn-outline-dark" for="${data.schedule[i].id}">${data.schedule[i].start}</label></div>`;
      document
        .querySelector("#myTime")
        .insertAdjacentHTML("beforeend", markup);
    }
  }
}

优化后的代码 #

// 提前提取已存在的schedule_id到Set，提升判断效率
const usedScheduleIds = new Set(data.order.map(item => item.schedule_id));

for (var i = 0; i < data.schedule.length; i++) {
  const currentScheduleId = data.schedule[i].id;
  // 判断当前schedule是否已被占用
  const isDisabled = usedScheduleIds.has(currentScheduleId);
  
  // 统一生成markup，根据isDisabled决定是否添加disabled属性
  const markup = `<div class="col-4 col-sm-3 col-md-2 col-lg-2 col-xl-1 mt-2 me-xl-4 text-center"> 
    <input type="radio" class="btn-check" name="schedule_id" id="${currentScheduleId}" autocomplete="off" value="${currentScheduleId}"${isDisabled ? ' disabled' : ''}>
    <label class="btn btn-sm btn-outline-dark" for="${currentScheduleId}">${data.schedule[i].start}</label>
  </div>`;
  
  document.querySelector("#myTime").insertAdjacentHTML("beforeend", markup);
}

优化说明 #

1. 效率提升：使用Set存储已使用的schedule_id，判断元素是否存在的时间复杂度为O(1)，比循环遍历或多个||条件判断更高效，尤其当data.order长度较大时优势明显。
2. 代码简化：移除了所有分支判断逻辑，通过统一的条件生成HTML，代码结构更清晰，可维护性更强。
3. 兼容性：完全保留原主循环逻辑和输出的HTML结构，不会改变原有功能和页面表现。

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