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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 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
2019十大人气国漫
2020/03/13 国漫
模仿OSO的论坛(三)
2006/10/09 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python中super函数的用法
2017/11/17 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
学python安装的软件总结
2019/10/12 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
大学生村官典型材料
2014/01/12 职场文书
法律进社区实施方案
2014/03/21 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工伤认定行政答辩状
2015/05/22 职场文书