概要

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

需求

有这样一个数组


  1. [{
  2. _id: 123,
  3. name: '张三'
  4. },{
  5. _id: 124,
  6. name: '李四'
  7. },{
  8. _id: 123,
  9. name: '张三'
  10. }]

实际上我们只需要


  1. [{
  2. _id: 123,
  3. name: '张三'
  4. },{
  5. _id: 124,
  6. name: '李四'
  7. }]

去重

简单数组的去重


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

以对象为元素的数组去重

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

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

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


  1. function removeRepeat(arr, field){
  2. return arr
  3. }

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


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

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


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

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


  1. for(let key in reSet){
  2. arr.splice(reSet[key], 1)
  3. }
  4. /*
  5. arr = [{
  6. _id: 123,
  7. name: '张三'
  8. },{
  9. _id: 124,
  10. name: '李四'
  11. }]
  12. */

5、说明

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

完整源码


  1. function removeRepeat(arr, field){
  2. let s = [], result = {}, reSet = {}
  3. for(let v of arr){
  4. s.push(v[field])
  5. }
  6. for(let i=0,len=s.length;i<len;i++){
  7. if(!result[s[i]] && result[s[i]] !== 0) {
  8. result[s[i]] = i
  9. } else {
  10. reSet[s[i]] = i
  11. }
  12. }
  13. for(let key in reSet){
  14. arr.splice(reSet[key], 1)
  15. }
  16. return arr
  17. }
  18. // removeRepeat(arr, '_id')

补充

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

1、更简洁的代码。

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


  1. const removeRepeat = (arr, field) => {
  2. let s = {}
  3. for(let i=0,len=arr.length;i<len;i++){
  4. s[arr[i][field]] = arr[i]
  5. }
  6. return Object.values(s)
  7. }

总结

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

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

Javascript系列——对象元素的数组去重实现的更多相关文章

  1. JavaScript学习系列博客_28_JavaScript 数组去重

    数组去重 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个元素 for(var i=0 ; i<arr.length ; i++ ...

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

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

  3. JavaScript常见的五种数组去重的方式

    ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...

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

    JavaScript系列-----Objectj基于哈希存储<Key,Value>之Value 1.问题提出 在JavaScript系列-----Object之基于Hash<Key, ...

  5. javascript高逼格代码实现数组去重,JSON深度拷贝,匿名函数自执行,数字取整等

    1.如何装逼用代码骂别人傻逼 (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] 2.如何优雅的用代 ...

  6. 重学ES系列之Set实现数组去重、交集、并集、差集

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 关于JavaScript中省略元素对数组长度的影响

    在学习<JavaScript权威指南>第六版的第7.1节中通过数组直接量创建数组时,我们可以不给数组的某个元素赋值,它就会使undefined.虽然是undefined,但我们调用数组对象 ...

  8. js 数组判断是否包含某元素 或 数组去重

    判断包含: 1.借助 jquery  $.inArray(obj.UNIVERSITY_NAME, arryDatas) < 0var arr = [ "xml", &quo ...

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

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

随机推荐

  1. NYOJ 737 石子合并(一)

    题意 排成一排的石子,每次合并相邻两堆并由一定的代价,求合并成一堆的最小代价 解法 区间dp 枚举长度 dp[i,j]表示合并石子堆编号从i到j为一堆所需的最小代价(这个题目的代价是sum(i..j) ...

  2. JQ UI dialog

    初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...

  3. 使用 Jersey 和 Apache Tomcat 构建 RESTful Web 服务

    作者: Yi Ming Huang, 软件工程师, IBM Dong Fei Wu, 软件工程师, IBM Qing Guo, 软件工程师, IBM 出处: http://www.ibm.com/de ...

  4. vue2.0变化(转载)

    原文链接:https://www.cnblogs.com/itbainianmei/p/6062249.html 1.每个组件模板template,不再支持片段代码 之前: <template& ...

  5. Spring注解+Axis2开发WebService

    用Spring注解方式: 配置扫描指定包下的类 <context:component-scan base-package="包名" />   标识类为spring管理的 ...

  6. ubuntu下使用Nexus搭建Maven私服

    ubuntu下使用Nexus搭建Maven私服 1.私服简介: 私服是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构件.有了私服之后,当 Maven 需要下载构件时,直接请求私服, ...

  7. tddl

    淘宝根据自己的业务特点开发了TDDL(Taobao Distributed Data Layer 外号:头都大了 ?_Ob)框架,主要解决了分库分表对应用的透明化以及异构数据库之间的数据复制,它是一个 ...

  8. maven也是Apache开发的,也是java开发的。maven需要你本地系统JDK的支持

    1. 3. 添加 M2_HOME 和 MAVEN_HOME 添加 M2_HOME 和 MAVEN_HOME 环境变量到 Windows 环境变量,并将其指向你的 Maven 文件夹. M2_HOME ...

  9. [AngularJS]Chapter 1 AnjularJS简介

    创建一个完美的Web应用程序是很令人激动的,但是构建这样应用的复杂度也是不可思议的.我们Angular团队的目标就是去减轻构建这样AJAX应用的复杂度.在谷歌我们经历过各种复杂的应用创建工作比如:GM ...

  10. 设计模式入门之代理模式Proxy

    //代理模式定义:为其它对象提供一种代理以控制对这个对象的訪问 //实例:鉴于书中给出的样例不太好.并且有些疑问,所以直接用保护代理作为实例 //要求,一旦订单被创建,仅仅有订单的创建人才干够改动订单 ...