lodash.js - 根据不同字段筛选出的数组转对象转数组

最新推荐文章于 2023-11-10 08:56:21 发布

ansheng02

最新推荐文章于 2023-11-10 08:56:21 发布

阅读量1.4w

点赞数 2

分类专栏：优化我的开发—工具类文章标签： lodash.js lodash 数据处理工具前端工具

本文链接：https://blog.csdn.net/ansheng02/article/details/123377402

版权

优化我的开发—工具类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先来看【原始数组】和【最终数组】对比：

标题有点绕，总的来说，是一个数组，根据以下步骤拆解：

① 根据两个不同字段 "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.jshttps://www.lodashjs.com/

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法非常适用于：

遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数

本篇文章中，主要用到了以下几个：

_.groupBy(collection, [iteratee=_.identity])https://www.lodashjs.com/docs/lodash.groupBy#_groupbycollection-iteratee_identity

_.toPairsIn(object)https://www.lodashjs.com/docs/lodash.toPairsIn#_topairsinobject

_.map(collection, [iteratee=_.identity])https://www.lodashjs.com/docs/lodash.map#_mapcollection-iteratee_identity

_.concat(array, [values])https://www.lodashjs.com/docs/lodash.concat#_concatarray-values

_.uniqBy(array, [iteratee=_.identity])https://www.lodashjs.com/docs/lodash.uniqBy#_uniqbyarray-iteratee_identity

_.filter(collection, [predicate=_.identity])https://www.lodashjs.com/docs/lodash.filter#_filtercollection-predicate_identity

这两个值分别做筛，方法看起来是有点多，但根据前面拆解的步骤点，你会发现每一个都用得到，也可以尝试不借助 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";
});