JS实现数组去重及数组内对象去重功能示例


Posted in Javascript onFebruary 02, 2019

本文实例讲述了JS实现数组去重及数组内对象去重功能。分享给大家供大家参考,具体如下:

大家在写项目的时候一定遇到过这种逻辑需求,就是给一个数组进行去重处理,还有一种就是给数组内的对象根据某一个属性,比如id,进行去重,下面我写了两个函数,都是可以达到这个效果的,一个是纯ES5的去重办法,一个是用了ES6的 Array.from(new Set())和ES5的reduce来进行去重

我先定义两个数组吧

var arr = [1,2,3,5,3,4,5,6,6,"test","test",true];
var person = [
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  },
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  },
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  },
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  },
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  }
];

ES5版本:

//ES5原生去重办法
function Es5duplicate(arr,type){
  var newArr = [];
  var tArr = [];
  if(arr.length == 0){
    return arr;
  }else{
    if(type){
      for(var i = 0; i < arr.length;i++){
        if(!tArr[arr[i][type]]){
          newArr.push(arr[i]);
          tArr[arr[i][type]] = true;
        }
      }
      return newArr;
    }else{
      for(var i = 0; i < arr.length;i++){
        if(!tArr[arr[i]]){
          newArr.push(arr[i]);
          tArr[arr[i]] = true;
        }
      }
      return newArr;
    }
  }
}
console.log('ES5去重',Es5duplicate(arr));
console.log('ES5去重',Es5duplicate(person,"name"));

ES6 + ES5版本:

//Es6 + ES5去重办法
function Es6duplicate(arr,type){
  if(arr.length == 0){
    return arr;
  }else{
    if(type){
      var obj = {}
      var newArr = arr.reduce((cur,next) => {
        obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
        return cur;
      },[])
      return newArr;
    }else{
      return Array.from(new Set(arr));
    }
  }
}
console.log('ES6去重',Es6duplicate(arr));
console.log('ES6去重',Es6duplicate(person,"name"));

看下结果

JS实现数组去重及数组内对象去重功能示例

看起来好像是第二种办法代码量要小一些,但是第一个通用,兼容性特别好,第二个因为牵扯到了ES6新特性,所以还是要考虑一下兼容性,但是如果你要是在vue-cli初始化生成的项目,可以随便用ES6的新特性,他自动转译了,我自己搭建了一个demo,试了好多新特性,IE9+都有效果(本身vue就不支持IE8及以下,所以IE9以下没办法实验)

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
jQuery构造函数init参数分析
May 13 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 #Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 #Javascript
Electron 如何调用本地模块的方法
Feb 01 #Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 #Javascript
原来JS还可以这样拆箱转换详解
Feb 01 #Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 #Javascript
微信小程序常用简易小函数总结
Feb 01 #Javascript
You might like
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现简单字典树的方法
2016/04/29 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python实现图片转字符小工具
2019/04/30 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
python 下载文件的几种方法汇总
2021/01/06 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
外企C语言笔试题
2013/11/10 面试题
感恩节红领巾广播稿
2014/02/11 职场文书
岗位职责怎么写
2014/03/14 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
先进工作者申报材料
2014/12/23 职场文书
简历中自我评价范文
2015/03/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
聘用合同范本
2015/09/21 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
python元组打包和解包过程详解
2021/08/02 Python
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL