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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
js格式化时间小结
Nov 03 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
vue实现购物车案例
2020/05/30 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python实现计算资源图标crc值的方法
2014/10/05 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Python实现井字棋小游戏
2020/03/09 Python
python使用建议技巧分享(三)
2020/08/18 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
使用索引有什么好处
2016/07/27 面试题
财产公证书格式
2014/04/10 职场文书
银行求职信范文
2014/05/26 职场文书
行政求职信
2014/07/04 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
十月围城观后感
2015/06/08 职场文书
2015选调生工作总结
2015/07/24 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技