概要

这是一篇记录文,记录数组操作对象去重的实现。

需求

有这样一个数组


[{_id: 123,name: '张三'
},{_id: 124,name: '李四'
},{_id: 123,name: '张三'
}]

实际上我们只需要


[{_id: 123,name: '张三'
},{_id: 124,name: '李四'
}]

去重

简单数组的去重


Array.from(new Set([1,1,2,3,4,4])) // [1,2,3,4]

以对象为元素的数组去重

和数组相关的算法多种多样,在你以为自己已经掌握数组之后,会发现很多和数组相关的算法仍旧很复杂。

下面我将讲述一个入门等级的数组算法,解决上面提出的需求。

1、定义一个函数removeRepeat,它需要传入2个参数,arr表示需要去重的数组,field表示需要比较的key。比如我们的需求是比较 _id 是否有重复。


function removeRepeat(arr, field){return arr
}

2、需要一个空数组,用来存储每个对象元素中field对应的value。


let s = []
for(let v of arr){s.push(v[field])
}
//s = [123, 124, 123]

3、将所有field的值存到数组之后,它们的下标一一对应原数组的下标(这点很重要),接着我们需要2个对象集合,result用来存储s里遍历出来的元素,如果有重复,就将重复的元素丢到reSet对象里面。


let result = {}, reSet = {}
for(let i=0,len=s.length;i<len;i++){if(!result[s[i]] && result[s[i]] !== 0) {//如果result不存在当前的key并且它不为0时result[s[i]] = i} else {reSet[s[i]] = i}
}
// result = {123: 0, 124: 1} 这是去重重复后的元素
// reSet = {123: 2} 我们将重复的元素123作为key,它的下标2作为value。

4、上一步得到了result和reSet2个对象,那么,我们该用哪个对象来处理原数组的去重呢?只需要reSet,reSet记录了要去重的对象所在的下标,那么可以直接用splice干掉它。


for(let key in reSet){arr.splice(reSet[key], 1)
}
/*
arr = [{_id: 123,name: '张三'
},{_id: 124,name: '李四'
}]
*/

5、说明

关键的第3和4步,都是用对象来处理,这样做的好处是时间复杂度可以达到O(1),如果用数组来保存,则需要2个for循环,时间复杂度变成了O(n²)。

完整源码


function removeRepeat(arr, field){let s = [], result = {}, reSet = {}for(let v of arr){s.push(v[field])}for(let i=0,len=s.length;i<len;i++){if(!result[s[i]] && result[s[i]] !== 0) {result[s[i]] = i} else {reSet[s[i]] = i}}for(let key in reSet){arr.splice(reSet[key], 1)}return arr
}// removeRepeat(arr, '_id')

补充

受到各路大神的解法影响,我也针对上面代码的不足做了修改。

1、更简洁的代码。

2、支持多个重复对象的去重,缺点是会改变原来的排序。


const removeRepeat = (arr, field) => {let s = {}for(let i=0,len=arr.length;i<len;i++){s[arr[i][field]] = arr[i]}return Object.values(s)
}

总结

数组还有各种有趣的操作,也经常作为各大公司考察的题型之重,多练习和数组相关的算法会很有帮助。

原文地址:https://segmentfault.com/a/1190000012873968

转载于:https://www.cnblogs.com/lalalagq/p/9959426.html

Javascript系列——对象元素的数组去重实现相关推荐

  1. Java数组去重的多种方法,[Java教程]JavaScript常见的五种数组去重的方式

    [Java教程]JavaScript常见的五种数组去重的方式 0 2016-12-14 15:00:17 ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 ...

  2. 大学解惑03 - 数组内包含多个name和count的对象元素,name去重,并且count累加

    题目大致是一个数组,内部元素是N个对象,对象内包含name和count属性,例如以下代码,代码中每个对象元素中都包含name属性和count属性,而name属性是可重复的,可能会是n个,count是数 ...

  3. JavaScript专题(二)数组去重,会就要会的理直气壮

    JavaScript专题系列之数组去重 相信当部分开发同学都会遇到这个问题,它的答案有很多种,但是想要真的的回答好这个问题却比较难,我们今天来看看应该怎么回答这个问题. 本文篇幅较长,不妨收藏下来慢慢 ...

  4. JavaScript系列-----对象基于哈希存储(Key,Value之Key篇) (1)

    1.Hash表的结构 首先,允许我们花一点时间来简单介绍hash表. 1.什么是hash表 hash表是一种二维结构,管理着一对对<Key,Value>这样的键值对,Hash表的结构如下图 ...

  5. 温故js系列(7)-数组去重由慢到快由繁到简

    前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:数组去重 JavaScript-数组去 ...

  6. JS 数组添加元素、删除元素、数组去重

    文章目录 一.往数组中添加元素 1.array.push() 2.array.unshift() 3.array.splice() 4.扩展运算符 5.array.concat() 二.删除数组中某个 ...

  7. JavaScript Array对象用于定义数组

    数组定义格式 方式1: var 变量名 = new Array(元素列表); var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据(元素) 方式2:var 变量 ...

  8. JS对以对象组成的数组去重

    这是从https://segmentfault.com/q/1010000006954351参考的,达到了我要去重的功能!!! var hash = {};//arr是要去重的对象数组 arr = a ...

  9. JavaScript常用的8个数组去重实战源码

    1.利用对象的属性 使用对象属性不重名的特性. var arr = ['qiang','ming','tao','li','liang','you','qiang','tao']; console.t ...

最新文章

  1. JS原生选项卡 – 幻灯片效果
  2. 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
  3. 3年工作经验你的程序员应该具备的技能
  4. python中比较重要的几个函数_Python 几个重要的内置函数 python中的内置函数和关键字需要背过吗...
  5. jquery ajax html php区别,ajax与jquery的区别是什么
  6. zabbix监控之邮件报警通知
  7. 偶然的相遇【我与51CTO的故事】
  8. java数据结构和算法
  9. 5G+折叠屏:华为Mate Xs打造多项创新体验
  10. 网页游戏开发入门教程一(webgame+design)
  11. 与其他的PDF编辑器相比,迅捷PDF编辑器实在好用太多了
  12. openg-光照贴图
  13. VS2019删除空白行
  14. matlab里的speed,matlab虚数 分析一下getspeed()函数
  15. 美啦:从工具到美妆共享经济平台的豹变
  16. Codeforces 106C Buns 【0-1背包】
  17. English - because of,due to ,thanks to ,owing to ,as a result of ,on account of解析
  18. ISLR 读书笔记二:评估模型的准确性
  19. 《大话数据结构》读书笔记-树
  20. python 路由_静态路由配置

热门文章

  1. H - 拦截导弹 OpenJ_Bailian - 2945(dp动态规划)
  2. java enum.parse_java 枚举的简单使用(enum)
  3. php获取随机图片,PHP 随机显示某张图片
  4. 【图像超分辨率】Deep Learning for Multiple-Image Super-Resolution
  5. Codeforce1311B. WeirdSort (冒泡排序)
  6. [图神经网络] 图节点Node表示---GCN
  7. C++中const迭代器 和 const_iterator的区别
  8. AngularJS 详解Directive(指令)机制
  9. 2018程序员不能错过的编程挑战网站 Top10
  10. python运行报错