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 相关文章推荐
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
php常用的工具开发整理
2019/09/26 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
深入了解Python 变量作用域
2020/07/24 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
string = null 和string = ''的区别
2013/04/28 面试题
祖国在我心中演讲稿450字
2014/09/05 职场文书
房屋产权证明书
2015/06/19 职场文书
保姆聘用合同
2015/09/21 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android