如何结合可用时间与已预订时段生成指定日期的课程时段？

需求：结合指定日期的可用时间范围与已预订时段，生成可预约的课程时段，同时获取该日期对应的所有课程预订信息。

现有代码示例 #

var timeslots = [];

// 已预订时段
var bookings = [
  { id: '1', startDate: new Date(2022, 7, 15, 11, 0), endDate: new Date(2022, 7, 15, 12, 0) },
  { id: '2', startDate: new Date(2022, 7, 15, 14, 0), endDate: new Date(2022, 7, 15, 15, 0) }
];

// 可用时间范围
var availability = [
  { id: '1', startDate: new Date(2022, 7, 15, 9, 0), endDate: new Date(2022, 7, 15, 13, 0) },
  { id: '2', startDate: new Date(2022, 7, 15, 14, 0), endDate: new Date(2022, 7, 15, 18, 0) },
];

// 带时长的可选课程
var courses = [
  { id: '1', duration: 30, title: '30分钟课程' }, 
  { id: '2', duration: 45, title: '45分钟课程' }, 
  { id: '3', duration: 60, title: '60分钟课程' }, 
  { id: '4', duration: 90, title: '90分钟课程' }
];

// 当前生成时段的逻辑（仅处理第一个可用时段和第一个课程时长）
while (isBefore(availability[0].startDate, availability[0].endDate)) {
  let currentStartDate = availability[0].startDate;
  availability[0].startDate = roundToNearestMinutes(addMinutes(availability[0].startDate, courses[0].duration), { nearestTo: 30 });
  timeslots.push(format(currentStartDate, 'p') + ' - ' + format(availability[0].startDate, 'p'));
}

视图层渲染代码 #

// 简单渲染生成的时段列表
{timeslots.map((item) => 
  <Text>{item}</Text>
)}

现有代码的局限性 #

• 仅处理第一个可用时间范围和第一个课程时长，未覆盖所有可用时段和课程类型
• 直接修改原availability数组的起始时间，会破坏原始数据
• 未校验生成的时段与已预订时段是否冲突，可能产生重复预约

核心优化步骤 #

1. 数据预处理：提取指定日期的所有预订时段，转换为便于冲突判断的时间区间集合
2. 遍历所有可用范围：对每个可用时间范围，按不同课程时长拆分候选时段
3. 冲突校验：对比候选时段与预订时段，过滤掉重叠的不可用时段
4. 保留原始数据：操作时复制可用时间对象，避免修改原数组影响后续逻辑

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