JavaScript循环生成未来10天日期跨月异常问题咨询

问题原因 #

• 核心问题出在setDate()方法的计算逻辑和循环内的日期赋值逻辑不匹配：
  1. Date.prototype.setDate()是基于当前Date实例所属的月份来计算日期的，当传入的日期值超过当前月份的总天数时，会自动向月份、年份进位。
  2. 代码中startingDay.getDate()获取的始终是起始日的固定日期值29，循环中startingDay.getDate() + i的结果会随着i递增快速变大：
     • i=1 → 30 → 10月30日（运行正常）
     • i=2 → 31 → 10月31日（运行正常）
     • i=3 → 32 → 此时thisDay还是10月的实例，10月只有31天，setDate(32)自动进位为11月1日（看起来仍正常）
     • i=4 → 33 → 此时thisDay已经是11月的实例，11月只有30天，setDate(33)相当于11月33日，自动进位为12月3日，直接跳过多天，看起来就像按月递增。
• 本质逻辑错误：每次给thisDay赋值时，没有重置thisDay为起始日的基准值，导致后续setDate()的计算基准月份已经偏离了起始月，大数值传入后触发多次进位。

修复方案 #

提供两种经过验证的可行写法：

写法1：每次基于起始日生成新日期实例 #

const startingDay = new Date('2021-10-29');
for(var i=1; i<10; i++) {
  // 每次都从起始日拷贝新的实例，避免基准月份偏移
  const thisDay = new Date(startingDay);
  thisDay.setDate(startingDay.getDate() + i);
  console.log(thisDay);
}

写法2：每次在当前日期基础上自增1天 #

const startingDay = new Date('2021-10-29');
const thisDay = new Date(startingDay);
for(var i=1; i<10; i++) {
  // 每次基于当前日期加1天，不需要复用起始日的日期值计算
  thisDay.setDate(thisDay.getDate() + 1);
  console.log(thisDay);
}

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