Javascript 数组去重的方法(四种)详解及实例代码


Posted in Javascript onNovember 24, 2016

 Javascript 数组去重的四种方法

四种算法来实现这个目的:

第一种方法:

Array.prototype.unique1 = function () {
 var n = []; //一个新的临时数组
 for (var i = 0; i < this.length; i++) //遍历当前数组
 {
  //如果当前数组的第i已经保存进了临时数组,那么跳过,
  //否则把当前项push到临时数组里面
  if (n.indexOf(this[i]) == -1) n.push(this[i]);
 }
 return n;
}

 第二种方法:

Array.prototype.unique2 = function()
{
 var n = {},r=[]; //n为hash表,r为临时数组
 for(var i = 0; i < this.length; i++) //遍历当前数组
 {
 if (!n[this[i]]) //如果hash表中没有当前项
 {
  n[this[i]] = true; //存入hash表
  r.push(this[i]); //把当前数组的当前项push到临时数组里面
 }
 }
 return r;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
alert(arr.unique2());

 第三种方法:

Array.prototype.unique3 = function()
{
 var n = [this[0]]; //结果数组
 for(var i = 1; i < this.length; i++) //从第二项开始遍历
 {
 //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
 //那么表示第i项是重复的,忽略掉。否则存入结果数组
 if (this.indexOf(this[i]) == i) n.push(this[i]);
 }
 return n;
}

  其中第1种和第3种方法都用到了数组的indexOf方法。此方法的目的是寻找存入参数在数组中第一次出现的位置。很显然,js引擎在实现这个方法的时候会遍历数组直到找到目标为止。所以此函数会浪费掉很多时间。 而第2中方法用的是hash表。把已经出现过的通过下标的形式存入一个object内。下标的引用要比用indexOf搜索数组快的多。

    为了判断这三种方法的效率如何,我做了一个测试程序,生成一个10000长度的随机数组成的数组,然后分别用几个方法来测试执行时间。 结果表明第二种方法远远快于其他两种方法。 但是内存占用方面应该第二种方法比较多,因为多了一个hash表。这就是所谓的空间换时间。  就是这个 测试页面,你也可以去看看。

第四种方法:

Array.prototype.unique4 = function()
{
 this.sort();
 var re=[this[0]];
 for(var i = 1; i < this.length; i++)
 {
 if( this[i] !== re[re.length-1])
 {
  re.push(this[i]);
 }
 }
 return re;
}

    这个方法的思路是先把数组排序,然后比较相邻的两个值。 排序的时候用的JS原生的sort方法,JS引擎内部应该是用的快速排序吧。 最终测试的结果是此方法运行时间平均是第二种方法的三倍左右,不过比第一种和第三种方法快了不少。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 #Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 #Javascript
微信小程序-详解数据缓存
Nov 24 #Javascript
如何实现json数据可视化详解
Nov 24 #Javascript
BootStrap 可编辑表Table格
Nov 24 #Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php实现的递归提成方案实例
2015/11/14 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
详解python中sort排序使用
2019/03/23 Python
Python request操作步骤及代码实例
2020/04/13 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
函授本科毕业生自我鉴定
2013/10/16 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
大学班级文化建设方案
2014/05/06 职场文书
求职信标题怎么写
2014/05/26 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
机关作风建设自查报告
2014/10/22 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android