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的并行运算实现代码
Nov 19 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
js实现抽奖的两种方法
Mar 19 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
python制作websocket服务器实例分享
2016/11/20 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
体育教育专业自荐信范文
2013/12/20 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
开平碉楼导游词
2015/02/06 职场文书
色戒观后感
2015/06/12 职场文书
干部培训简讯
2015/07/20 职场文书