面试前端必须准备的一个问题:怎样去掉Javascript的Array的重复项, 这个问题看起来简单,但是其实暗藏杀机。 考的不仅仅是实现这个功能,更能看出你对计算机程序执行的深入理解。

我总共总结4种算法来实现这个目的:

  1. 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;
    }
  2. 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;
    }
  3. 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;
    }
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;
}

其中第1种和第3种方法都用到了数组的indexOf方法。此方法的目的是寻找存入参数在数组中第一次出现的位置。很显然,js引擎在实现这个方法的时候会遍历数组直到找到目标为止。所以此函数会浪费掉很多时间。 而第2中方法用的是hash表。把已经出现过的通过下标的形式存入一个object内。下标的引用要比用indexOf搜索数组快的多。

为了判断这三种方法的效率如何,我做了一个测试程序,生成一个10000长度的随机数组成的数组,然后分别用几个方法来测试执行时间。 结果表明第二种方法远远快于其他两种方法。 但是内存占用方面应该第二种方法比较多,因为多了一个hash表。这就是所谓的空间换时间。  就是这个测试页面,你也可以去看看。

第4种方法的思路是先把数组排序,然后比较相邻的两个值。 排序的时候用的JS原生的sort方法,JS引擎内部应该是用的快速排序吧。 最终测试的结果是此方法运行时间平均是第二种方法的三倍左右,不过比第一种和第三种方法快了不少。

博客参考原文http://blog.csdn.net/chengxuyuan20100425/article/details/8497277

js数组去重的4个方法的更多相关文章

  1. js数组去重的4种方法

    js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...

  2. js数组去重的几种方法

    1.遍历数组法 最简单的去重方法, 实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法“indexOf”是ECMAScript5 方法,IE8以下不支持 ...

  3. JS数组去重的9种方法(包括去重NaN和复杂数组类型)

    其实网上已经有很多js数组的去重方法,但是我看了很多篇并自己通过代码验证,发现都有一些缺陷,于是在研究多篇代码之后,自己总结了9种方法,如果有哪里不对请及时纠正我哈~ 转载请表明出处 测试代码 let ...

  4. js数组去重的三种常用方法总结

    第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中   Array.p ...

  5. Js 数组去重的几种方法总结

           去重是开发中经常会碰到的一一个热点问题,不过目前项目中碰到的情况都是后台接口使用SQL去重,简单高效,基本不会让前端处理去重.那么前端处理去重会出现什么情况呢?假如每页显示10条不同的数 ...

  6. js数组去重的三种方法

    <script type="text/javascript"> /*// 第一种冒泡法删除 var arr=[1,2,2,78,3,456,456]; for(var ...

  7. js 数组去重 的5种方法

    一万数组,4个重复项,先贴上成绩. 1.3毫秒 2.115毫秒 3.71毫秒 4.6毫秒 1.哈希表 2.JQuery (最快的方法是用JQuery 这句话是截图带的... 实际上Jq是最慢的) 3. ...

  8. JS — 数组去重(4种方法)

    第一种:双重循环 var strCode='zxcvbnmasdfghjklopiuytrewqAWEDRFTGYHUJIK'; var str=''; for(var i=0;i<4;i++) ...

  9. js 数组去重的三种方法(unique)

    方法一: Array.prototype.unique=function(){ var arr=[];//新建一个临时数组 for(var i=0;i<this.length;i++){//遍历 ...

随机推荐

  1. 《1Q84》--[日]村上春树

    <1Q84>,作者是:村上春树(村长) 故事梗概: 1984年,青豆与天吾皆为30岁,青豆为健身教练但另一面则是暗杀者,将受到极度暴力 的妇女们的丈夫们送至死亡的世界.天吾的职业为升大学的 ...

  2. iOS9 升级XCode7遇到的问题收集

    开发环境运行      各位可能会觉得,笔者在此还要讲开发环境的运行,是不是多此一举.其实并非如此,综合笔者这几年iOS开发经验的总结,运行新版本,特别是测试版本的Xcode是一个需要格外小心的事情, ...

  3. HttpClient_httpclient 4.3.1 post get的工具类

    package com.ryx.util; import java.util.ArrayList; import java.util.List; import java.util.Map; impor ...

  4. nodejs高大上的部署方式-PM2

    1.最常用的属nohup了,其实就是在后台执行进程,末尾加个&   [zhoujie@ops-dev ~]$ nohup node /home/zhoujie/ops/app.js & ...

  5. pdf转word

    一.刚需 pdf转word,这个需求肯定是有的.但是大家都知道,pdf是用来排版打印的,所以编辑起来会比较麻烦,所以,大家都会尝试将pdf的内容转成word,然后再进行编辑. 二.方法 1.用offi ...

  6. 关于ASP.NET Web API 客户端的请求报文中添加 Authorization

    当你使用客户端发送请求 Web API 的时候,因为API 有验证,所以你的请求报文中必须有”Authorization“,那么就需要手动添加了! HttpClient client = new Ht ...

  7. 使用javascript实现在页面打印的效果的三种方式

    <div id="console"></div> <script type="text/javascript"> var c ...

  8. 通过Queue的构造函数的可选参数maxsize来设定队列长度

    创建一个"队列"对象 import Queuemyqueue = Queue.Queue(maxsize = 10) Queue.Queue类即是一个队列的同步实现.队列长度可为无 ...

  9. 如何查看JSP和Servlet版本

    我们在java web开发的过程中,有时在资料上可能会提到环境所要支持的JSP,Servlet版本.如果版本低就可能出现测试错误. 方法:打开tomcat的common/lib 目录下,有两个JAR文 ...

  10. IOS第七天(4:UiTableView 数据的显示优化重复实例和tableFooterView和tableHeaderView)

    //加上头部 和底部 - (void)viewDidLoad { [super viewDidLoad]; [self tableView]; // 设置行高 self.tableView.rowHe ...