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

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(使用前将#替换为@)

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

  • Socket.io 如何判断某人何时离开

    我正在使用 socket io 创建一个实时游戏 目前 当有人离开时 什么也不会发生 我想以某种方式通知服务器说谁离开了 有没有办法在用户离开时发出正确的信息 我可以让服务器每 1000 毫秒对每个人执行一次 ping 操作 或者通过其他方
  • YouTube 360​​ 视频 iframe 无法在移动浏览器中工作

    我正在尝试为 YouTube 360 视频获取嵌入的 iframe 以便在我的移动网站上播放 它在桌面浏览器上运行良好 但在移动浏览器中我只能播放平面立体视图 我可以确认它绝对是一个 HTML5 播放器 这显然是其他人正在经历的一个未解决的
  • JQuery UI Draggable - 如何知道元素是否可拖动初始化?

    我的逻辑是 if this draginited a drag disabled element shouldn t get pass here as it is inited this draggable 我搜索了很多 找不到实现这个逻辑
  • (IE 特定)如何确定输入的文本是否比输入元素的宽度长

    这是所有版本 IE 特有的问题 在所有其他浏览器中 当文本溢出时 输入元素的scrollWidth 大于输入元素的clientWidth 有没有办法确定IE中输入字段中的文本超出了输入元素宽度的键 下面是一个检查 clientWidth 与
  • 计算div中有多少个元素

    我有一个div 里面有span 有没有一种方法可以计算 div 中有多少个元素 然后将其作为值给出 例如 一个 div 中有 5 个跨度 那么它会对其进行计数并发出警报 5 请使用 JavaScript 谢谢 如果你想要后代的数量 你可以使
  • Nuxt 3动态组件中根据路由参数进行API调用

    我正在尝试创建一个简单的 Nuxt 3 应用程序用于学习目的 它使用动态路线 https v3 nuxtjs org docs directory structure pages dynamic routes加载页面时从 API 加载数据
  • 图表js不显示

    我正在尝试使用 Charts js 创建一个简单的折线图 当我运行下面的代码时 没有出现图表 我究竟做错了什么 我正在关注这个教程http www chartjs org docs latest getting started http w
  • 将表单传递给 AngularJS 组件进行验证

    我正在将旧代码库迁移到 AngularJS 1 5 所推广的新组件架构 我在对较大的表单执行此操作时遇到了问题 传统上 我会附加表单验证 如下所示
  • 在 angularJS 中覆盖模块值/常量的最佳方法

    我用 angularJS 编写了一个模块 封装了所有后端通信 为了获得更大的灵活性 我将 api 前缀作为模块上的常量值 可能是值 因为我没有在配置阶段使用它 所以像 angular module myapp data constant a
  • React:未捕获的引用错误:未定义需求

    我正在阅读 React 教程 http facebook github io react docs animation html http facebook github io react docs animation html 并且我无法
  • setTimeout() 的问题

    这是我的代码 我想要它做的是写 0 等待一秒 写 1 等待一秒 写 2 等待一秒 等等 而是写 5 5 5 5 5 for i 0 i lt 5 i setTimeout document write i 1000 http jsfiddl
  • 为什么 if 语句中的赋值等于 true?

    首先我要说的是我理解两者之间的区别 and 第一个用于将右侧值分配给左侧变量 第二个用于比较两个值的等价性 第三个不仅用于等价性 还用于类型比较 即true 1会回来false 所以我知道almost任何时候你看到if 作者很有可能打算使用
  • javascript 多维类型数组 (Int8Array) 示例

    我尝试使用类型数组而不是数组来减少内存 function createarrayInt8 numrows numcols number var arr new Int8Array numrows for var i 0 i lt numro
  • 添加元数据到快速路线

    有什么方法可以将元数据添加到 Express 的路线中吗 例如 app get some route function req res some meta data 我正在寻找一种针对我的节点应用程序的 AOP 方法 因此我想通过身份验证和
  • js中将div旋转到一定高度

    How to rotate a div to certain height suppose 10px I can rotate a div otherwise around 360 degrees I need the angle by w
  • 如何防止 CSS 或 jQuery 中单词和标点符号之间的换行

    我在一个段落中有一些文字 我的问题是 当标点符号位于单词末尾时 有时可以换行到下一行 像这样 This is the text This is a new line 我可以用 CSS 或 jQuery 解决这个问题吗 如果您不在单词和标点符
  • 检测未定义的对象属性

    如何检查 JavaScript 中的对象属性是否未定义 检查属性值是否为特殊值的常用方法undefined is if o myProperty undefined alert myProperty value is the special
  • 如何找出javascript中加载了哪些javascript?

    继另一个问题的评论之后 我问自己是否有办法获取页面上加载的所有 js 代码的列表 就像 Firebug 或 chrome Inspector 所做的那样 有没有一种纯javascript的方法 一种方法是抓取脚本标签 但这样你可能会错过动态
  • 使用 Google Visualization,为什么 DataView 内容显示在 ChartRangeFilter 中,而不显示在其关联的 LineChart 中?

    下面的代码应该从 CSV 文件填充 DataView 然后 DataView 被输入到 DashBoard 其中包含绑定在一起的 LineChart 和 ChartRangeFilter 我的问题是 虽然 ChartRangeFilter
  • Page_ClientValidate 正在验证多次。

    我的问题是 验证摘要消息 警报 显示两次 我无法弄清楚原因 请帮忙 这是代码 function validate javascript function if typeof Page ClientValidate function var

随机推荐

  • 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 小孙