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

lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的使用lodash完成数据处理;毕竟,一般认为,人与动物的本质区别在于制造与使用工具

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

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.jslodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的https://www.lodashjs.com/

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

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

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

_.groupBy(collection, [iteratee=_.identity])lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的https://www.lodashjs.com/docs/lodash.groupBy#_groupbycollection-iteratee_identity

 _.toPairsIn(object)lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的https://www.lodashjs.com/docs/lodash.toPairsIn#_topairsinobject

 _.map(collection, [iteratee=_.identity])lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的https://www.lodashjs.com/docs/lodash.map#_mapcollection-iteratee_identity

 _.concat(array, [values])lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的https://www.lodashjs.com/docs/lodash.concat#_concatarray-values

 _.uniqBy(array, [iteratee=_.identity])lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的https://www.lodashjs.com/docs/lodash.uniqBy#_uniqbyarray-iteratee_identity

 _.filter(collection, [predicate=_.identity])lodash判断对象数组是否相等_js删除数组中指定元素并返回剩下的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")

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

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

lodash.toPairsIn(  lodash.groupBy(res_data, "label")  )

lodash.toPairsIn(  lodash.groupBy(res_data, "type")  )

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

③  使用 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 }))

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

④ 使用 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 }))
    
)

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

⑤  使用 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"

)

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

⑥ 使用 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";
});

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

———-结束———

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

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

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

关注公众号呀~“【DataShow Chart】”,同步发文,完整代码, 指路 ->公众号<-:

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

 拜~

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 基于libcurl的开发

    基于libcurl的开发0 ReferenceB 站阅读的小哥的视频知乎的一片好文 libcurl 使用方法简介 1 简介 libcurl 是一个跨平台的开源网络协议库 支持 http https rtsp 等多种协议 libcurl 同样支持 HTTPS 证书授权 HTTPPOST HTTPPUT FTP 上传 HTTP 基本表单上传 代理 cookies 和用户认证 官网地址 http curl haxx se libcurl 主要提供了两种发送 HTTP 请求的方式 分别是 easyinterfac 方式

    2025年12月13日
    8
  • Lucene 3.0.0 的TokenStream与Analyzer

    Lucene 3.0.0 的TokenStream与Analyzer如果你看的Lucene相关的书是很老版本的,比如说2.4或者更早,那么对于这个版本中的Analyzer可能就不那么容易接受了,我也是看的<lucene分析与应用>这本书,比较古老的版本.今天读了一下源代码,大概说说心得,我从SimpleAnalyzer说起.SimpleAnalyzer的作用就是把一段字符串中除了符号和非文字的内容作为分…

    2022年7月22日
    12
  • 学习笔记:02_Git入门

    学习笔记:02_Git入门

    2021年7月11日
    63
  • @GetMapping和@GetMapping(value=““)的区别纪要「建议收藏」

    问题:@GetMapping指定value和不指定value的区别是什么?背景:刚开始接触时的理解@GetMapping是不需要有value的,以为没有指定的value就无法访问对应的请求接口.后来经过实战和学习……今天有空来立项说明一下.答案: 1.首先要清楚@GetMapping的标准写法肯定是有对应的value指向的. 2.对于没有对应value指向的@GetMapping有且只有一个.在这种情况下当你的路径指向这个@GetMapping的上级路径时系统会默认找寻该.

    2022年4月7日
    163
  • c语言入门教程–-14二维数组

    c语言入门教程–-14二维数组

    2021年3月12日
    208
  • (精华)2020年6月28日 JavaScript高级篇 设计模式-发布订阅模式

    (精华)2020年6月28日 JavaScript高级篇 设计模式-发布订阅模式//发布订阅对象vareventObj={//缓存列表,存放订阅者的信息list:{},//添加订阅listen:function(key,fn){if(!this.list[key]){this.list[key]=[];}typeoffn===’function’&&this.list[key].push(fn);},//发布信息

    2022年8月20日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号