Home / Blog / it

JavaScript for循环性能比较

Author: Vic.Wang 2017/08/18 Tags:javascriptjsforfor infor offorEach循环性能

下午敲完代码,跟群里的几个朋友讨论几种 for 循环的性能问题,还学到了一个 console 计时器的方法,平时就该多看手册啊。

先用循环搞出一个100W的数组,然后模拟字符串拼接。

数据代码如下:

    var arr1000000 = [];
    for (var i = 0; i < 1000000; i++) {
        arr1000000.push(i);
    }
                    

以下开始测试

for 循环代码如下:

    var a = '';
    console.log('for');
    console.time('Timer');
    for (var i = 0; i < arr1000000.length; i++) {
        a += arr1000000[i];
    }
    console.timeEnd('Timer');
                    

for in 循环代码如下:

    var b = '';
    console.log('for in');
    console.time('Timer');
    for (var i in arr1000000) {
        b += arr1000000[i];
    }
    console.timeEnd('Timer');
                    

for of 循环代码如下:

    var c = '';
    console.log('for of');
    console.time('Timer');
    for (var i of arr1000000) {
        c += i;
    }
    console.timeEnd('Timer');
                    

forEach 循环代码如下:

    var d = '';
    console.log('forEach');
    console.time('Timer');
    arr1000000.forEach(function(i) {
        d += i;
    });
    console.timeEnd('Timer');
                    

测试效果如下:

for循环性能测试效果

结论:经过多次测试大多数情况下,for > forEach > for of > for in,for循环速度最快,for in循环效率最慢,少数几次测出来并不是这个顺序,for循环也出现过最慢的情况。