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中的枚举功能
Mar 06 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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
Zerg建筑一览
2020/03/14 星际争霸
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
javascript读取RSS数据
2007/01/20 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
初步认识Python中的列表与位运算符
2015/10/12 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python sep参数使用方法详解
2020/02/12 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
python爬虫请求头的使用
2020/12/01 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
2015新年寄语大全
2014/12/08 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
详解nginx进程锁的实现
2021/06/14 Servers