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与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 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有效防止同一用户多次登录
2015/11/19 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python中return的返回和执行实例
2019/12/24 Python
如何在django中添加日志功能
2020/02/06 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
三八节主持词
2014/03/17 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
自我推荐信格式模板
2015/03/24 职场文书
戒赌保证书
2015/05/11 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android