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对象之内置对象Math使用方法
Apr 16 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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&amp;java(二)
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
jQuery的学习步骤
2011/02/23 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
vue中component组件的props使用详解
2017/09/04 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
SQLite3中文编码 Python的实现
2017/01/11 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python中提高pip install速度
2020/02/14 Python
Python 日期与时间转换的方法
2020/08/01 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
五年级学生评语
2014/04/22 职场文书
创先争优个人承诺书
2014/08/30 职场文书
信用卡工资证明格式
2014/09/13 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2014年售票员工作总结
2014/11/19 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
行政文员岗位职责
2015/02/04 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python