面试前端必须准备的一道问题:怎样去掉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. cache缓存

    缓存分为:数据缓存,页面缓存,内存缓存(memcache,redis) ob,输出缓冲区,是output buffering的简称 FileCache.php <?php //本文件用来存储和读 ...

  2. https证书提供商

    http://www.itrus.com.cn/verisignchina/About/aboutitrus/Index.html

  3. Android ART运行时与Dalvik虚拟机

    这几天在做一个项目时需要在Android中使用OSGi框架(Apache Felix),于是在一个android 4.4.2 版本系统的某品牌的平板上实验. 实验内容很简单:把felix包里的feli ...

  4. AngularJs 1.5 $location获取url参数

    地址:http://localhost/waservice.html?id=17 获取参数id的值 app.config(['$locationProvider', function ($locati ...

  5. 多项式FFT相关模板

    自己码了一个模板...有点辛苦...常数十分大,小心使用 #include <iostream> #include <stdio.h> #include <math.h& ...

  6. usb驱动开发23之驱动生命线

    关于字符串描述符的地位仅次于设备/配置/接口/端点四大描述符,那四大设备必须得支持,而字符串描述符对设备来说则是可选的,这并不是就说字符串描述符不重要,对咱们来说,提供字符串描述符的设备要比没有提供的 ...

  7. dotnetGen 系列终于开源了

    https://github.com/2881099/dotnetGen .Net 3.0 + SqlServer 生成器 https://github.com/2881099/dotnetGen_s ...

  8. [转]终于找到全annotation配置springMVC的方法了(事务不失效)

    原文:http://icanfly.iteye.com/blog/778401 icanfly 写道 如果带上事务,那么用annotation方式的事务注解和bean配置,事务会失效,要将servic ...

  9. eclipse/intellij Idea集成jetty

    jetty相对weblogic.jboss.tomcat而言,启动速度快,十分方便开发调试,以下是eclipse里的使用步骤: 一.eclipse->Marketplace里搜索 jetty 一 ...

  10. DSOFramer 之一:在 64 位系统注册 DSOFramer

    DSOFramer是微软提供的一款用于在线编辑.调用Word.Excel等Office程序的ActiveX组件.很多第三方的Office组件都是基于DSOFramer组件开发的.今天我们不讲如何使用D ...