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 相关文章推荐
正则表达式语法
Oct 09 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
一文了解vue-router之hash模式和history模式
May 31 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
PHP 简单日历实现代码
2009/10/28 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
php 短链接算法收集与分析
2011/12/30 PHP
mysql总结之explain
2012/02/27 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
python中id函数运行方式
2020/07/03 Python
护理学毕业生自荐信
2013/10/02 职场文书
小学生打架检讨书
2014/01/26 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL