如何用JavaScript动态变量构建并修改指定日程数据结构？

问题背景 #

你需要在JavaScript中动态生成符合指定格式的日程数据结构，并且能够修改指定day（比如day:6或day:2）对应的periods数组内的start和end时间，最终生成和原数据结构一致的新data2。你之前尝试用字符串拼接的方式实现，但这种方法存在诸多问题。

原方案的问题 #

你之前的代码尝试通过循环拼接字符串来生成数据结构：

for (var i=0; i < arr.length; ++i){ data2='[{"day":MYVARIABLE1,"periods":[{"start":"MYVARIABLE2","end":"MYVARIABLE3", ...}]}]'; }

这种方式不仅容易出现语法错误（比如引号转义、变量拼接错误），而且后续修改数据时需要重新解析字符串，维护性极差，完全不符合JavaScript处理对象/数组的最佳实践。

正确实现思路 #

我们应该直接使用JavaScript的对象和数组操作来构建和修改数据结构，核心步骤包括：

1. 生成基础的日程框架（包含day 0到day 6的空结构）
2. 封装函数来添加或修改指定day的period数据
3. 修改数据时深拷贝原结构，避免污染原数据

完整代码示例 #

// 生成初始日程框架：day从0到6，每个day的periods初始为空数组
function generateInitialSchedule() {
  const schedule = [];
  for (let day = 0; day <= 6; day++) {
    schedule.push({
      day,
      periods: []
    });
  }
  return schedule;
}

// 给指定day添加一个period，参数默认值与原数据一致
function addPeriodToDay(schedule, day, start, end, title = "", backgroundColor = "rgba(254, 0, 0, 0.7)", borderColor = "rgb(42, 60, 255)", textColor = "rgb(0, 0, 0)") {
  const targetDay = schedule.find(item => item.day === day);
  if (targetDay) {
    targetDay.periods.push({
      start,
      end,
      title,
      backgroundColor,
      borderColor,
      textColor
    });
  }
  return schedule;
}

// 修改指定day下指定索引的period的时间，返回新的结构（不修改原数据）
function updatePeriodTime(originalSchedule, targetDay, periodIndex, newStart, newEnd) {
  // 深拷贝原数据，避免对原数组造成影响
  const newSchedule = JSON.parse(JSON.stringify(originalSchedule));
  const targetDayItem = newSchedule.find(item => item.day === targetDay);
  
  if (targetDayItem && targetDayItem.periods[periodIndex]) {
    targetDayItem.periods[periodIndex].start = newStart;
    targetDayItem.periods[periodIndex].end = newEnd;
  }
  
  return newSchedule;
}

// ---------- 使用示例 ----------
// 1. 生成初始空结构
let data2 = generateInitialSchedule();

// 2. 给各个day添加period，还原原数据结构
data2 = addPeriodToDay(data2, 0, "01:00", "02:00");
data2 = addPeriodToDay(data2, 0, "02:30", "03:00");
data2 = addPeriodToDay(data2, 1, "01:00", "02:00");
data2 = addPeriodToDay(data2, 2, "01:00", "01:30");
data2 = addPeriodToDay(data2, 3, "02:00", "02:30");
data2 = addPeriodToDay(data2, 4, "01:00", "01:30");
data2 = addPeriodToDay(data2, 5, "01:30", "02:00");
data2 = addPeriodToDay(data2, 5, "03:00", "03:30");

// 3. 修改指定day的period时间
// 示例：修改day 2的第一个period的时间
data2 = updatePeriodTime(data2, 2, 0, "01:15", "01:45");
// 示例：给day 6添加一个period后修改时间
data2 = addPeriodToDay(data2, 6, "09:00", "10:00");
data2 = updatePeriodTime(data2, 6, 0, "09:30", "10:30");

// 查看最终结果
console.log(JSON.stringify(data2, null, 2));

代码说明 #

• generateInitialSchedule：快速生成包含0-6号day的基础框架，避免手动重复创建每个day对象。
• addPeriodToDay：复用性高，可以快速给任意day添加符合格式的period，默认样式参数和原数据保持一致。
• updatePeriodTime：通过深拷贝生成新的结构，确保原数据不会被意外修改，同时精准定位到目标period修改时间。

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