聊一聊关于javascript数组去重性能优化那些事？——和派孔明

说到数组去重的方法，我觉得是个前端工程师都能写出几个方法来，但是各种方法之间的性能怎么样了，这次带着这个问题，我们来一起做一下研究？
1、数组去重的方法有哪些？
2、哪种数组去重的的方法性能较好

下面先来介绍数组去重的几种方法

数组去重方法一：

function unique(arr){    for(var i=0;i<arr.length;i++){        for(var j=i+1;j<arr.length;j++){            if(arr[i]==arr[j]){                arr.splice(j,1);//arr.splice(开始位置,要删除几个,要插入的数据)                j--;                }               //alert(arr);            //console.log(arr);            return arr;        }    }   }

数组去重方法二：

function unique(arr){    var arr2=[];    for(var i=0;i<arr.length;i++){          //假设没找到的        var find=false;        //在arr2里面一个一个的找        for(var j=0;j<arr2.length;j++){            if(arr2[j]==arr[i]){                find=true;  //找到一个，结束小循环            }        }        //没找到，才添加        if(!find){            arr2.push(arr[i]);          }       }    return arr2;}

数组去重方法三：

    function unique(arr){        var arr2=[];        for (var i = 0; i < arr.length; i++)         {            var find=false;            for (var j = 0; j < arr2.length; j++)             {                    if (arr2[j]==arr[i])                     {                        find=true;                        break;                    }else{                        find=false;                    }            }            if (!find) {                arr2.push(arr[i]);            }        }        return arr2    }

数组去重方法四：

function unique(arr){    function findInArr(arr,n){        for (var i = 0; i < arr.length; i++) {            if (arr[i]==n) {                return true;            }        }        return false;    };    var arr2=[];    for (var i = 0; i < arr.length; i++) {        if (!findInArr(arr2,arr[i])) {            arr2.push(arr[i])        }    }    return arr2;}

数组去重方法五：

function unique(arr){    var n = [];//一个新的临时数组    for (var i = 0; i < arr.length; i++) {        //如果当前数组的第i已经保存进了临时数组，那么跳过，        //否则把当前项push到临时数组里面        if (n.indexOf(arr[i]) == -1) n.push(arr[i]);    }    return n;}

数组去重方法六：

function unique(array){ var arr = []; var json = {}; for(var i = 0; i < array.length; i++){  if(!json[array[i]]){   arr.push(array[i]);   json[array[i]] = 1;  } } return arr;}

数组去重方法七：

function unique(arr) {    var result = [], hash = {};    for (var i = 0, elem; (elem = arr[i]) != null; i++) {        if (!hash[elem]) {            result.push(elem);            hash[elem] = true;        }    }    return result;}

我们再来简单介绍一下性能测试的方法

如例：

//我们先来建立一个随机函数    function GetRandomNum(Min,Max)//随机数生成函数    {           var Range = Max - Min;           var Rand = Math.random();           return(Min + Math.round(Rand * Range));       } //再来获取一组一亿个0到100的随机数，并把它们放到数组里面    var arr=[];    for (var i = 0; i < 100000000; i++) {        arr.push(GetRandomNum(0,100));    }var d =new Date().getTime();//获取函数运算开始时间    function unique(arr){        var arr2=[];        for (var i = 0; i < arr.length; i++)         {            var find=false;            for (var j = 0; j < arr2.length; j++)             {                    if (arr2[j]==arr[i])                     {                        find=true;                        break;                    }else{                        find=false;                    }            }            if (!find) {                arr2.push(arr[i]);            }        }        return arr2    }document.write(unique(arr));alert(new Date().getTime()-d);//获取函数运算结束时间，拿函数运算结束时间减去函数运算开始时间，得到函数运算的时间

下面我来介绍一下此次测试的设备

此次数组去重测试的浏览器：
Google Chrome 版本52.0.2743.10
Firefox 47.0.1
IE 10

性能检测的方法

1、获取一个有一亿0到100的随机数的数组，进行去重操作
2、每个方法检测三次，每个浏览器检测三次，取平均值并且每次测试后清除缓存关闭浏览器后重新打开

注：经过多次测试后，发现有一亿个元素的数组，Firefox和IE 10总是崩溃，所以chrome是采用数组内含有一亿个元素测试的，而Firefox和IE 10是按数组内含有一千万的元素测试的，大家注意一下！

以下测试数据为数组完成去重操作的时间
chrome浏览器下（数组内有一亿个0到100的随机数）：

次数 第一次 第二次 第三次 平均 方法1 浏览器崩溃 浏览器崩溃 浏览器崩溃 浏览器崩溃 方法2 21321ms 21402ms 21419ms 21380ms 方法3 9373ms 9393ms 9393ms 9386ms 方法4 9387ms 9129ms 9225ms 9247ms 方法5 5984ms 5975ms 5944ms 5967ms 方法6 642ms 653ms 687ms 660ms 方法7 597ms 599ms 598ms 598ms

firefox浏览器下（数组内有一千万个0到100的随机数）：

次数 第一次 第二次 第三次 平均 方法1 768ms 562ms 707ms 679ms 方法2 1353ms 1352ms 1358ms 1354ms 方法3 626ms 624ms 623ms 624ms 方法4 635ms 638ms 632ms 635ms 方法5 1459ms 1459ms 1453ms 1457ms 方法6 45ms 45ms 45ms 45ms 方法7 49ms 50ms 50ms 49ms

IE浏览器下（数组内有一千万个0到100的随机数）：

次数 第一次 第二次 第三次 平均 方法1 1060ms 1091ms 1016ms 1055ms 方法2 4185ms 4177ms 4185ms 4182ms 方法3 2189ms 2140ms 2142ms 2157ms 方法4 1533ms 1539ms 1534ms 1535ms 方法5 5101ms 5076ms 5026ms 5067ms 方法6 482ms 503ms 503ms 496ms 方法7 494ms 490ms 444ms 476ms

总结：
由上述数据我们可以得出，在上述几种数组去重的方法中，第7种去重方法，性能最优！
浏览器性能中chrome最优，firefox次之，IE最差！

版权申明：本文由前端工程师和派孔明亲测，仅供学习交流之用，如需转载，请注明出处！