面试前端必须准备的一道问题:怎样去掉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引擎内部应该是用的快速排序吧。
最终测试的结果是此方法运行时间平均是第二种方法的三倍左右,不过比第一种和第三种方法快了不少。
 
 

本文转到:http://www.csstop.com//interview/20151109/4946.html

javascript中数组去重的4种方法的更多相关文章

  1. JavaScript中数组去重的几种方法

    JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...

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

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

  3. JavaScript数组去重的几种方法

    这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...

  4. 关于数组去重的几种方法-------javascript描述

    第一种方法:借助json对象来实现,若json对象中无该属性则添加,否则不添加,最后返回json对象的属性,时间复杂度为O(n) function deleteArrayRepeat(arr) { v ...

  5. JavaScript数组去重的10种方法

    「数组去重」的确是个老生常谈的问题了,但是你真正的掌握了吗?平时开发中是不是用最简单粗暴的方法来去重?注意到它的性能问题了吗?当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法 ...

  6. JavaScript数组去重的四种方法

    今天,洗澡的想一个有趣的问题,使用js给数组去重,我想了四种方法,虽然今天的任务没有完成,5555: 不多说,po代码: //方法一:简单循环去重    Array.prototype.unique1 ...

  7. [转] JavaScript数组去重(12种方法)

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看.在真实的项目中碰到的数组去重,一般都是 ...

  8. javascript数组去重的3种方法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript数组去重 <!DOCTYPE html> <html> < ...

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

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

随机推荐

  1. [No00004D]深度思考好文:软件工程师的困境

    昨天是我一同学结婚的好日子,同学们大家聊各自的工作,有个同学突然问了我一句:我们同学中好像做软件的不多?如果再细分,好像做网络相关的更少? 回想起当时为何读计算机信息管理的专业,是因为那时听说读电脑未 ...

  2. windows下使用 linux命令好办法

    1. 安装下载 CygwinPortable一键安装包.7z 2. 把安装路径下/  [D:\cygwinportable\CygwinPortable\App\Cygwin\bin] 加到 Path ...

  3. Json数据与Json数据转换

    1.json数据 [{\"IS_DISTRIBUTOR_LIMIT\":0,\"PROVISION_PRICE\":null,\"PRO_STATUS ...

  4. 127.0.0.1、0.0.0.0和本机IP地址的区别和使用

    一.表面上的区别如下: 首先假设本机有多个网卡:eth0 :192.168.0.1       eth1:192.168.1.1     lo: 127.0.0.1 0.0.0.0 不能ping通,代 ...

  5. [转] EJB 3和Spring技术体系比较

    最近在学习EJB 3,对于SSH与EJB3,一直不太明白“即生瑜,何生亮?”,今天无意看到一篇旧文,比较系统的对比了这二种技术架构,转载于此: 原文出处:http://www.51cto.com/sp ...

  6. 翻译qmake文档(二) Getting Started

    翻译qmake文档 目录 原英文文档: http://qt-project.org/doc/qt-5/qmake-tutorial.html         本教程教讲授qmake基础知识.这个手册里 ...

  7. c++多重继承小结

    如果一个类从两个不同的类里继承两个同名的成员,则需要在派生类中使用类限定符来区分他们. 即在从A和B派生出来的c类中使用a::Show()和B::Show()来区分从这两个类那里继承的show()方法 ...

  8. 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(五)框架及Web项目的组件化

    一.组件化印象 1.先给大家看一张截图 如果我告诉大家,这就是一个web管理系统发布后的所有内容,你们会不会觉得太简洁了,只有一个web.config.一个Global.asax文件,其它的都是dll ...

  9. Windows 部署 Redis 群集

    1,下载Redis for windows 的最新版本,解压到 c:\Redis 目录下备用https://github.com/MSOpenTech/redis/releases当前我使用的是 3. ...

  10. 使用Python 将shapefile导入mongodb

    使用Python 将shapefile导入mongodb 随着big data时代的到来,各个行业都在考虑能不能把big data的思路.方法引入进来,GIS行业也不能免俗. 下面就介绍一下如何将sh ...