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 操作select下拉列表框的一点小经验
Mar 20 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
理解javascript async的用法
Aug 22 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
原生JS实现相邻月份日历
Oct 13 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顺序查找和二分查找示例
2014/03/27 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
JScript的条件编译
2007/05/29 Javascript
jQuery live
2009/05/15 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
详解python中requirements.txt的一切
2017/03/03 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
2014年调度员工作总结
2014/11/19 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
小学家长通知书评语
2014/12/31 职场文书
实名检举信范文
2015/03/02 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript