JavaScript-数组切片：基于不同范围的过滤器

我有一个对象数组，如下所示：

数组：

[
  {
    "isChecked": false,
    "title": "00:00"
  },
  {
    "isChecked": false,
    "title": "00:30"
  },
  {
    "isChecked": false,
    "title": "01:00"
  },
  {
    "isChecked": false,
    "title": "01:30"
  },
  {
    "isChecked": false,
    "title": "02:00"
  },
  {
    "isChecked": false,
    "title": "02:30"
  },
  {
    "isChecked": false,
    "title": "03:00"
  },
  {
    "isChecked": false,
    "title": "03:30"
  },
  {
    "isChecked": false,
    "title": "04:00"
  },
  {
    "isChecked": false,
    "title": "04:30"
  },
  {
    "isChecked": false,
    "title": "05:00"
  },
  {
    "isChecked": false,
    "title": "05:30"
  },
  {
    "isChecked": false,
    "title": "06:00"
  },
  {
    "isChecked": false,
    "title": "06:30"
  },
  {
    "isChecked": false,
    "title": "07:00"
  },
  {
    "isChecked": false,
    "title": "07:30"
  },
  {
    "isChecked": false,
    "title": "08:00"
  },
  {
    "isChecked": false,
    "title": "08:30"
  },
  {
    "isChecked": false,
    "title": "09:00"
  },
  {
    "isChecked": false,
    "title": "09:30"
  },
  {
    "isChecked": false,
    "title": "10:00"
  },
  {
    "isChecked": false,
    "title": "10:30"
  },
  {
    "isChecked": false,
    "title": "11:00"
  },
  {
    "isChecked": false,
    "title": "11:30"
  }
]

[
  {
    "StartTime": "00:00",
    "EndTime": "02:00"
  },
{
    "StartTime": "07:00",
    "EndTime": "09:00"
  },
{
    "StartTime": "10:00",
    "EndTime": "11:00"
  },
]

UI:它的显示方式如下：

用户操作：当用户选择任何时间段时，如下所示：

然后阵列将有一些检查时间

[
  {
    "isChecked": true,
    "title": "00:00"
  },
  {
    "isChecked": true,
    "title": "00:30"
  },
  {
    "isChecked": true,
    "title": "01:00"
  },
  {
    "isChecked": true,
    "title": "01:30"
  },
  {
    "isChecked": true,
    "title": "02:00"
  },
  {
    "isChecked": false,
    "title": "02:30"
  },
  {
    "isChecked": false,
    "title": "03:00"
  },
  {
    "isChecked": false,
    "title": "03:30"
  },
  {
    "isChecked": false,
    "title": "04:00"
  },
  {
    "isChecked": false,
    "title": "04:30"
  },
  {
    "isChecked": false,
    "title": "05:00"
  },
  {
    "isChecked": false,
    "title": "05:30"
  },
  {
    "isChecked": false,
    "title": "06:00"
  },
  {
    "isChecked": false,
    "title": "06:30"
  },
  {
    "isChecked": true,
    "title": "07:00"
  },
  {
    "isChecked": true,
    "title": "07:30"
  },
  {
    "isChecked": true,
    "title": "08:00"
  },
  {
    "isChecked": true,
    "title": "08:30"
  },
  {
    "isChecked": true,
    "title": "09:00"
  },
  {
    "isChecked": false,
    "title": "09:30"
  },
  {
    "isChecked": true,
    "title": "10:00"
  },
  {
    "isChecked": true,
    "title": "10:30"
  },
  {
    "isChecked": true,
    "title": "11:00"
  },
  {
    "isChecked": false,
    "title": "11:30"
  }
]

我想要的：基于所选时段的所有时间会话（从开始到结束）的列表：

输出：

[
  {
    "isChecked": false,
    "title": "00:00"
  },
  {
    "isChecked": false,
    "title": "00:30"
  },
  {
    "isChecked": false,
    "title": "01:00"
  },
  {
    "isChecked": false,
    "title": "01:30"
  },
  {
    "isChecked": false,
    "title": "02:00"
  },
  {
    "isChecked": false,
    "title": "02:30"
  },
  {
    "isChecked": false,
    "title": "03:00"
  },
  {
    "isChecked": false,
    "title": "03:30"
  },
  {
    "isChecked": false,
    "title": "04:00"
  },
  {
    "isChecked": false,
    "title": "04:30"
  },
  {
    "isChecked": false,
    "title": "05:00"
  },
  {
    "isChecked": false,
    "title": "05:30"
  },
  {
    "isChecked": false,
    "title": "06:00"
  },
  {
    "isChecked": false,
    "title": "06:30"
  },
  {
    "isChecked": false,
    "title": "07:00"
  },
  {
    "isChecked": false,
    "title": "07:30"
  },
  {
    "isChecked": false,
    "title": "08:00"
  },
  {
    "isChecked": false,
    "title": "08:30"
  },
  {
    "isChecked": false,
    "title": "09:00"
  },
  {
    "isChecked": false,
    "title": "09:30"
  },
  {
    "isChecked": false,
    "title": "10:00"
  },
  {
    "isChecked": false,
    "title": "10:30"
  },
  {
    "isChecked": false,
    "title": "11:00"
  },
  {
    "isChecked": false,
    "title": "11:30"
  }
]

[
  {
    "StartTime": "00:00",
    "EndTime": "02:00"
  },
{
    "StartTime": "07:00",
    "EndTime": "09:00"
  },
{
    "StartTime": "10:00",
    "EndTime": "11:00"
  },
]

我尝试了一点，但没有得到想要的输出

这是我代码的链接

---

非常感谢您的帮助

您可以检查插槽和前置对象，添加新对象或更新最后一个对象

var data=[{isChecked:true，title:00}，{isChecked:true，title:00}，{isChecked:true，title:01:00}，{isChecked:true，title:01:30}，{isChecked:true，title:02:00}，{isChecked:false，title:03:00}，{isChecked:false，title:03:30}，{isChecked:false，title:“04:00”{isChecked:false，title:“04:30”}，{isChecked:false，title:“05:00”}，{isChecked:false，title:“06:00”}，{isChecked:false，title:“06:30”}，{isChecked:true，title:“07:00”}，{isChecked:true，title:“07:30”}，{isChecked:true，title:“08:00”}，{isChecked:true，title:09:00}，{isChecked:false，title:09:30}，{isChecked:true，title:10:00}，{isChecked:true，title:11:00}，{isChecked:false，title:11:30}，
result=data.reduce（（r，{isChecked，title}，i，a）=>{
如果（！isChecked）返回r；
如果（！i | |！a[i-1].isChecked）r.push（{StartTime:title，EndTime:title}）；
else r[r.length-1].EndTime=title；
返回r；
}, []);         
console.log（结果）；

---

.as控制台包装{max height:100%！important；top:0；}

使用js reduce.Chunk数组的解决方案，然后取第一次和最后一次

1，“标题”：“05:00”}，{“标题”：“05:30”}，{“标题”：“05:30”}，{“标题”：“06:00”}，{“标题”：“06:30”}，{“标题”：“06:30”}，{“标题”：“07:00”}，{“标题”：“07:30”}，{“标题”：“08:00”}，{“标题”：“08:30”}，{“标题”：“08:30”}，{“标题”：“标题”：“08:30”}，{“标题”：“0，{“标题”：“标题”：“08:30”}，{“标题”}，{标题“：“10:00”}，{“isChecked”：！0，标题“：“10:30”}，{“isChecked”：！0，标题“：“11:00”}，{“isChecked”：！1，标题“：“11:30”}”； const result=data.reduce（{curr，times}，n）=>{ 如果（curr！=n.isChecked&&n.isChecked）次.push（[]）； 如果（n.isChecked）次[times.length-1]。推送（n.title）； 返回{curr:n.isChecked，times}； }，{curr:false，times:[]}）.times.map（range=>（{StartTime:range[0]，EndTime:range[range.length-1]}）；

---

console.log（result）；您可以减少时隙数据集并基于当前和以前的时隙返回时间块

只需检查

isChecked

，如果未检查上一个插槽，则添加一个新块

如果当前未选中，但前一个已选中，请完成时间块

const expected=getExpected（），
实际=calculateTimeBlocks（getInput（））；
console.log（'Equal？：'，JSON.stringify（实际）==JSON.stringify（预期））；
控制台日志（实际）；
函数calculateTimeBlocks（时隙）{
返回时隙。减少（（块、当前、索引、arr）=>{
设prev=index>0？arr[index-1]：null；
如果（当前已检查）{
如果（！prev | |！prev.已检查）{
blocks.push（{“StartTime”：curr.title}）；
}
}否则{
如果（上一个和上一个已检查）{
Object.assign（块[blocks.length-1]{
[“结束时间”]：上一个标题
});
}
}
返回块；
}, []);
}
函数getInput（）{
返回[
{“isChecked”：true，“title”：“00:00”}，
{“isChecked”：true，“title”：“00:30”}，
{“isChecked”：true，“title”：“01:00”}，
{“isChecked”：true，“title”：“01:30”}，
{“isChecked”：true，“title”：“02:00”}，
{“isChecked”：false，“title”：“02:30”}，
{“isChecked”：false，“title”：“03:00”}，
{“isChecked”：false，“title”：“03:30”}，
{“isChecked”：false，“title”：“04:00”}，
{“isChecked”：false，“title”：“04:30”}，
{“isChecked”：false，“title”：“05:00”}，
{“isChecked”：false，“title”：“05:30”}，
{“isChecked”：false，“title”：“06:00”}，
{“isChecked”：false，“title”：“06:30”}，
{“isChecked”：true，“title”：“07:00”}，
{“isChecked”：正确，“title”：“07:30”}，
{“isChecked”：true，“title”：“08:00”}，
{“isChecked”：正确，“title”：“08:30”}，
{“isChecked”：true，“title”：“09:00”}，
{“isChecked”：false，“title”：“09:30”}，
{“isChecked”：true，“title”：“10:00”}，
{“isChecked”：正确，“title”：“10:30”}，
{“isChecked”：true，“title”：“11:00”}，
{“isChecked”：false，“title”：“11:30”}
];
}
函数getExpected（）{
返回[
{“开始时间”：“00:00”，“结束时间”：“02:00”}，
{“开始时间”：“07:00”，“结束时间”：“09:00”}，
{“开始时间”：“10:00”，“结束时间”：“11:00”}，
];
}

---

.as控制台包装{top:0；最大高度：100%！重要；}

所以你要尝试使用这种设计，你必须创建一个连续时间段的列表？另外，你的样本数据应该是：00:00->02:30等等。你检查了2:00时间段，这意味着30分钟时间段被消耗掉了，所以你所有的物品范围都应该在一小时的底部（第一个空时间段的顶部）谢谢@Nina Schol