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 相关文章推荐
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php 设计模式之 单例模式
2008/12/19 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
JS中递归函数
2016/06/17 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python enumerate内置函数用法总结
2020/01/07 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
中间件分为哪几类
2016/09/18 面试题
室内设计专业毕业生求职信
2014/05/02 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
捐书活动倡议书
2015/04/27 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL