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 相关文章推荐
JQuery 网站换肤功能实现代码
Nov 02 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
记录一次websocket封装的过程
Nov 23 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/17 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
$()JS小技巧
2007/07/21 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python模块WSGI使用详解
2018/02/02 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python实现简易淘宝购物
2019/11/22 Python
python实现在一个画布上画多个子图
2020/01/19 Python
J2EE是技术还是平台还是框架
2016/08/14 面试题
如何写你的创业计划书
2014/01/07 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
销售会议开幕词
2016/03/04 职场文书
责任书格式
2019/04/18 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js