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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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
第七节--类的静态成员
2006/11/16 PHP
ADODB类使用
2006/11/25 PHP
php生成zip文件类实例
2015/04/07 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vxe-table vue table 表格组件功能
2019/05/26 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
如何基于Python实现自动扫雷
2020/01/06 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
Python读写Excel表格的方法
2021/03/02 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
物业管理毕业生个人的求职信
2013/11/30 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS