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获取网页中的js、css、Flash等文件
Dec 20 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
javascript自执行函数
Feb 10 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 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 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python实现多线程的两种方式
2016/05/22 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
报告会主持词
2014/04/02 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python