最近遇到一些同学在问 JS 中进行数据统计的问题。尽管数据统计个别会在数据库中进行,然而后端遇到须要应用程序来进行统计的状况也十分多。.NET 就为了对内存数据和数据库数据进行对立地数据处理,创造了 LINQ (Language-Integrated Query)。其实 LINQ 语法自身没什么,要害是为了实现 LINQ 而设计的表达式树、IEnumerable 和 IQueryable 的各种扩大等。
提出问题
不扯远了,先来看问题。依据上面的样例数据,要求失去
- 先按业务,再按部门分组的数据;
- 不按部门,间接按业务别离统计每年的数据
[
{
name: "部门 1",
businesses: [
{
name: "产品销售",
years: [{ name: "2021", value: 132}, {name: "2022", value: 183}, {name: "2023", value: 207}
]
},
{
name: "原料洽购",
years: [{ name: "2021", value: 143}, {name: "2022", value: 121}, {name: "2023", value: 120}
]
}
]
},
{
name: "部门 2",
businesses: [
{
name: "产品销售",
years: [{ name: "2021", value: 230}, {name: "2022", value: 112}, {name: "2023", value: 288}
]
},
{
name: "原料洽购",
years: [{ name: "2021", value: 168}, {name: "2022", value: 203}, {name: "2023", value: 115}
]
}
]
},
{
name: "部门 3",
businesses: [
{
name: "产品销售",
years: [{ name: "2021", value: 279}, {name: "2022", value: 163}, {name: "2023", value: 271}
]
},
{
name: "原料洽购",
years: [{ name: "2021", value: 129}, {name: "2022", value: 121}, {name: "2023", value: 226}
]
}
]
}
];
这个数据,如果用金山文档的轻维表(飞书多维表相似)来查看,会更直观
原数据(按部门再按业务)的轻维表出现
按业务再按部门分组的轻维表出现
按业务按年统计的轻维表出现
展平多级数据
原数据按部门再按业务进行了两级分类,所以它不是简略的二维表(行 / 列)数据,而是在二维表的根底上减少了两个维度(部门 / 业务)。从要求来看,咱们须要的是从另外的维度(业务 / 部门,业务 / 年度)来进行解决。所以须要先把这些数据降维开展成能够从新划分维度的水平,也就是二维表。
JS 中二维表的示意办法挺多,行对象汇合是最常见的一种,这里咱们也就采纳这种示意办法。
还有一种常见的形式是列汇合 + 行汇合,其中行汇合能够是对象示意(字段名对应)也能够是数组示意(索引号对应)。不过这种示意一会是用在 UI 中。单纯数据处理用行对象汇合就够了,不须要独自的列信息。
察看原数据的每一级,发现名称都命名为 name
,然而子集命名各不相同,层级无限。因为对每一层须要去解决名称到列(对象属性名)的转换,也须要对不同名称的子集进行进一步解决,各层级之间不足不言而喻的共性,不太适宜递归的形式来解决。所以咱们定做一个开展函数。
上面是对原数据量身定做的开展函数,开展后会失去一个蕴含部门 (dept)、业务 (business)、年份 (year)、数值 (value) 四个属性的对象汇合。
function flatBusinesses(list) {return list.flatMap(({ name: dept, businesses}) => {return businesses.flatMap(({ name: business, years}) => {return years.map(({ name: year, value}) => ({
dept,
business,
year,
value
}));
});
});
}
升级:如果想用递归该怎么解决?
并不是多级开展就肯定会用到递归。比方规定的数组构造,比方规定的树结构,是能够应用递归遍历开展的。然而像这个案例的数据,每一层的子级属性名称都不同,层级无限,须要逐级解决。
如果切实想用递归的话,也能够通过一个参数来定义每一级的解决规定。以这个例子来说,每一级要解决两件事:① 找到子级节点属性名;② 将
name
解决成适当的名称用在开展的数据中。function flatMultiLevelList(list, rules) {return flatList(list, 0); function flatList(list, level) {const rule = rules[level]; if (!rule) {return [{}]; } // 获得 field(子级属性名)和 convert(属性处理器)// 如果没有 convert 则指定一个默认的 it => it,即不做转换 const {field, convert = it => it} = rule; if (field) { // 如果存在子级,则持续 flatMap,展平。// ❶ {fff, ...others} 能够将 fff 属性从原对象中剥离进去 // ❷ {[feild]: nodes } 解构能够将 field 的值所指向的属性取出来赋予一个叫 nodes 的变量 return list.flatMap(({[field]: nodes, ...props }) => {return flatList(nodes, level + 1).map(it => ({ ...convert(props), ...it })); }); } else { // 如果不存在子级,只须要对以后节点进行转换,间接返回即可 return list.map(it => convert(it)); } } }
开展后会拿到这样的数据(假如赋值变量 table
)
[{ "dept": "部门 1", "business": "产品销售", "year": 2021, "value": 132},
{"dept": "部门 1", "business": "产品销售", "year": 2022, "value": 183},
{"dept": "部门 1", "business": "产品销售", "year": 2023, "value": 207},
{"dept": "部门 1", "business": "原料洽购", "year": 2021, "value": 143},
{"dept": "部门 1", "business": "原料洽购", "year": 2022, "value": 121},
{"dept": "部门 1", "business": "原料洽购", "year": 2023, "value": 120},
{"dept": "部门 2", "business": "产品销售", "year": 2021, "value": 230},
{"dept": "部门 2", "business": "产品销售", "year": 2022, "value": 112},
...
]
拿到二维表之后,某些须要的数据或视图就能够通过电子表格来取得。比方问题一中须要的统计数据,应用电子表格的透视图性能就能实现,而金山文档的轻维表,或者飞书的多维表能够实现得更容易。不过咱们当初须要用代码来实现。
分类及分类汇总
第一个问题的需要是分类和分类汇总。说到分类,那首先想到的必定是 group 操作。很惋惜原生 JS 不反对 group,如果想用现成的,能够思考 Lodash,要本人写一个倒也不难。group 操作后面提到的开展操作的逆操作。
function groupBy(list, key) {
// 这里简略地兼容一下传入 key 值和 keyGetter 的状况
const getKey = typeof key === "function" ? key : it => it[key];
return list.reduce((groups, it) => {(groups[getKey(it)] ??= []).push(it);
return groups;
},
{} // 空对象作为初始 groups);
}
按业务再按部门分组
有了 groupBy
,能够先按业务进行分组
// 后面假如展平的数据寄存在变量 table 中
const groups = groupBy(table, "dept");
当初咱们拿到的 byDept
是一个 JS 对象(留神不是数组哦),其键是部门名称,值是一个数组,蕴含该部门下的所有数据。接下来进行第二层分组,是须要对 byDept
的每一个“值”进行分组解决。
for (const key in groups) {const list = groups[key];
groups[key] = groupBy(list, "business");
}
解决之后的 groups
长得像这样
{
"产品销售": {
"部门 1": [{ dept: "部门 1", business: "产品销售", year: "2021", value: 132},
...
],
"部门 2": [{ dept: "部门 2", business: "产品销售", year: "2021", value: 230},
...
],
"部门 3": ...
},
"原料洽购": ...
}
后果是拿到了,然而和合乎原始的数据标准(原始层级每层是用 name
属性作为字段名,子级命名各不相同)所以还须要做一次转换。比方第一层的转换是这样:
const converted = Object.entries(groups)
.map(([name, depts]) => ({name, depts}));
它会把第一层(对象)解决成数组,每个元素蕴含 name
和 depts
两个属性,name
属性是名称,depts
则是按部门分组的后果(目前还是对象)。那么第二、三层转换也相似。把后面的分组和前面的转换合并起来,是这样
const result1 = Object.entries(groupBy(table, "business"))
.map(([name, list]) => ({
name,
depts: Object.entries(groupBy(list, "dept"))
.map(([name, list]) => ({
name,
years: list.map(({year: name, value}) => ({name, value}))
}))
}));
失去最终后果
[
{
name: "产品销售",
depts: [
{
name: "部门 1",
years: [{name: "2021", value: 132}, {name: "2022", value: 183}, {name: "2023", value: 207}]
},
{
name: "部门 2",
years: [{name: "2021", value: 230}, {name: "2022", value: 112}, {name: "2023", value: 288}]
},
{
name: "部门 3",
years: [{name: "2021", value: 279}, {name: "2022", value: 163}, {name: "2023", value: 271}]
}
]
},
...
]
按业务分组再按年统计
对于第一个问题的第二个需要,要按年统计业务(疏忽部门),解决办法与下面的办法类型。第二层分组改为按年份,而不是按部门;同时第二层的数组转换时不再转换第三层的数据,而是对第三层数据进行汇总。
const result2 = Object.entries(groupBy(table, "business"))
.map(([name, list]) => ({
name,
years: Object.entries(groupBy(list, "year"))
// ^^^^^ ^^^^^^ 按年分组
.map(([name, list]) => ({
name,
value: list.reduce((sum, { value}) => sum + value, 0)
// ^^^^^ 间接取值,应用 reduce 汇总
}))
}));
后果(用后面做的轻维表统计来核查一下,完全正确)
[
{
name: "产品销售",
years: [{name: "2021", value: 641}, {name: "2022", value: 458}, {name: "2023", value: 766}]
},
{
name: "原料洽购",
years: [{name: "2021", value: 440}, {name: "2022", value: 445}, {name: "2023", value: 461}]
}
]
如果用 Lodash 会怎么写
用 Lodash 来解决代码构造看起来更清晰一些,但代码量不见得少。
开展的局部用 Lodash 和应用原生办法没什么区别,都是应用 flatMap。Lodash 提供的 flatMapDeep 能够用来开展纯正的多级数组,但在这里不实用,因为每一级都不是单纯的开展,而是要进行独自的映射解决。Lodash 的 flatMapDeep 更像是原生的 map().flat(Number.MAX_SAFE_INTEGER)
。
const result1 = _(table)
// groupBy 的后果是一个对象,属性名是组名,属性值是组内数据列表。.groupBy("business")
// 第一种解决值集的办法,先把值解决了 (mapValues),再来解决键值对 (map)
.mapValues(depts => _(depts)
.groupBy("dept")
// 第二种解决值集的办法,解决键值对的时候,同时解决值汇合
.map((values, name) => ({
name,
years: values.map(({year: name, value}) => ({name, value}))
}))
.value())
.map((depts, name) => ({name, depts}))
.value();
const result2 = _(table).groupBy("business")
.map((list, name) => ({
name,
years: _(list).groupBy("year")
.map((list, name) => ({
name,
value: _.sumBy(list, "value")
}))
.value()}))
.value();
小结
如果须要对某个数据进行分类或者分类汇总,首先得拿到这个数据的二维表,也就是齐全开展的数据列表。少数状况下从后端拿到的数据都是二维表,毕竟关系型数据库逻辑构造是表存储。接下来所谓的“分类”其实就是分组操作,而“汇总”就是把分类后的子列表拿来进行聚合计算(计数、共计、均匀、最大 / 小等都是聚合计算),失去最终的后果。