持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

如图，有个需求，即需要查询两个日期之间的所有数组，与接口返回的数据做对比，获得结果值，做成曲线图。 因此，获取两个日期之间的数组，为必要条件！

该方法的请求参数

1. (start_time, end_time, 'days'),获得两个日期之间，所有天数的数组
2. (start_time, end_time, 'months'),获得两个日期之间，所有月数的数组
3. (start_time, end_time, 'years'),获得两个日期之间，所有年数的数组
4. 获得天数、月数、年数数组数量，仅需改下共通方法，return dateArray.length,即可

定义共通方法，获得数组

    getAllDay(start_time, end_time, type) {
      // type 为 days(天) , months(月), years(年)
      var dateArray = [] // dateArray 起止日期中间的所有日期列表
      var currentDate = moment(start_time) //起止日期
      var stopDate = moment(end_time) //截止日期
      //开始日期小于等于结束日期,并循环
      while (currentDate <= stopDate) {
        if (type === 'days') dateArray.push(moment(currentDate).format('YYYY-MM-DD')) //两个日期间的所有日期,
        if (type === 'months') dateArray.push(moment(currentDate).format('YYYY-MM')) //两个月份间的所有月份,
        if (type === 'years') dateArray.push(moment(currentDate).format('YYYY')) //两个年份间的所有年份,
        currentDate = moment(currentDate).add(1, type) //根据类型+1
      }
      return dateArray
    },

实例：定义button方法，拼接请求参数

• 如图，有四种情况，近七天，近30天，本年和两个日期之间的数据。
• 每当点击button，都会调用getAllDay函数，计算出日期之间的数据。

    selectChange() { //select选择事件
      var nowDate = moment().toDate()
      this.requestBakeDayDry.endTime = this.formatDate(nowDate) //定义结束时间
      this.requestBakeDayDry.startTime = []
      switch (this.radioData.status) {
        case '1': //近七天
          let thisWeekMondayDate = moment().subtract(6, 'days')
          this.requestBakeDayDry.startTime = this.formatDate(thisWeekMondayDate)
          this.bakeDayDryDayList = this.getAllDay(
            this.requestBakeDayDry.startTime,
            this.requestBakeDayDry.endTime,
            'days'
          )
          this.getDayDryList() //生成曲线图的方法
          break
        case '2': //近30天
          let thisMonthFirstDay = moment().subtract(29, 'days')
          this.requestBakeDayDry.startTime = this.formatDate(thisMonthFirstDay)
          console.log('start', this.requestBakeDayDry.startTime)
          console.log('end', this.requestBakeDayDry.endTime)
          this.bakeDayDryDayList = this.getAllDay(
            this.requestBakeDayDry.startTime,
            this.requestBakeDayDry.endTime,
            'days'
          )
          this.getDayDryList() //生成曲线图的方法
          break
        case '3': //本年
          getInfoContract().then((res) => {  //这里掉了接口你们可以忽略，可以理解根据接口获得开始时间
            const { code, data } = res
            if (code != 0) return
            this.requestBakeDayDry.startTime = this.formatDate(data.bakeYearDate)
            this.bakeDayDryDayList = this.getAllDay(
              this.requestBakeDayDry.startTime,
              this.requestBakeDayDry.endTime,
              'days'
            )
            this.getDayDryList() //生成曲线图的方法
          })
          break
        default:
          break
      }
    },

函数总结

1. push

if (type === 'days') dateArray.push(moment(currentDate).format('YYYY-MM-DD'))

push，是向数组添加一个新项目

• push方法向数组末尾添加新项目，并返回新长度;
• 如需在数组的开头添加项目，请使用 unshift() 方法。

2. moment Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。 日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。 因此，一般项目调用该方法时，都会调用js库。