如何用工厂函数在JS中为日期范围内的每个日期创建对象数组

问题根源 #

JavaScript的Date是引用类型，而非值类型。你在循环中始终使用同一个loopDate对象，每次调用setTime()都是修改这个对象本身的时间戳。数组中存储的是该对象的引用，而非日期值的副本，因此循环结束后，所有元素的start都会指向同一个Date对象，也就是循环最后一次修改后的时间。

解决方案 #

你提到的用new Date()包裹是正确的思路——通过创建新的Date对象，让每个数据点的start都持有独立的引用，避免后续循环修改影响已存入数组的元素。下面提供两种实现方式：

方式1：调用工厂函数时创建新Date对象 #

const myDataPoints = [];

function datapointFactory(start, end, value) {
  return { start, end, value };
}

const startDate = new Date(2023, 0, 1);
const endDate = new Date(2023, 1, 1);
const timeInterval = 1000 * 60 * 60 * 6;

for (let loopDate = startDate; loopDate < endDate; loopDate.setTime(loopDate.getTime() + timeInterval)) {
  const endDatapointDate = new Date(loopDate.getTime() + timeInterval);
  // 传入新创建的Date对象，确保每个start都是独立引用
  myDataPoints.push(datapointFactory(new Date(loopDate), endDatapointDate, 50));
}

方式2：工厂函数内部自动处理（更健壮） #

把创建新Date对象的逻辑封装到工厂函数里，调用方无需手动处理，减少出错概率：

const myDataPoints = [];

function datapointFactory(start, end, value) {
  // 内部创建新Date对象，隔离引用
  return {
    start: new Date(start),
    end: new Date(end),
    value
  };
}

const startDate = new Date(2023, 0, 1);
const endDate = new Date(2023, 1, 1);
const timeInterval = 1000 * 60 * 60 * 6;

for (let loopDate = startDate; loopDate < endDate; loopDate.setTime(loopDate.getTime() + timeInterval)) {
  const endDatapointDate = new Date(loopDate.getTime() + timeInterval);
  myDataPoints.push(datapointFactory(loopDate, endDatapointDate, 50));
}

关键总结 #

只要确保每个数据点的start和end都是独立的Date实例，就能避免所有元素共享同一引用导致的日期值一致问题。

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