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 相关文章推荐
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
Less 安装及基本用法
May 05 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
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
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
编写Python的web框架中的Model的教程
2015/04/29 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
以下的初始化有什么区别
2013/12/16 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
初中物理教学反思
2014/01/14 职场文书
物业总经理岗位职责
2014/02/28 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
七夕活动策划方案
2014/08/16 职场文书
汽车修理厂管理制度
2015/08/05 职场文书