javascript数组去重常用方法实例分析


Posted in Javascript onApril 11, 2017

本文实例讲述了javascript数组去重常用方法。分享给大家供大家参考,具体如下:

数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法进行介绍。

首先是最常见的方法,也就是添加一个临时数组,将原数组遍历,加入临时数组,每次加入时判断待加入的元素是否存在于临时数组中,代码如下:

// 对数组进行去重操作,只考虑数组中元素为数字或字符串,返回一个去重后的数组
//第一种方法,遍历,将没有的插入临时数组
function uniqArray1(arr) {
  var n=[];
  for(var i=0;i<arr.length;i++){
    //如果当前项已经保存到了临时数组,则跳过,否则加入
    if(n.indexOf(arr[i])==-1){
      n.push(arr[i]);
    }
  }
  return n;
}

那么还有没有更好的办法呢?可以采用哈希表的思想,在JavaScript中,对象的查找比数组下标的查找要快很多倍。所以我们可以创建一个对象专门来存放已加入临时数组的元素,那么每次加入新的元素时就可以通过查找对象来判断是否重复了,代码如下:

//第二种方法,使用哈希表
function uniqArray2(arr){
  var n={},//哈希表
    r=[];//零时数组
  for(var i=0;i<arr.length;i++){
    if(n[arr[i]]==null){//如果哈希表中没有,则添加到哈希表,且进入临时数组
      n[arr[i]]=true;
      r.push(arr[i]);
    }
  }
  return r;
}

还有一种方法,虽然速度没有哈希表快,但是比最基本的indexOf来的快,思想就是先经过排序函数sort,再比较相邻的元素,不同的就加到临时数组中。代码如下:

//第三种方法,先排序,再比较邻接部分
function uniqArray3(arr){
  arr.sort();
  var r=[arr[0]];
  for(var i=1;i<arr.length;i++){
    if(arr[i]!=r[r.length-1]){//由于已经经过了排序,所以相邻的是相同的
      r.push(arr[i]);
    }
  }
  return r;
}

最后实验代码如下:

//验证数组去重函数的使用
var arr=[2,3,4,2,4,5,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3];
for(var i=0;i<10000000;i++){//为了分辨出花费时间的区别,特此增加数组的长度
  arr.push(3);
}
var time1=Date.now();
var n1=uniqArray1(arr);
var time2=Date.now();
console.log(n1);//2,3,4,5说明第一种去重成功
console.log(time2-time1);//218
time1=Date.now();
var n2=uniqArray2(arr);
time2=Date.now();
console.log(n2);//2,3,4,5说明第二种去重成功
console.log(time2-time1);//63,说明对象下标的引用要比indexOf搜索快得多
time1=Date.now();
var n3=uniqArray3(arr);
time2=Date.now();
console.log(n3);//2,3,4,5说明第三种去重成功
console.log(time2-time1);//203,说明sort方法使用快排,比indexOf快,但是没有哈希快

可以看到哈希算法的速度是最快的。

Javascript 相关文章推荐
js如何判断输入字符串长度
Dec 16 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
详解Vue SPA项目优化小记
Jul 03 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
JS实现针对给定时间的倒计时功能示例
Apr 11 #Javascript
vuejs绑定class和style样式
Apr 11 #Javascript
vue监听滚动事件实现滚动监听
Apr 11 #Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 #jQuery
JS中IP地址与整数相互转换的实现代码
Apr 10 #Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 #Javascript
You might like
php的memcached客户端memcached
2011/06/14 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
详解Python中的四种队列
2018/05/21 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python集合操作方法详解
2020/02/09 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
经典c++面试题三
2015/07/08 面试题
华三通信H3C面试题
2015/05/15 面试题
理货员的岗位职责
2013/11/23 职场文书
药店主任岗位责任制
2014/02/10 职场文书
医院标语大全
2014/06/23 职场文书
保安辞职信范文
2015/02/28 职场文书
教师工作表现自我评价
2015/03/05 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL