大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
先来看【原始数组】和【最终数组】对比：
标题有点绕，总的来说，是一个数组，根据以下步骤拆解：
- ① 根据两个不同字段 “label” 、”type” 分别做筛选，-> 生成两个 对象 obj_label 和 obj_type
- ② 将 obj_label 和 obj_type 转为 数组，分别是 arr_label 和 arr_type
- ③ 合并 arr_label 和 arr_type 为 modu_data
- ④ 去重 modu_data
- ⑤ 过滤 modu_data 中为空的键值
前置了解：
lodash.js
https://www.lodashjs.com/
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
- 遍历 array、object 和 string
- 对值进行操作和检测
- 创建符合功能的函数
本篇文章中，主要用到了以下几个：
_.toPairsIn(object)https://www.lodashjs.com/docs/lodash.toPairsIn#_topairsinobject
_.concat(array, [values])https://www.lodashjs.com/docs/lodash.concat#_concatarray-values
这两个值分别做筛，方法看起来是有点多，但根据前面拆解的步骤点，你会发现每一个都用得到，也可以尝试不借助 lodash 工具来实现，emmmm……我试了下，代码太长了，就放弃了，感兴趣的话，你也可以试试。
原始数组：
[
{
"id": "1",
"title": "事件_1",
"label": "金融",
"type": "企业",
},
{
"id": "2",
"title": "事件_2",
"label": "娱乐",
"type": "",
},
{
"id": "3",
"title": "事件_3",
"label": "娱乐",
"type": "娱乐",
},
{
"id": "4",
"title": "事件_4",
"label": "社会",
"type": null,
},
{
"id": "5",
"title": "事件_5",
"label": "",
"type": "社会",
}
] 原始数组中，label 和 type 都有 “” 或者 null 的状态，先不要在意这个，我们到最后才会处理异常状态。
① 使用 groupBy()，第一个参数是原始数组，第二个值是根据“关键词”做筛选，在这里需要根据 label 和 type 这两个值分别做筛选，生成两个键值对象
lodash.groupBy(res_data, "label")
lodash.groupBy(res_data, "type")
② 使用 toPairsIn() 将对象转为数组，参数是 Object 对象
lodash.toPairsIn( lodash.groupBy(res_data, "label") )
lodash.toPairsIn( lodash.groupBy(res_data, "type") )
③ 使用 map() 将数组转为 Object 键值对 对象
lodash.toPairsIn(
lodash.groupBy(res.data.result, "label")
)
.map(([prop, value]) => ({ prop, value }))
lodash.toPairsIn(
lodash.groupBy(res.data.result, "type")
)
.map(([prop, value]) => ({ prop, value }))
④ 使用 concat() 将两个数组 组合起来，有重复的暂时不做处理
lodash.concat(
lodash.toPairsIn(
lodash.groupBy(res.data.result, "label")
)
.map(([prop, value]) => ({ prop, value })) ,
lodash.toPairsIn(
lodash.groupBy(res.data.result, "type")
)
.map(([prop, value]) => ({ prop, value }))
)
⑤ 使用 uniqBy() 针对 “prop” 字段去重
lodash.uniqBy(
lodash.concat(
lodash.toPairsIn(
lodash.groupBy(res.data.result, "label")
)
.map(([prop, value]) => ({ prop, value })) ,
lodash.toPairsIn(
lodash.groupBy(res.data.result, "type")
)
.map(([prop, value]) => ({ prop, value }))
),
"prop"
)
⑥ 使用 filter() 过滤掉 !!props 的对象
lodash.uniqBy(
lodash.concat(
lodash.toPairsIn(
lodash.groupBy(res.data.result, "label")
)
.map(([prop, value]) => ({ prop, value })) ,
lodash.toPairsIn(
lodash.groupBy(res.data.result, "type")
)
.map(([prop, value]) => ({ prop, value }))
),
"prop"
)
.filter((item) => {
return Boolean(!!item.prop);
})
.filter((item) => {
return item.prop != "null";
});
———-结束———
总的来说是想纪录下吧，毕竟这个让我花了2个小时写完的，本来使用原生的JS写的，写完发现太长了，还是借助工具吧。
毕竟，“一般认为，人与动物的本质区别在于制造与使用工具”。
虽然这样说不太好，没有原生的基础，我们也想不到造工具。
关注公众号呀~“【DataShow Chart】”，同步发文，完整代码， 指路 ->公众号<-：
拜~
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/197584.html原文链接：https://javaforall.net
