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生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
js实现简单五子棋游戏
May 28 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
JavaScript WeakMap使用详解
Feb 05 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数据库操作方法(MYSQL版)
2011/06/08 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php strftime函数的详细用法
2018/06/21 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
xml转json的js代码
2012/08/28 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
python单链表实现代码实例
2013/11/21 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
办加油卡单位介绍信
2014/01/09 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
2015中秋祝酒词
2015/08/12 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL