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 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
原生js简单实现放大镜特效
May 16 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
python实现的简单抽奖系统实例
2015/05/22 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
文明餐桌活动方案
2014/02/11 职场文书
内衣营销方案
2014/03/15 职场文书
温馨提示标语
2014/06/26 职场文书
被告答辩状范文
2015/05/22 职场文书
政审证明材料
2015/06/19 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android