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 相关文章推荐
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
原生js实现日期联动
Jan 12 Javascript
浅析JS运动
Dec 28 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
详解Vue单元测试case写法
May 24 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
npm全局环境变量配置详解
Dec 15 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遍历数组的几种方法
2012/03/22 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
Python金融数据可视化汇总
2017/11/17 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python pymongo模块用法示例
2018/03/31 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
numba提升python运行速度的实例方法
2021/01/25 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
应届大学生求职的自我评价
2013/11/17 职场文书
会计应届生的自荐信
2013/12/13 职场文书
毕业设计计划书
2014/01/09 职场文书
应届生自荐信范文
2014/02/21 职场文书
酒店员工培训方案
2014/06/02 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
暑期实践个人总结
2015/03/06 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
亲戚关系证明
2015/06/24 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书