lodash 实现数组根据时间戳按年、日进行分组

根据源数据里的时间戳进行分组,按年、日进行分组,年为大分组,然后再根据日期进行分组
原文:https://mp.weixin.qq.com/s/iuecyqnT10w66h13xLXwsQ

1、源数据格式

正常的单层数组,只有时间戳,时间倒序

[
  {
    time: 1602139800000,
    desc: "2020-10-08的数据"
  },
  {
    time: 1633414800000,
    desc: "2021-10-05的数据1111111"
  },
  {
    time: 1634546100000,
    desc: "2021-10-18的数据"
  },
  {
    time: 1633415400000,
    desc: "2021-10-05的数据2222222"
  }
]

2、想要的数据格式

按年、日进行分组,时间倒序

[{
    date: "2021",
    list: [
      {
        date: "10.18",
        list: [{ time: 1634546100000, desc: "2021-10-18的数据" }]
      },
      {
        date: "10.05",
        list: [
          { time: 1633414800000, desc: "2021-10-05的数据1111111" },
          { time: 1633415400000, desc: "2021-10-05的数据2222222" }
        ]
      }
    ]
  },{
    date: "2020",
    list: [
      {
        date: "10.08",
        list: [{ time: 1602139800000, desc: "2020-10-08的数据" }]
      }
    ]
  }
]

3、实现分组方法

我们用到lodash中的groupBy等方法

import _ from 'lodash';
...
const groupByListByDate = (data, dateFormat, continueGroupBy) => {
  return _(data)
    .groupBy((item) => moment(item.time).format(dateFormat))
    .map((item, date) => {
      let list = item;
      if (continueGroupBy) {
        list = groupByListByDate(item, "MM.DD");
      }
      return {
        date,
        list
      };
    })
    .reverse()
    .value();
};  

4、粗略的展现效果

适用于资讯、课表排期等场景

codepen源码地址

https://codepen.io/itguliang-the-selector/pen/qBXYGoo

你可能感兴趣的:(lodash 实现数组根据时间戳按年、日进行分组)