前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

作者头像
全栈程序员站长
发布2022-10-03 12:48:34
4.9K0
发布2022-10-03 12:48:34
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

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

lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

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

  • ① 根据两个不同字段 “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
  • 对值进行操作和检测
  • 创建符合功能的函数

本篇文章中,主要用到了以下几个:

_.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……我试了下,代码太长了,就放弃了,感兴趣的话,你也可以试试。


原始数组:

代码语言:javascript
复制
[
    {
        "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 这两个值分别做筛选,生成两个键值对象

代码语言:javascript
复制
lodash.groupBy(res_data, "label")

lodash.groupBy(res_data, "type")
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

② 使用 toPairsIn() 将对象转为数组,参数是 Object 对象

代码语言:javascript
复制
lodash.toPairsIn(  lodash.groupBy(res_data, "label")  )

lodash.toPairsIn(  lodash.groupBy(res_data, "type")  )
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

③ 使用 map() 将数组转为 Object 键值对 对象

代码语言:javascript
复制
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 }))
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

④ 使用 concat() 将两个数组 组合起来,有重复的暂时不做处理

代码语言:javascript
复制
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 }))
    
)
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

⑤ 使用 uniqBy() 针对 “prop” 字段去重

代码语言:javascript
复制
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"

)
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

⑥ 使用 filter() 过滤掉 !!props 的对象

代码语言:javascript
复制
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";
});
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的
lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的

———-结束———

总的来说是想纪录下吧,毕竟这个让我花了2个小时写完的,本来使用原生的JS写的,写完发现太长了,还是借助工具吧。

毕竟,“一般认为,人与动物的本质区别在于制造与使用工具”。

虽然这样说不太好,没有原生的基础,我们也想不到造工具。

拜~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/197584.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月3日 下,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前置了解:
  • 原始数组:
    • ① 使用 groupBy(),第一个参数是原始数组,第二个值是根据“关键词”做筛选,在这里需要根据 label 和 type 这两个值分别做筛选,生成两个键值对象
      • ② 使用 toPairsIn() 将对象转为数组,参数是 Object 对象
        • ③ 使用 map() 将数组转为 Object 键值对 对象
          • ④ 使用 concat() 将两个数组 组合起来,有重复的暂时不做处理
            • ⑤ 使用 uniqBy() 针对 “prop” 字段去重
              • ⑥ 使用 filter() 过滤掉 !!props 的对象
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档