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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
简单分析js中的this的原理
Aug 31 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 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 第二节 数据类型之转换
2012/04/28 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php实现webservice实例
2014/11/06 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
初步探究Python程序的执行原理
2015/04/11 Python
numpy数组拼接简单示例
2017/12/15 Python
Django中的Signal代码详解
2018/02/05 Python
Python高级用法总结
2018/05/26 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
python3中数组逆序输出方法
2020/12/01 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
毕业生自荐书
2013/12/18 职场文书
餐饮营销方案
2014/02/23 职场文书
高一新生军训方案
2014/05/12 职场文书
小学校长个人总结
2015/03/03 职场文书
人事任命通知书
2015/04/21 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis