Vue中对Axios获取的月份数组按时间顺序排序的方法求助

你可以借助已定义的monthNames数组作为排序依据，替换默认的字母排序逻辑，实现按1-12月的时间顺序排列。具体修改如下：

方法一：直接利用monthNames数组排序 #

修改你的数据处理方法，自定义排序规则：

methods: {
  processMonthData() {
    let startdate = [];
    metastartdate.forEach((item) => {
      const splitArr = item.split(", ");
      startdate = startdate.concat(splitArr);
    });
    
    // 按时间顺序排序
    startdate.sort((a, b) => {
      const monthA = this.monthNames.find(month => month.month === a);
      const monthB = this.monthNames.find(month => month.month === b);
      return parseInt(monthA.position) - parseInt(monthB.position);
    });
    
    return startdate;
  }
}

方法二：优化性能（推荐） #

如果月份数据量较大，提前创建月份与排序位的映射表，避免每次排序都遍历monthNames：

1. 在Vue的computed中生成映射表：

computed: {
  monthOrderMap() {
    return this.monthNames.reduce((map, item) => {
      map[item.month] = parseInt(item.position);
      return map;
    }, {});
  }
}

2. 修改排序逻辑：

methods: {
  processMonthData() {
    let startdate = [];
    metastartdate.forEach((item) => {
      const splitArr = item.split(", ");
      startdate = startdate.concat(splitArr);
    });
    
    // 借助映射表快速排序
    startdate.sort((a, b) => {
      return this.monthOrderMap[a] - this.monthOrderMap[b];
    });
    
    return startdate;
  }
}

两种方法的核心逻辑都是通过月份对应的position数值比较，实现时间顺序排序，替代默认的字母排序规则。

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