如何基于datetime时间间隔匹配生成由0和1组成的对应标记数组

首先你示例中的时间值需要修正为字符串类型，否则直接写8:00会触发JS语法错误，完整实现逻辑如下：

步骤1：基础变量修正 #

const timeInterval = ["8:00", "8:15", "8:30", "8:45", "9:00", "9:15", "9:30", "9:45", "10:00", "10:15", "10:30", "10:45", "11:00", "11:15", "11:30", "11:45"]
const subsetTimeIntervals = [["8:30", "8:45", "9:00", "9:15", "9:30"], ["10:45", "11:00", "11:15"]]

步骤2：预处理子时间区间 #

先将嵌套的子时间区间扁平化，再转成Set结构提升查找效率：

// 二维数组扁平化直接调用内置flat()方法即可，更深层级的嵌套可以传入深度参数比如flat(3)
const flatSubSet = new Set(subsetTimeIntervals.flat())

你原来写法中的flatten不是JS原生方法，原生数组扁平化统一用Array.prototype.flat()，如果是兼容低版本环境可以引入lodash的flatten方法替代。

步骤3：生成对应格式的结果 #

生成标记数组 #

const finalList = timeInterval.map(time => flatSubSet.has(time) ? 1 : 0)

生成键值对字典 #

const finalDict = timeInterval.reduce((prev, cur) => {
  prev[cur] = flatSubSet.has(cur) ? 1 : 0
  return prev
}, {})

生成React ListItem组件 #

你原来的写法有两处语法错误：一是in操作符不能用来判断数组元素存在，二是箭头函数返回JSX需要用括号包裹，修正后写法如下：

const listItems = timeInterval.map((time) => (
  <ListItem key={time} value={flatSubSet.has(time) ? 1 : 0} />
))

补充说明：in操作符在JS中仅用于判断属性是否存在于对象/原型链上，判断数组元素是否存在应该用Array.includes()，数据量大的时候推荐用Set的has()方法，时间复杂度为O(1)性能更好。

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