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 相关文章推荐
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
如何让Java程序执行效率更高
2014/06/25 面试题
教育局长自荐信范文
2013/12/22 职场文书
结婚典礼主持词
2015/06/29 职场文书
职工培训工作总结
2015/08/10 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
使用Ajax实现进度条的绘制
2022/04/07 Javascript
python内置模块之上下文管理contextlib
2022/06/14 Python
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技