根据源数据里的时间戳进行分组,按年、日进行分组,年为大分组,然后再根据日期进行分组
原文: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源码地址:
网友评论