基于时间段重叠规则分组数组的技术实现问询

需求说明 #

将带时间段属性的元素（示例用字符串数组简化）分组到不同“行”容器中，规则为：若当前行内已有元素与待加入元素的时间段重叠，则新建一行存放该元素；若当前行所有元素都与待加入元素无重叠，则将其加入该行。

示例输入输出 #

输入数组 #

const periods = ['1-4', '1-7', '1-4', '1-8', '1-8', '5-8', '9-12', '9-12'];

期望输出分组 #

[['1-4', '5-8', '9-12'], ['1-7', '9-12'], ['1-4'], ['1-8'], ['1-8']]

实现步骤 #

• 解析时间段：先把每个时间段字符串（或DOM元素对应的时间段数据）转换成包含start和end数值的结构，比如将'1-4'转为{ start: 1, end: 4 }。如果是处理DOM元素，可通过自定义属性（如data-start、data-end）或元素关联的数据源提取起止值。
• 初始化分组容器：创建一个空数组rows，用来存储所有分组后的行。
• 遍历待分组元素：
  • 对每个元素（或其解析后的时间段对象），依次检查已有的每一行：
    • 时间段无重叠判断逻辑：对于两个时间段a和b，当a.start > b.end 或 a.end < b.start时，二者无重叠。
    • 若当前行内所有元素都与待加入元素无重叠，就将该元素添加到这一行。
  • 如果遍历完所有行都找不到符合条件的，就新建一个行，将当前元素放入其中。
• DOM元素处理（扩展）：如果是实际业务中的DOM元素，分组完成后，可根据rows的结构创建对应的行容器（如<div class="row"></div>），再将分组内的DOM元素依次插入到对应的行容器中。

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