js数组去重与循环对象

news2024/11/29 4:33:16

目录

一、数组对象去重

1.1、需要获取重复数据

1.2、直接过滤filter+findIndex

二、循环对象

三、多层数组对象过滤

一、数组对象去重

1.1、需要获取重复数据

 let persons = [
        {
            "name": "yzq",
            "age": 20,
            "gender": true,
            "height": 10
        },
        {
            "name": "yzq",
            "age": 20,
            "gender": false,
            "height": 20
        },
        {
            "name": "xeon",
            "age": 20,
            "gender": true,
            "height": 30
        },
        {
            "name": "xeon",
            "age": 20,
            "gender": true,
            "height": 180
        },
        {
            "name": "xeon",
            "age": 20,
            "gender": false,
            "height": 180
        },
        {
            "name": "yz1",
            "age": 30,
            "gender": true,
            "height": 180
        }
    ]

    let data = [];
    persons.forEach(item => {
        if (data.length == 0) {
            data.push(item);
        } else {
            let isDiff = true;//是否不同
            for (let i = 0; i < data.length; i++) {
                let dataItem = data[i];
                if (dataItem.name == item.name && dataItem.age == item.age) {
                    /*集合中已经存在相同数据*/
                    isDiff = false;
                    break;
                }
            }
            if (isDiff) {
                data.push(item);
            }
        }
    });
    // persons = data
    console.log(persons, '去重后的数据:', data)

上图左边为去重前,右边为去重后 

1.2、直接过滤filter+findIndex

 persons = persons.filter(
      (obj, index) =>
        persons.findIndex(
          (item) =>
            item.name == obj.name &&
            item.age == obj.age
        ) === index
    );
var newArr = this.IsNull.filter((item, index) => {
                return this.IsNull.indexOf(item) === index;
});

上面第一种改变自身,第二种不改变自身。

二、循环对象

    let obj = {
        a: { "name": "xeon" },
        b: { "age": 20 },
        c: { "gender": false },
    }
    for (item in obj) {
        console.log("obj", item, obj[item]);
    }
    let key = Object.keys(obj)
    let key2 = Object.values(obj)
    let key3 = Object.entries(obj);
    for (let [key, value] of Object.entries(obj)) {
        console.log(key, value);
    }
    console.log(key, key2, key3);

输出结果:

(1)直接循环对象,用for...in..,可以拿到obj对应的key与values

(2)借助Object.keys()可以将对象的key依次取到,变为一个数组 

(3)借助Object.values()可以将对象的values依次取到,变为一个数组 

(4)借助Object.entries()返回一个给定对象自身可枚举属性的键值对数组

(5)Vue视图中用v-for循环对象:

<div v-for="(val, key, index) in list">

<span>值:{{ val }}</span>

<span>键:{{ key }}</span>

<span>索引:{{ index }}</span>

</div>

三、多层数组对象过滤

左边为原始数据,根据给定的id取出对应的对象和所在层级。

<script>
    let arr = [{
        name: '001',
        list: [{
            id: '913072328433205248',
            val: '一组001'
        },
        {
            id: '913072328433101010',
            val: '一组002'
        }
        ]
    }, {
        name: '002',
        list: [{
            id: '1104405913202069504',
            val: '二组001'
        }, {
            id: '1104405913202076246',
            val: '二组002'
        }, {
            id: '1104406110581821440',
            val: '二组003'
        }]
    }, {
        name: '003',
        list: [{
            id: '6666',
            val: '三组001'
        }]
    }]
    let brr = ['1104405913202069504', '913072328433205248', '1104406110581821440']
    //   let brr = ['1104405913202069504', '1104406110581821440']
    // filter():条件是啥,留下的数据就是啥
    for (let i = 0; i < brr.length; i++) {
        arr.map((it) => {
            it.list = it.list.filter((sub, index) => brr.includes(sub.id))
        })
    }
    // 把数组中长度为0的元素删掉==把不为0的留下来
    let b = arr.filter((it) => {
        return it.list && it.list.length != 0
    })
    console.log('最终', b);
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/572576.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

k8s配置资源管理|secret|configmap

k8s配置资源管理|secret|configmap 一 配置资源管理1 创建 Secret2 使用方式3 将 Secret 导出到环境变量中 二 ConfigMap1 Pod 中使用 ConfigMap2 Pod的创建3 用 ConfigMap 设置命令行参数4 通过数据卷插件使用ConfigMap 一 配置资源管理 //Secret Secret 是用来保存密码、tok…

2023年6月合肥/厦门/长春/深圳DAMA-CDGP数据治理专家认证报名

目前6月18日CDGA&CDGP考试目前开放的城市有&#xff1a;北京、上海、广州(满)、深圳、长沙、呼和浩特、杭州&#xff08;满&#xff09;、南京、济南&#xff08;满&#xff09;、成都、西安、武汉&#xff08;满&#xff09;、天津。 新增了武汉、天津这2个城市。另外合肥…

【Netty】Reactor 模型(十)

文章目录 前言一、传统服务的设计模型二、NIO 分发模型三、Reactor 模型3.1、Reactor 处理请求的流程3.2、Reactor 三种角色 四、单Reactor 单线程模型4.1、消息处理流程4.2、缺点 五、单Reactor 多线程模型5.1、消息处理流程5.2、缺点 六、主从Reactor 多线程模型6.1、Reactor…

Python的一些基础实操练习题

书接上文多看一眼多进步&#xff0c;python入门到放弃&#xff0c;是根据python的知识点的一些基础练习题&#xff0c;说了是基础练习题&#xff0c;基础练习题&#xff0c;基础练习题&#xff0c;水平高的就别看了&#xff0c;平高的就别看了&#xff0c;高的就别看了&#xf…

IP协议-服务类型字段

服务类型&#xff08;Type of Service&#xff09;字段是比较复杂的一个字段&#xff0c;该字段经过多次标准变更。 IPv4报文 一、最初标准&#xff08;RFC 791&#xff09; RFC 791定义TOS字段总共占用8bit&#xff0c;分为IP Precedence优先级&#xff08;3bit&#xff09;、…

Ansys Zemax | 如何将高斯光整形为平顶光

概要 本文展示了如何设计光束整形器将激光器产生的高斯分布的光转换为平顶分布的光输出。&#xff08;联系我们获取文章附件&#xff09; 介绍 光束整形光学元件可以将入射光的光强分布转换为其他特定的分布输出。最常见的例子就是将激光器产生的高斯分布的光转换为平顶&#x…

GMesh的Mesh操作面板介绍

GMesh操作面板介绍 Define 用于控制网格生成过程中各个单元的尺寸大小 “Size at points”选项允许您指定空间中某些点的尺寸大小。这些点可以是模型的几何结构中的点&#xff0c;也可以是在Gmsh中手动定义的点&#xff08;使用“Point”命令&#xff09;。在这种情况下&…

pycharm在终端运行时ps 不显示环境

如果下面显示的是ps ----- 而不是 则需要把这儿修改一下

2023年Java教学大纲!好程序员教你如何快速学会Java!

今天好程序员给大家分享一篇2023年的Java教学大纲&#xff0c;跟着这篇大纲学习&#xff0c;并且熟练掌握该技能&#xff0c;实习轻松月入过万不是梦&#xff01; 一、Java初级程序员必须要掌握的技能&#xff1a; Java基础知识控制声明面向对象的概念数组字符串异常处理输入/输…

Ubuntu22.04安装最新Eigen库

按道理&#xff1a;该方法适用所有Linux&#xff0c;适合安装多版本 本文采用源码 cmake的方法安装&#xff0c;故前置条件&#xff1a; 源码下载&#xff0c;官网下载或GitLab下载安装cmake&#xff08;没有安装cmake&#xff0c;也可以采用其他办法安装&#xff09; 官网下…

解决win无法删除多层嵌套文件夹

起因&#xff1a;昨天研究jpackage工具&#xff0c;不小心搞得一个文件夹里嵌套了好几百个文件夹&#xff0c;用win自己的删除删不掉&#xff0c;shiftdel直接删除也不行&#xff0c;直接弹窗删除错误&#xff1b; 后来用电脑管家下载了个“文件粉碎”&#xff0c;添加目录&am…

硬核机器学习知识点教学--(代码讲解)

用代码和实战讲解机器学习&#xff0c;零基础一样看得懂&#x1f44f;&#x1f3fb;&#x1f44f;&#x1f3fb;&#x1f44f;&#x1f3fb; 复习、学习、备战考试皆可用&#x1f44f;&#x1f3fb;&#x1f44f;&#x1f3fb;&#x1f44f;&#x1f3fb; 本系列持续更新中&a…

举个栗子~Tableau 技巧(254):学做圆形维诺图(Voronoi diagram)

关于维诺图 维诺图用于分析不同集合之间的交集和差集关系。在数据科学和统计学中&#xff0c;它常用于可视化不同数据集之间的重叠和交集&#xff0c;以便更好地理解它们之间的关系和差异。 例如&#xff0c;我们可以使用维诺图来展示不同客户群之间的交集&#xff0c;以便更…

编辑与校对的艺术:如何提高公文写作质量

在写作过程中&#xff0c;编辑与校对是提高作品质量的关键环节。它们不仅涉及语法、拼写和标点等基本问题&#xff0c;还包括文本的组织、表达和内容。通过掌握编辑与校对的艺术&#xff0c;你可以使你的文字更具说服力、更清晰易懂&#xff0c;从而更有效地传达你的观点。 1.认…

分布式系统监控zabbix安装部署及自定义监控

目录 一、zabbix的基本概述1.1 zabbix 监控原理1.2 Zabbix 6.0 新特性1.3 Zabbix 6.0 功能组件1.4 zabbix的监控对象1.5 zabbix的常用术语 二、zabbix进程详解三、zabbix的监控框架四、zabbix源码安装及部署4.1 部署 zabbix 服务端4.2 安装 zabbix 客户端&#xff0c;实现 zabb…

00后学什么技术有前途?2023年Java和前端发展前景分析!

00后的你还在想着进厂吗&#xff1f;每天在流水线上打螺丝&#xff0c;过着一成不变的日子&#xff0c;而且每个月就休息那么几天。如果你不想进厂&#xff0c;特别是对那些20岁刚出头或者学历不是那么有优势的年轻人&#xff0c;好程序员建议还是应该去学习一门技术&#xff0…

从 OceanBase 迁移数据到 DolphinDB

OceanBase 是一款金融级分布式关系数据库&#xff0c;具有数据强一致、高可用、高性能、在线扩展、高度兼容 SQL标准和主流关系数据库、低成本等特点&#xff0c;但是其学习成本较高&#xff0c;且缺乏金融计算函数以及流式增量计算的功能。 DolphinDB 是一款国产的高性能分布…

Micro-python Socket 支持 ROS2 topic 框架 (一)

消息Topic ROS2官方文档 Topic官方介绍 是各节点之间的信息交流媒介&#xff0c;可以实现一对一&#xff0c;一对多&#xff0c;多对一&#xff0c;多对多的信息交流&#xff0c;如图所示 &#xff08;一&#xff09;使用工具打开消息流图 打开rqt_graph&#xff08;注意其…

如何利用IDEA将Git分支代码回退到指定历史版本

一、背景 作为一名后端开发&#xff0c;相信大家一定遇到过这样的情景&#xff0c;代码开发人员过多&#xff0c;并且开发分支过多&#xff0c;导致代码版本管理困难&#xff0c;这样就难免遇到一些代码合并出错&#xff0c;比如&#xff0c;当我提交了本次修改到本地和远程分…

Spring Boot注解@Async与线程池的配置

目录 使用异步注解创建异步任务 Async注解 使用Demo 线程池配置 Spring Boot默认用于异步任务线程池配置 线程池配置 线程池隔离 为什么需要线程池隔离&#xff1f; 线程池隔离实现Demo 线程池配置&#xff1a; 异步任务&#xff1a; 测试demo 参考内容&#xff1a; 使…