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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
vue.js表格分页示例
Oct 18 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
vant实现购物车功能
Jun 29 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
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
简单JS代码压缩器
2006/10/12 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python创建日历实例
2014/08/21 Python
深入理解Django的中间件middleware
2018/03/14 Python
python检索特定内容的文本文件实例
2018/06/05 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
PHP高级工程师面试问题推荐
2013/01/18 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
酒店led欢迎词
2014/01/09 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
对象析构函数__del__在Python中何时使用
2022/03/22 Python
MySql分区类型及创建分区的方法
2022/04/13 MySQL
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers