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 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
JavaScript手风琴页面制作
May 17 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
详解Vue中watch的高级用法
May 02 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 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
CI框架装载器Loader.php源码分析
2014/11/04 PHP
教大家制作简单的php日历
2015/11/17 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
理解javascript正则表达式
2016/03/08 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python用input输入列表的实例代码
2020/02/07 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
TCP/IP的分层模型
2013/10/27 面试题
事业单位公务员的职业生涯规划
2014/01/15 职场文书
八一慰问活动方案
2014/02/07 职场文书
自荐信如何制作?
2014/02/21 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
中华魂演讲稿
2014/05/13 职场文书
艺术节开幕词
2015/01/28 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
Python使用scapy模块发包收包
2021/05/07 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL