在Vue/Nuxt中获取两个日期间所有日期的实现问题：遍历报错、按秒迭代

问题根因 #

1. 第一个getDaysArray方法的报错原因：

• 循环声明用了var，ESLint规范要求优先用let/const
• 方法没有返回最终的日期数组，导致this.daylist赋值后是undefined
• 部分ESLint规则无法识别setDate是直接修改原Date对象，所以会误报s未在循环中修改的警告，加对应忽略注释即可

2. 第二个循环按毫秒遍历的原因：
   直接对Date对象执行i++操作，默认是按毫秒数自增，自然不会按天跳转。

修复方案 #

优先选择修正getDaysArray方法，逻辑简洁性能稳定：

addEvent() {
  console.log(this.daylist)
  this.daylist = this.getDaysArray(
    new Date(this.startDate),
    new Date(this.endDate)
  )

  const a = {
    date: this.startDate,
    date1: this.endDate,
    date2: this.daylist,
  }

  this.activeDates.push(a)

  this.startDate = ''
  this.endDate = ''
},

// eslint-disable-next-line no-unmodified-loop-condition
getDaysArray(s, e) {
  // 把结束日期的时分秒设为最大值，避免时间部分导致判断漏了最后一天
  e.setHours(23, 59, 59, 999)
  // var替换为let符合ES规范
  for (let a = []; s <= e; s.setDate(s.getDate() + 1)) {
    // 可根据需求直接格式化日期为YYYY-MM-DD字符串，不用存完整Date对象
    a.push(new Date(s))
  }
  // 必须返回数组，否则daylist拿不到值
  return a
},

如果不想抽单独方法，也可以直接在addEvent里实现逻辑：

addEvent() {
  console.log(this.daylist)

  const ed = new Date(this.endDate)
  const sd = new Date(this.startDate)
  let arr = []

  if (sd <= ed) {
    ed.setHours(23, 59, 59, 999)
    // 每次循环加1天，不要用i++
    for (let i = new Date(sd); i <= ed; i.setDate(i.getDate() + 1)) {
      arr.push(new Date(i))
    }
  } else {
    console.log('try again')
  }

  this.daylist = arr
  const a = {
    date: this.startDate,
    date1: this.endDate,
    date2: this.daylist,
  }
  this.activeDates.push(a)
  this.startDate = ''
  this.endDate = ''
},

额外优化建议 #

如果需要把日期转成格式化字符串，可以在push的时候直接处理，比如用Intl.DateTimeFormat写简单的格式化逻辑，避免后续使用时还要处理Date对象的时区兼容问题。

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