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实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
对比分析json及XML
2014/11/28 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
Django在Model保存前记录日志实例
2020/05/14 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python