JavaScript数组去重的3种方法和代码实例


Posted in Javascript onJuly 01, 2015

数组去重的方法有很多,到底哪种是最理想的,自己不清楚。于是自己测试了下数组去重的效果和性能。测试十万个数据,代码和所耗大概时间如下。

到底采用哪种方法,根据实际情况而定吧。

/*方法一: 1,'1' 会被认为是相同的; 所有hash对象,如:{x;1},{y:1}会被认为是相同的 //10ms */
Array.prototype.unique=function(){
  var newArr=[],obj={};
  for(var i=0,len=this.length;i<len;i++){
    if(!obj[this[i]]){ 
      newArr.push(this[i]);
      obj[this[i]]=true;
    }
  }
  return newArr;
}

/*方法一改进版:所有hash对象,如:{x;1},{y:1}会被认为是相同的 //30ms*/
Array.prototype.unique=function(){
  var newArr=[],obj={};
  for(var i=0,len=this.length;i<len;i++){
    if(!obj[typeof(this[i])+this[i]]){ 
      newArr.push(this[i]);
      obj[typeof(this[i])+this[i]]=this[i];
    }
  }
  return newArr;
}

/*方法二: 去重结果最好,但耗性能   //250ms*/
Array.prototype.unique=function(){
  var newArr=this.concat();
  for(var i=0,len=newArr.length;i<len;i++) {
    for(var j=i+1,len=newArr.length;j<len;j++) {
      //注意 ===
      if(newArr[i]===newArr[j]) {
        newArr.splice(j,1);
        j--;
      }
    }
  }
  return newArr;
}

/*方法三: 不能去重hash对象 //25ms */
Array.prototype.unique = function(){
  var newArr = []; //一个新的临时数组
  for(var i = 0,len=this.length; i < len; i++){    
    if (newArr.indexOf(this[i]) == -1){  //如果当前数组的第i已经保存进了临时数组,那么跳过,否则把当前项push到临时数组里面
      newArr.push(this[i]);
    }
  }
  return newArr;
}


var arr0=[11,21,221,13,24,"134","1",{x:1,y:1},{name:"pobaby",age:"12",hobby:"football"},{name:"pobaby1",age:"121",hobby:"football1"},{x:134},{y:132},{x:143},{y:3421},"神秘人物", "火柴人技巧格斗", "超音速战场", "小小辛打砖块", "火柴人技巧格斗", "加菲猫超人", "小小辛打砖块", "卑鄙的我2", "电流导线", "飞天手推车","神D秘人物", "火柴人S技巧格斗", "超音SD速战场", "小小SD辛打砖块", "火柴人SD技巧格斗", "加菲S猫超人", "小小DF辛打砖块", "卑鄙的FS我2", "电D流导线", "飞天SD手推车","神秘SD人物", "火柴人技D巧格斗", "超音ASD速战场", "小小辛打SAD砖块", "火柴人技SD巧格斗", "加菲FDS猫超人", "小小辛打SDF砖块", "卑鄙SDF的我2", "电流SDF导线", "飞天手DF推车","神秘SD人物", "火柴人技AS巧格斗", "超音速战FS场", "小小辛SDF打砖块", "火柴人SDF技巧格斗", "加菲SD猫超人",113,231,2221,123,234,"1334","21",{x:13,y:132},{name:"pobaby2",age:"122",hobby:"football2"},{name:"pobaby13",age:"1231",hobby:"football41"},{x:13544},{y:1352},{x:14543},{y:34521},"神秘人sd物", "火柴人技sd巧格斗", "超音速sd战场", "小小辛sd打砖块", "火柴人技巧gw格斗", "加菲猫ui超人", "小小辛yi打砖块", "卑鄙的yi我2", "电流yt导线", "飞天手ytui推车","神Dyu秘人物", "火yui柴人S技yui巧格斗", "超音SDyu速战场", "小小SD辛打砖uyi块", "火柴yui人SD技巧格斗", "加yui菲S猫超人", "小小DF辛打砖ui块", "卑鄙uyi的FS我2", "电D流导yui线", "飞天SD手推uyi车","神i秘SD人物", "火柴人技Dhk巧格斗", "超音ASD速战hk场", "小小辛打SAhkD砖块", "火柴人技SD巧ghk格斗", "加菲FDS猫k超人", "小小辛打SDF砖ytui块", "卑鄙SDF的yui我2", "电流SDyuF导线", "飞天手yuiDF推车","神iy秘SD人hk物", "火柴uyi人技AS巧格hk斗", "超音hg速战FS场", "小小辛SDF打砖hjk块", "火柴人SDF技hj巧格斗", "加菲SDhk猫超人" ];

/*十万个随机数据*/
var arr=[],num;
for(var i = 0; i < 100000; i++){
  num=Math.floor(Math.random()*50);
  arr.push(arr0[num]);
}


var t1= new Date().getTime(); console.log(t1); //开始时间

arr.unique(); //去重

var t2 = new Date().getTime(); console.log(t2); //结束时间

console.log(t2-t1);
Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 #Javascript
JS实现简单的图书馆享元模式实例
Jun 30 #Javascript
JS建造者模式基本用法实例分析
Jun 30 #Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 #Javascript
JS模式之单例模式基本用法
Jun 30 #Javascript
js简单工厂模式用法实例
Jun 30 #Javascript
JavaScript判断undefined类型的正确方法
Jun 30 #Javascript
You might like
新闻分类录入、显示系统
2006/10/09 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
Yii2如何批量添加数据
2016/05/17 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
调试php程序的简单步骤
2019/10/04 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
Django实现学生管理系统
2019/02/26 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
如何使用python进行pdf文件分割
2019/11/11 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
同事打架检讨书
2014/02/04 职场文书
2014中考励志标语
2014/06/05 职场文书
文化产业实施方案
2014/06/07 职场文书
师范毕业生求职信
2014/07/11 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
运动会运动员赞词
2015/07/22 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS