一、js数组分组

1.js对数据分组类似group by

源码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>jquery 数组按某一字段分组</title>

    <!-- <script src="./Scripts/jquery-3.3.1.min.js"></script> -->

    <script src="./Scripts/jquery-1.10.2.min.js"></script>

</head>

<body>

    <script type="text/javascript">

     $(function()

     {

         let a = null;

         let aa = a?a:0;

         console.log(aa);

         let b = undefined;

         let bb = b?b:0;

         console.log(bb);

         let c = '';

         let cc = c?c:0;

         console.log(cc);

        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}

        ];

        const sorted =groupBy(list, function (item) {

            return [item.name];//按照name进行分组

        });

        console.log(sorted);

     })

    function  groupBy(array, f)

    {

        debugger;

        const groups = {};

        array.forEach(function (o) { //注意这里必须是forEach 大写

            const group = JSON.stringify(f(o));

            groups[group] = groups[group] || [];

            groups[group].push(o);

        });

        return Object.keys(groups).map(function (group) {

            return groups[group];

        });

    }

    </script>

</body>

</html>

具体实现思路：

  • 1.函数groupBy有两个形参，一为对象数组，二为匿名函数（该函数功能：返回对象的某个指定属性的属性值并存放在数组中）；
  • 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.keys(groups)是取出groups对象中的所有key，然后遍历一个个key组成的新数组，返回分好了组的二维数组

2.js根据json数据中的某一个属性来给数据分组

源码如下：

 <!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<span id ="span" style="width: 50px;height: 200px;"></span>

	</body>

	<script>

	var arr = [{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},

{"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];

var map = {},

    dest = [];

for(var i = 0; i < arr.length; i++){

    var ai = arr[i];

    if(!map[ai.Groupheader]){

        dest.push({

            Groupheader: ai.Groupheader,

            data: [ai]

        });

        map[ai.Groupheader] = ai;

    }else{

        for(var j = 0; j < dest.length; j++){

            var dj = dest[j];

            if(dj.Groupheader == ai.Groupheader){

                dj.data.push(ai);

                break;

            }

        }

    }

}

console.log(JSON.stringify(dest));

	var sapn = document.getElementById("span");

	span.innerHTML = JSON.stringify(dest);

	</script>

</html>

二、js数组排序

参考1：https://blog.csdn.net/shuoSmallWhite/article/details/89447418

参考2：https://blog.csdn.net/qq_24607837/article/details/83342585

总结如下：

/**

 * 数组排序：Desc:降序  Asc:升序

 * @param {any} property

 */

function arraySort(property,type) {

    return (firstobj, secondobj) => {

        const firstValue = firstobj[property];

        const secondValue = secondobj[property];

        switch (type) {

            case "Desc":

                return secondValue - firstValue; //降序

            case "Asc":

                return firstValue - secondValue; //升序

            default:

                return firstValue - secondValue; //升序

        }

    };

}

js对数组分组处理的更多相关文章

  1. js 根据数组分组动态生成table（相同项合并）

    <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/ ...

  2. Js删除数组重复元素的多种方法

    js对数组元素去重有很多种处理的方法,本篇文章中为网络资源整理,当然每个方法我都去实现了:写下来的目的是希望自己活学活用,下次遇到问题后方便解决. 第一种 function oSort(arr){ v ...

  3. PHP 根据key 给二维数组分组

    我们经常拿到一个二维数组出来,会发现结果和自己想要的有些偏差,可能需要根据二维数组里的某个字段对数组分组.先来看以下数组, Array ( [0] => Array ( [id] => 1 ...

  4. js去除数组重复项

    /** * js去除数组重复项 */ //方法一.使用正则法 // reg.test(str),匹配得到就返回true,匹配不到返回false var arr = ["345",& ...

  5. js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法

    var  questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...

  6. 探讨js字符串数组拼接的性能问题

    这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题,字符串连接一直是js中性能最低的操作之一,应该如何解决呢?请参看本文的介绍 我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制 ...

  7. js之数组，对象，类数组对象

    许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...

  8. js对数组的操作函数

    js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多, 自以为js高手的自己居然无从下手, ...

  9. JS 索引数组、关联数组和静态数组、动态数组

    JS 索引数组.关联数组和静态数组.动态数组 数组分类: 1.从数组的下标分为索引数组.关联数组 var ary1 = [1,3,5,8]; //按索引去取数组元素,从0开始(当然某些语言实现从1开始 ...

随机推荐

  1. linux命令详解——ftp

    ftp服务器在网上较为常见,Linux ftp命令的功能是用命令的方式来控制在本地机和远程机之间传送文件,这里详细介绍Linux ftp命令的一些经常使用的命令,相信掌握了这些使用Linux 进行ft ...

  2. 你所不知的VIM强大功能

    1. 可视化区块(Visual Block) (1)cd ~ 切换到自己的家目录(本范例中为root用户) (2)touch test1 test2 建立两个文件做演示(3)last > tes ...

  3. Balancing Act POJ - 1655 （树的重心）

    Consider a tree T with N (1 <= N <= 20,000) nodes numbered 1...N. Deleting any node from the t ...

  4. 好用的数据库压缩软件wingzip

    有时候我们导出.sql格式的数据库备份文件过大,超过了某些虚拟空间数据库支持的文件大小限制,我们没办法修改phpMyAdmin 导入MySQL数据库文件大小限制 只能通过压缩数据库来达到上传数据库的目 ...

  5. WinMain lpCmdLine

    int APIENTRY WinMain(HINSTANCE hInst, HINSTANCE, LPSTR lpCmdLine, int){ //命令行参数 TCHAR pCommandLine[2 ...

  6. Django + celery +redis使用

    1.安装包 pip install celery pip install django-celery pip install pymysql 2.创建一个django项目 - proj/ - proj ...

  7. java web 域对象

    四大域对象 pagecontext  表示的是当前页面的域对象Request表示的是请求域中的对象session  表示的是一次会话中的对象application表示的是在一次tc启动到一次关闭的时候 ...

  8. 多线程(三) 同步synchronized

    五.同步 1.锁 多线程程序一般是为了完成一些相同的工作而存在的,因此有时间也会共享一些资源,例如对象.变量等等,此时如果不对各个线程进行资源协调,就会出现一些冲突,从而导致程序功能失效.例如下面的示 ...

  9. DevExpress ASP.NET Core v19.1版本亮点：数据网格和树列表

    行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Core Controls v19.1中新增的一些控件及增强 ...

  10. 深浅拷贝(copy)

    目录 copy 模块 1.拷贝(赋值) 1). x为不可变数据类型 2). x为可变数据类型 3). 可变数据类型(比如列表)内,既有不可变元素,又有容器类型可变元素(比如列表) 2.浅拷贝 3.深拷 ...