前端数组对象去重的几种方法,拿来即用

2023-11-05

工作中有许多地方地方需要前端处理数据,总结了几种数据去重的方法都实验过,可以使用

  初始数据 id有相同的需要去重
  let person = [
         { id: 0, name: "小明" },
         { id: 1, name: "小张" },
         { id: 2, name: "小李" },
         { id: 3, name: "小孙" },
         { id: 1, name: "小周" },
         { id: 2, name: "小陈" },
      ];
 
      // 第一种使用去重reduce
      
      let obj = {};
      let peon = person.reduce((cur, next) => {
         obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
         return cur;
      }, []) //设置cur默认类型为数组,并且初始值为空的数组
      console.log(peon);
      
      // 第二种种使用reduceRight去重
      //  reduceRight和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的   数组项做累加。
      
      let hash = {};
      const newArr = person.reduceRight((item, next) => {
         hash[next.id] ? '' : hash[next.id] = true && item.push(next);
         return item
      }, []);
      console.log(newArr);
      
      // 第三种   for循环 利用对象访问属性的方法,判断对象中是否存在重复的key
      // 一
      var result = [];
      var obj = {};
      for (var i = 0; i < person.length; i++) {
         if (!obj[person[i].id]) {
            result.push(person[i]);
            obj[person[i].id] = true;
         }
      }
    
      for (var i = 0; i < person.length; i++) {
         for (var j = i + 1; j < person.length; j++) {
            if (person[i].id == person[j].id) {
               person.splice(j, 1);
            }
         }
      }
      console.log(person);
      
      // 第三种 封装成方法 使用for循环 利用对象访问属性的方法,判断对象中是否存在重复的key
      
      function deWeight(arr) {
         for (var i = 0; i < arr.length - 1; i++) {
            for (var j = i + 1; j < arr.length; j++) {
               if (arr[i].id == arr[j].id) { // id为需要去重字段
                  arr.splice(j, 1);
                  //因为数组长度减小1,所以直接 j++ 会漏掉一个元素,所以要 j--
                  j--;
               }
            }
         }
         return arr
      }
      console.log(deWeight(person))
      
      // 第四种 封装成方法 使用for循环 利用对象访问属性的方法,判断对象中是否存在重复的key
      // 保留原数据,获取去重后的新数组
      
      function distinct1(arr, key) {
         var newobj = {}, newArr = [];
         for (var i = 0; i < arr.length; i++) {
            var item = arr[i];
            if (!newobj[item[key]]) {
               newobj[item[key]] = newArr.push(item);
            }
         }
         return newArr;
      }
      console.log(distinct1(person, 'id'))
      
      // 第五种 和第四种差不多 保留原数据,获取去重后的新数组
      
      function distinct2(arr, key) {
         var newArr = [];
         for (var i = 0; i < arr.length; i++) {
            var flag = true;
            for (var j = 0; j < newArr.length; j++) {
               if (arr[i][key] == newArr[j][key]) {
                  flag = false;
                  break
               };
            };
            if (flag) {
               newArr.push(arr[i]);
            };
         };
         return newArr;
      }
      console.log(distinct2(person, 'id'))
	
	  // 第六种 会更改数组的原始数据
	  
      function distinct3(arr, key) {
         for (let i = 0; i < arr.length; i++) {
            for (let j = i + 1; j < arr.length; j++) {
               if (arr[i][key] === arr[j][key]) {
                  arr.splice(j, 1);
                  j = j - 1;
               }
            }
         }
         return arr;
      }
      console.log(distinct3(person, 'id'))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端数组对象去重的几种方法,拿来即用 的相关文章

随机推荐

  • Python随便练练

    定义一个变量 如果这个变量大于60就打印 恭喜您考试及格 如果这个变量小于60 兄dei再接再厉 a 70 if a gt 60 print 兄dei你及格啦 else print 兄dei你需要再接再厉 输出 兄dei你及格啦 交互式 a
  • pycharm中设置默认的python解释器/添加现有的虚拟环境

    问题描述 conda创建新的虚拟环境后 如何设置默认的python解释器 使模型调试和运行时能够自动调用默认的解释器 操作步骤 1 使用coda env list查看所有虚拟环境的路径 从而找到目标虚拟环境的路径 2 从设置中选择pytho
  • pppoe流程

    转载自http blog sina com cn s blog 4db83b6f01000apg html PPPoE的数据报文是被封装在以太网帧的数据域内的 以太网帧头包括 目的MAC地址 该阶段为ffffffffffff的广播地址 源M
  • LeetCode刷题总结 - 面试经典 150 题 -持续更新

    LeetCode刷题总结 面试经典 150 题 持续更新 其他系列 数组 字符串 88 合并两个有序数组 27 移除元素 26 删除有序数组中的重复项 80 删除有序数组中的重复项 II 169 多数元素 189 轮转数组 121 买卖股票
  • 计算机系统盘没用的东西怎么删除,怎么删除c盘没用的文件 方法有哪些【图文】...

    近几年我国的发展可是非常的迅速 现在的电脑已经不是稀罕的东西了 台式电脑和 笔记本电脑 很多家庭都有 使用电脑我们大家都知道 电脑是一个大工程 我们的每一步操作都会在电脑上留下痕迹 尤其是我们浏览一些网页或者下载一些视频 这些垃圾就会积存在
  • 正射影像、倾斜摄影测量相关软件汇总

    从事倾斜摄影测量相关工作的同事经常会用到一些三维建模软件 使用过程中会发现不同软件的优劣势也有一定的区别 以下列举的软件排名不分先后 大家可以根据自己的工作和学习要求进行选择 1 Pix4D Mapper Pix4Dmapper是一款专门用
  • js数组队列,算法

    后面添加 let arr1 1 2 3 4 5 6 7 8 arr1 push 9 console log arr1 前面添加 arr1 unshift 0 console log arr1 前面删除 arr1 shift console
  • vscode jupyter找不到系统默认的python解释器

    今天zaivscode上使用jupyter时 select kernel发现找不到我系统的默认python解释器了 只有两个conda环境 我的系统默认的是Anaconda 而且之前已经在vscode里配置过了 今天就发现在vscode里怎
  • Windows与Linux动态库的两种加载方式

    Windows上的动态库 dll 加载方式有两种 1 静态加载 运用 pargma comment lib xxx lib 方式 这种方式需要 头文件 lib文件和dll文件配合使用 运行时是直接将动态库加载到内存中的 运用起来也比较方便
  • linux下面用C语言设计实现一个计算器

    我们对于计算器的功能已经非常熟悉了 这个计算器包括 二进制 八进制 十进制 十六进制 四种格式 格式之间可以相互切换 能够实现的的运算有 加减乘除 最基本的功能 还有比如 tan sin cos Exp x y x 3 x 2 n log
  • Java 中String类型变量的使用

    博主前些天发现了一个巨牛的人工智能学习网站 通俗易懂 风趣幽默 忍不住也分享一下给大家 点击跳转到网站 理解 String属于引用数据类型 翻译为 字符串 声明String类型变量时 使用一对 String可以和八种基本数据类型变量做运算
  • UDP协议全面实验分析详解

    Thank For LYJ 目录 一 实验目的 二 实验环境 三 实验原理 四 实验内容 练习1 编辑并发送UDP数据报 练习2 UDP单播通信 练习3 UDP广播通信 五 实验结果 练习1 练习2 练习3 六 思考题 1 UDP协议的 校
  • Azure虚拟网络基础

    文章目录 Azure虚拟网络基础 什么是 Azure 虚拟网络 为何要使用 Azure 虚拟网络 如何创建虚拟网络 登录 Azure 创建虚拟网络 连接到VM并测试是否能够ping通 Azure虚拟网络基础 什么是 Azure 虚拟网络 A
  • Flutter 列表踩坑2

    今天遇到一个列表item 的model 更新了以后 但是list 的model没更新的问题 问题解决了 来发下心得 最后找到原因 原来是页面刷新了 以后得注意以下问题 1 我已经使用了PageControler 但是 pageControl
  • 腾讯云域名解析DNS免费版线路、DNS节点及TTL值说明

    腾讯云域名提供免费版DNS解析和付费版DNS解析 腾讯云百科来详细说下DNS解析DNSPod免费版解析配置说明 包括解析线路 DNS节点分布 域名防护 最低TTL等配置参数 腾讯云域名DNS解析DNSPod免费版 腾讯云域名可以免费试用DN
  • 《ANSYS FLUENT 16.0超级学习手册》——第2章 FLUENT软件介绍2.1 FLUENT软件特点简介...

    本节书摘来自异步社区 ANSYS FLUENT 16 0超级学习手册 一书中的第2章 第2 1节 作者 唐家鹏 更多章节内容可以访问云栖社区 异步社区 公众号查看 第2章 FLUENT软件介绍 CFD商业软件FLUENT是通用CFD软件包
  • mysql 浮点型详解 简书_8-MySQL数据类型

    下面正式开始mysql操作学习了 基础知识点会枯燥 会无味 会焦虑 但是相信当你熟练掌握后会无比的兴奋 因为你在见证数据给这个时代带来的伟大变革 你正在见证由数据库驱动的信息革命 可以W3C菜鸟教程中查看mysql中关于数据类型的部分 im
  • 数据库杂记

    数据库杂记 1 PostgreSQL 1 1 安装 UUID 生成扩展 1 2 根据多个字段去重 并删除重复数据 保留一条 1 3 表字段更新 1 3 1 同一张表用一个字段更新另一个字段 1 3 2 两张表关联更新 1 3 3 多张表关联
  • 图数据库突然爆火,但数字化仍然道阻且长

    短则两三年 多则五六年 图数据库市场会角逐出最终赢家 而目前许多公司都处于秣马厉兵的状态之中 数科星球 原创 作者丨科科 编辑丨十里香 图数据库的出现犹如大数据行业的一抹绿色 在日新月异的场景中 图数据库发挥了不可取代的作用 现在 该行业走
  • 前端数组对象去重的几种方法,拿来即用

    工作中有许多地方地方需要前端处理数据 总结了几种数据去重的方法都实验过 可以使用 初始数据 id有相同的需要去重 let person id 0 name 小明 id 1 name 小张 id 2 name 小李 id 3 name 小孙