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 弹出菜单/窗口效果
Oct 30 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
js基于canvas实现时钟组件
Feb 07 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
收音机术语解释
2021/03/01 无线电
理解和运用PHP中的多态性[译]
2011/08/02 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PDO::getAttribute讲解
2019/01/28 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[01:44]Ti10举办地公布
2019/08/25 DOTA
使用Python写个小监控
2016/01/27 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python中实现栈的三种方法
2020/12/19 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
客服文员岗位职责
2013/11/29 职场文书
客服服务心得体会
2013/12/30 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
高中生旷课检讨书
2014/10/08 职场文书
离婚起诉书范本
2015/05/18 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
利用JavaScript写一个简单计算器
2021/11/27 Javascript
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android