美文网首页
lodash 实现数组根据时间戳按年、日进行分组

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

作者: IT姑凉 | 来源:发表于2021-11-09 13:11 被阅读0次

    根据源数据里的时间戳进行分组,按年、日进行分组,年为大分组,然后再根据日期进行分组
    原文: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 实现数组根据时间戳按年、日进行分组

          本文链接:https://www.haomeiwen.com/subject/pbvmzltx.html