如何在数组元素间按日期条件插入空对象？求助修复代码

原始数组 #

const reserveList = [
  { name: 'john', start: '2022-09-01' },
  { name: 'mark', start: '2022-09-02' },
  { name: 'ken', start: '2022-09-03' },
  { name: 'sara', start: '2022-09-05' },
];

需求 #

当数组中相邻元素的start日期间隔超过1天时，在两者中间插入空对象，处理后结果如下：

const reserveList = [
  { name: 'john', start: '2022-09-01' },
  { name: 'mark', start: '2022-09-02' },
  { name: 'ken', start: '2022-09-03' },
  {},
  { name: 'sara', start: '2022-09-05' },
];

错误代码 #

以下是无法正常运行的实现代码：

const newList = (reserveList: Array<any>) => {
  reserveList.map((reserve, index) => {
    dayjs(reserveList[index + 1].start).diff(
      dayjs(reserveList[index].start, 'day') > 1
    ) && reserveList.splice(index + 1, 0, {});
  });
};

1. map方法误用：map的设计目的是生成新数组，不适合用来修改原数组。遍历过程中用splice修改原数组会导致数组长度变化，后续索引混乱，跳过部分元素。
2. dayjs.diff用法错误：正确调用方式是dayjs(dateA).diff(dateB, 'day')，你把比较逻辑写到了diff的参数里，导致参数类型错误，无法正确计算日期差。
3. 越界问题：遍历到最后一个元素时，index + 1会超出数组长度，访问reserveList[index + 1].start会报错。

方案一：使用reduce构建新数组（推荐） #

这种方式不修改原数组，逻辑清晰，避免索引问题：

import dayjs from 'dayjs';

const newList = (reserveList: Array<any>) => {
  return reserveList.reduce((result, current, index) => {
    // 先加入当前元素
    result.push(current);
    // 不是最后一个元素时，判断日期间隔
    if (index < reserveList.length - 1) {
      const currentDate = dayjs(current.start);
      const nextDate = dayjs(reserveList[index + 1].start);
      const dayDiff = nextDate.diff(currentDate, 'day');
      // 间隔大于1天则插入空对象
      if (dayDiff > 1) {
        result.push({});
      }
    }
    return result;
  }, [] as Array<any>);
};

// 使用示例
const originalList = [
  { name: 'john', start: '2022-09-01' },
  { name: 'mark', start: '2022-09-02' },
  { name: 'ken', start: '2022-09-03' },
  { name: 'sara', start: '2022-09-05' },
];

const processedList = newList(originalList);
console.log(processedList);

方案二：倒序遍历修改原数组 #

如果必须修改原数组，可以用倒序遍历避免索引混乱：

import dayjs from 'dayjs';

const newList = (reserveList: Array<any>) => {
  // 从倒数第二个元素往前遍历
  for (let index = reserveList.length - 2; index >= 0; index--) {
    const currentDate = dayjs(reserveList[index].start);
    const nextDate = dayjs(reserveList[index + 1].start);
    const dayDiff = nextDate.diff(currentDate, 'day');
    if (dayDiff > 1) {
      reserveList.splice(index + 1, 0, {});
    }
  }
};

// 使用示例
const originalList = [
  { name: 'john', start: '2022-09-01' },
  { name: 'mark', start: '2022-09-02' },
  { name: 'ken', start: '2022-09-03' },
  { name: 'sara', start: '2022-09-05' },
];

newList(originalList);
console.log(originalList);

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