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 相关文章推荐
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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
是否存在第一台收音机的说法
2021/03/01 无线电
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
python选择排序算法的实现代码
2013/11/21 Python
详解python3百度指数抓取实例
2016/12/12 Python
详解Python中类的定义与使用
2017/04/11 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
大学生评语大全
2014/04/18 职场文书
政治学求职信
2014/06/03 职场文书
员工安全生产责任书
2014/07/22 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
春风化雨观后感
2015/06/11 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android