想象一下，大多数的后台开发会尽可能的将结果集直接反馈给前台，这种结果集通常的格式就是一个Array数组，里面每一个元素都是Object键值对表。如果此时产品经理提出了各式各样的数据展现要求，那势必就要在前端对数据结构进行大刀阔斧的修改，我们就会有了类似如下的问题：
1、级联菜单需要一个JSON树。
2、总金额需要从当前查询结果里遍历求和出来（要命的是有的时候值是null、波浪线、中划线……）。
3、几千条数据需要反复遍历，得想办法改成键值对表来实现时间复杂度O(1)，要不客户会抱怨太卡。
4、某个大数据展现插件需要放进去数组，又得一顿for循环。
5、让数据按状态分组，有几个状态就得有几个数组吧，还得N次循环……。
6、一会儿要升序、一会儿要降序，更抓狂的是A字段升序排列的同时，如果多条数据A字段相同，就按B字段升序排列。
7、什么？分组之后还要让我按金额字段分组汇总！
8、某表格组件竟然只接受二维数组输入、每个数组的长度还必须是一样的，后台给我的就因为过滤了null值，导致参差不齐咋办（更悲剧的是后台还是友商提供的，修改=不可能）？
基于以上真实而痛苦的回忆，我开源了YumeiSoft的CommonFrontUtils项目，让广大前端程序员有时间可以多陪陪女朋友、家人、孩子，早点回家，不再996、007。
项目地址：
https://codechina.csdn.net/yumeisoft/commonfrontutils
（开源不易，记得给个Star，谢谢）
让我们来看看它究竟有哪些功能吧：
这张图是下载下来工程后通过yarn install、yarn start就可以看到的，示例非常丰富。
按照指引，我们把Yumeisoft整个文件夹拷贝到项目的src目录下，路径结构可以随便修改。data就是给的示例数据。把Objs给import进来。简单试试aggGroup函数，把它输出到页面上看看效果。核心代码就一句：
Objs(data).aggGroup('dept','id','count');
其中dept是部门字段、id是主键字段、count是按数量统计的意思
只用一行代码就搞定了分部门统计，是不是很酷？
完整代码如下：
import React, {
Component } from 'react';
import Objs from './Yumeisoft/CommonFrontUtils/Objs';
export default class App extends Component {
render() {
let data = [
{
id: '823585b8-062d-4e15-b17c-2d8932d4a1a4',
name: '张三',
age: '25',
balance: 1000,
gender: '男',
dept: '采购部',
post: '部门经理',
superior: '1bc06853-b0fd-4cbc-9d53-16c054b8ca9b',
},
{
id: '39d2fd99-00f5-4996-9a3f-165148ab7972',
name: '李四',
age: 17,
balance: 400,
gender: '男',
dept: '技术部',
post: '管理培训生',
deptId: '2',
superior: '37f15bff-e0ee-4b44-9291-5c9fa0bcf954',
},
{
id: '37f15bff-e0ee-4b44-9291-5c9fa0bcf954',
name: '王五',
age: 30,
balance: 500,
gender: '男',
dept: '技术部',
post: '部门经理',
superior: '1bc06853-b0fd-4cbc-9d53-16c054b8ca9b',
},
{
id: '0f0479cc-59fe-4c56-9685-75c4067300b6',
name: '小红',
age: 16,
balance: 200,
gender: '女',
dept: '采购部',
post: '管理培训生',
superior: '823585b8-062d-4e15-b17c-2d8932d4a1a4',
},
{
id: 'f01430fd-5df3-402a-92ef-aca63d882e2b',
name: '小明',
age: 24,
balance: 700,
gender: '男',
dept: '技术部',
post: '管理培训生',
superior: '37f15bff-e0ee-4b44-9291-5c9fa0bcf954',
},
];
let result = Objs(data).aggGroup('dept', 'id', 'count');
return <>{
JSON.stringify(result)}</>;
}
}
CodeChina上目前提供了30个例子，覆盖了大多数使用场景，这个项目基于木兰宽松许可证，对商业使用也非常友好。
如果大家有什么好的建议欢迎随时联系我：
邮箱：
[email protected]
或
[email protected]
最后记得给个Start，谢谢你的支持。