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函数
Apr 09 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
js表头排序实现方法
Jan 16 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
原生js实现自定义消息提示框
Nov 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语法(3)
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
理解javascript回调函数
2014/12/28 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
python机器学习之贝叶斯分类
2018/03/26 Python
python按照多个条件排序的方法
2019/02/08 Python
Python实战之制作天气查询软件
2019/05/14 Python
django fernet fields字段加密实践详解
2019/08/12 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
python实现用户名密码校验
2020/03/18 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
淘宝活动策划方案
2014/02/06 职场文书
统计岗位职责
2014/02/21 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
辞职信怎么写?
2019/05/21 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python