javascript 遍历数组的性能比较

常用的数组遍历方法有for,foreach,for in ,for of ,map,some,filter,reduce等，后面3个还没写进去哈，另外浏览器安装的不是很多，后续可以更全面点。

这里只简单列举几个数据，更严谨的方法应该是每种方法使用一定数据量来修正，但是这次目的并不是为了得出准确的平均值，只是为了比较。

代码：

function byFor(arr) {
        var tb=new Date().getTime();
        for(var i=0;i<arr.length;i++){
            arr[i]=i+1;
        }
        var te=new Date().getTime();
        console.log(byFor Time:+(te-tb))
    }
    function byForLength(arr) {
        var tb=new Date().getTime();
        var l=arr.length;
        for(var i=0;i<l;i++){
            arr[i]=i+1;
        }
        var te=new Date().getTime();
        console.log(byForLength Time:+(te-tb))
    }
    function byMap(arr) {
        var tb=new Date().getTime();
        arr.map(item=>{
            return item+1;
        });
        var te=new Date().getTime();
        console.log(byMap Time:+(te-tb))
    }
    function byForIn(arr) {
        var tb=new Date().getTime();
        for(var i in arr){
            arr[i]=i+1;
        }
        var te=new Date().getTime();
        console.log(byForIn Time:+(te-tb))
    }

    function byForeach(arr) {
        var tb=new Date().getTime();
        arr.forEach(i=>{
            arr[i]=i+1;
        });
        var te=new Date().getTime();
        console.log(byForeach Time:+(te-tb))
    }
    function byForOf(arr) {
        var tb=new Date().getTime();
        for(var value of arr){
            arr[0]=value;
        }
        var te=new Date().getTime();
        console.log(byForOf Time:+(te-tb))
    }
    
    function getArrByFor(num) {
        var arr=[];
        var tb=new Date().getTime();
        for(var i=0;i<num;i++){
            arr.push(i);
        }
        var te=new Date().getTime();
        console.log(num+ getArrByFor Time :+(te-tb));
        return arr;
    }
   

    // 获得1000数量级的数组
    var arr_1000=getArrByFor(1000);
    byFor(arr_1000);
    byForLength(arr_1000);
    byForIn(arr_1000);
    byMap(arr_1000);
    byForOf(arr_1000);
    byForeach(arr_1000);

    // 获得100000数量级的数组
    var arr_100000=getArrByFor(100000);
    byFor(arr_100000);
    byForLength(arr_100000);
    byForIn(arr_100000);
    byMap(arr_100000);
    byForOf(arr_100000);
    byForeach(arr_100000);

 // 获得100000 数量级的数组
    var arr_100=getArrByFor(1000000);
    byFor(arr_100);
    byForLength(arr_100);
    byForIn(arr_100);
    byMap(arr_100);
    byForOf(arr_100);
    byForeach(arr_100);

运行结果

chorm:

360:

opera:

edge:

for in不管在哪个数量级，哪个浏览器中，效率是最低的，从表格可以粗略看出，

for和加强版的for除了在ie中，其他都相差不多，应该是浏览器做过优化

for in和for of的效率并没有for好，而map 表现一般

ie下的for循环和foreach是有性能区别的，如果说循环体里还有其他操作，这个时间量级可能会翻天覆地