React Native中如何补全事件对象本周及下周缺失日期？

我来帮你搞定这个需求！你现在有个以日期为键的events对象，部分日期有对应的事件数组，还有些本周、下周的日期压根没出现在键里，需要把这些缺失的日期都补上，对应值设为空数组对吧？下面是具体的实现思路和代码：

核心思路拆解 #

要实现这个功能，其实就两步：

1. 先把本周和下周的所有日期都生成出来：得先确定当前周的起始日，然后依次算出本周7天、下周7天的日期，格式要和你现有对象的键（YYYY-MM-DD）保持一致。
2. 对比补全事件对象：拿着生成的日期数组，挨个检查原events里有没有这个键，没有的话就加上，值设为空数组。

完整代码实现 #

下面是完全兼容React Native的代码，用纯JS就能搞定，不用额外依赖：

// 工具函数：把Date对象转成YYYY-MM-DD格式的字符串
const formatDate = (date) => {
  const year = date.getFullYear();
  // 月份是从0开始的，所以要+1，padStart确保是两位数（比如1月变成01）
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 生成本周+下周的所有日期数组
const getWeekAndNextWeekDates = () => {
  const dates = [];
  const today = new Date();
  // 计算本周第一天（这里默认以周一为一周开始，想改周日的话看后面的说明）
  const firstDayOfWeek = new Date(today);
  // 周日的getDay()是0，所以要特殊处理，让周一成为一周的第一天
  const dayDiff = today.getDay() === 0 ? 6 : today.getDay() - 1;
  firstDayOfWeek.setDate(today.getDate() - dayDiff);

  // 生成本周的7天
  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(firstDayOfWeek);
    currentDate.setDate(firstDayOfWeek.getDate() + i);
    dates.push(formatDate(currentDate));
  }

  // 生成下周的7天
  const firstDayOfNextWeek = new Date(firstDayOfWeek);
  firstDayOfNextWeek.setDate(firstDayOfWeek.getDate() + 7);
  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(firstDayOfNextWeek);
    currentDate.setDate(firstDayOfNextWeek.getDate() + i);
    dates.push(formatDate(currentDate));
  }

  return dates;
};

// 补全events对象的日期键
const completeEvents = (originalEvents) => {
  // 复制原对象，避免直接修改原数据（React状态管理的最佳实践）
  const completedEvents = { ...originalEvents };
  const allRequiredDates = getWeekAndNextWeekDates();

  allRequiredDates.forEach(date => {
    // 如果当前日期不在原对象里，就添加进去，值设为空数组
    if (!(date in completedEvents)) {
      completedEvents[date] = [];
    }
  });

  return completedEvents;
};

// 测试用的原events对象
const originalEvents = {
  "2018-01-26": [
    {
      "allDay": false,
      "color": "#1abc9c",
      "height": 150,
      "location": "University of Illinois at Urbna-Champaign",
      "name": "Bsbshsjhs",
      "startDate": "2018-01-26",
      "startTime": "07:25 am",
      "stopDate": "2018-01-26",
      "stopTime": "08:25 am",
    },
    {
      "allDay": false,
      "color": "#1abc9c",
      "height": 150,
      "location": "University of Illinois at Urbna-Champaign",
      "name": "Hdhrhhfj",
      "startDate": "2018-01-26",
      "startTime": "09:19 am",
      "stopDate": "2018-01-26",
      "stopTime": "10:19 am",
    },
    // 其他事件省略...
  ],
  "2018-01-28": [],
};

// 调用函数得到补全后的对象
const updatedEvents = completeEvents(originalEvents);
console.log(updatedEvents);

细节调整说明 #

• 一周起始日修改：如果你业务里是以周日作为一周的第一天，只需要把getWeekAndNextWeekDates里的dayDiff改成const dayDiff = today.getDay();就行，这样周日的diff是0，周一diff是1，以此类推。
• 数据不可变性：代码里用了对象展开运算符{ ...originalEvents }复制原对象，避免直接修改原数据，这符合React中状态不可变的原则，防止意外的副作用。
• 格式统一：padStart确保月份和日期都是两位数，和你原事件对象的日期键格式完全匹配，不会出现比如2018-1-26这种格式不统一的问题。

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