js 数组去重的四种实用方法


Posted in Javascript onSeptember 09, 2014

面试前端必须准备的一个问题:怎样去掉Javascript的Array的重复项。据我所知,百度、腾讯、盛大等都在面试里出过这个题目。这个问题看起来简单,但是其实暗藏杀机。 考的不仅仅是实现这个功能,更能看出你对计算机程序执行的深入理解。

我总共想出了三种算法来实现这个目的:

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;
}

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 相关文章推荐
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 #Javascript
10分钟学会写Jquery插件实例教程
Sep 06 #Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 #Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 #Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 #Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 #Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
八年级美术教学反思
2014/02/02 职场文书
情侣吵架检讨书
2014/02/05 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
物业管理专业求职信
2014/06/11 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android