zoukankan      html  css  js  c++  java
  • JS中的groupBy方法

    最近工作中需要写一些运营数据报表的页面,后端返回的数据都是未处理过的json,所以,大量的运算任务交给了前端来做,这其中有一个功能就是对数据进行分组,一开始我自己也尝试写了一些,但代码量比较大,显得很繁琐,直到后来在stackoverflow上看到了某位大牛写的方法,非常简洁优雅,自己也进行修改简化。代码如下:

    function groupBy( array , id ) {
        let groups = {};
        array.forEach( function( o ) {
            let group = JSON.stringify( o[id] );
            groups[group] = groups[group] || [];
            groups[group].push( o );
        });
        return Object.values(groups);
    }
    let name = "name"
    let list = [
        {"name": "John","Average":15,"High":10,"DtmStamp":1358226000000},
        {"name": "Jane","Average":16,"High":92,"DtmStamp":1358226000000},
        {"name": "Jane","Average":17,"High":45,"DtmStamp":1358226000000},
        {"name": "John","Average":18,"High":87,"DtmStamp":1358226000000},
        {"name": "Jane","Average":15,"High":10,"DtmStamp":1358226060000},
        {"name": "John","Average":16,"High":87,"DtmStamp":1358226060000},
        {"name": "John","Average":17,"High":45,"DtmStamp":1358226060000},
        {"name": "Jane","Average":18,"High":92,"DtmStamp":1358226060000}
    ];
    let sorted = groupBy(list, name);
    console.log(sorted);
    1. 函数groupBy有两个形参,一为对象数组,二为指定分类方式的key;
    2. groupBy函数内,先创建一个空对象;
    3. 然后forEach遍历对象数组,遍历时要执行的函数中只有一个形参o(数组中的每个元素);
    4. 由于下面函数调用是想用name来分组,因此let group = JSON.stringify( f(o) ),相当于先获取到对象数组list中的name属性对应的属性值并放入数组中:["John"],然后再将属性值转换为json字符串:'["John"]';
    5. groups[group] = groups[group] || [],在js中对象也是关联数组,因此这里相当于做了两件事,一是把group作为groups的key,二是将对应的value初始化,第一次执行为空数组,循环执行时找到相同的name时保持不变;
    6. groups[group].push( o ),这句相当于把list中每个对象压入数组中作为value;
    7. 最后,Object.values(groups)是取出groups对象中的所有values,返回分好了组的二维数组,至此大功告成~~~
    [ [ { name: 'John', Average: 15, High: 10, DtmStamp: 1358226000000 },
        { name: 'John', Average: 18, High: 87, DtmStamp: 1358226000000 },
        { name: 'John', Average: 16, High: 87, DtmStamp: 1358226060000 },
        { name: 'John', Average: 17, High: 45, DtmStamp: 1358226060000 } ],
      [ { name: 'Jane', Average: 16, High: 92, DtmStamp: 1358226000000 },
        { name: 'Jane', Average: 17, High: 45, DtmStamp: 1358226000000 },
        { name: 'Jane', Average: 15, High: 10, DtmStamp: 1358226060000 },
        { name: 'Jane', Average: 18, High: 92, DtmStamp: 1358226060000 } ] ]
  • 相关阅读:
    vue+ element table如何给指定的单元格添加点击事件
    nodejs 笔记
    sublime text3 编辑器如何运行js文件
    控制台运行nodejs程序
    控制台命令
    类似性别(0、1)判断的table列表数据渲染
    vue moment库格式化处理日期
    用百度siteapp的uaredirect.js判断用户访问端而进行域名的自动跳转
    编写email邮件的html页面注意事项
    IE6常见bug总结
  • 原文地址:https://www.cnblogs.com/aidixie/p/12741193.html
Copyright © 2011-2022 走看看