聊一聊关于javascript数组去重性能优化那些事？——和派孔明_function unique(arr){ var result = []; for(var i=0-CSDN博客

本文链接：https://blog.csdn.net/xyphf/article/details/51855190

说到数组去重的方法，我觉得是个前端工程师都能写出几个方法来，但是各种方法之间的性能怎么样了，这次带着这个问题，我们来一起做一下研究？
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