for循环、forEach、map、filter区别及效率分析

        遍历数组最常用到的for循环，是最为熟知的一种方法，在ES5中定义了一些新的遍历方法，更加适用于函数式编程，究竟其用法区别在哪，以及效率如何，接着下来亲自做个测试看一下。在Script中写入，

        

var testData = [];//数组初始化
var x = 9999;
for(var i = 0; i < x; i++){
testData[i] = i;
}

       在每个遍历开始前和结束后取时间戳的差值，每个测试10次取平均值查看结果。以下测试结果基于Google浏览器。

    for循环

        对于普通的for循环来说，

for(var i = 0; i < testData.length; i++){
code...
}

        取完平均值是7.3ms
        优化过的for循环，

for(var i = 0,len = testData.length; i < len; i++){
code...
}

        取完平均值是2.7ms
        但是当x = 99999，到达10^5级时，遍历时间分别是7ms和7.1ms，二者几乎没有差别；当 x = 999999时，遍历时间分别是，14.1ms和14.6ms，前者循环耗时比后者要少，即遍历数据从10^5级别开始普通for循环想关闭优化的for循环效率更高。

    forEach方法

testData..forEach(function(v,i,a) { a[i]++;});

        取完平均值是2.1ms，x = 99999时，取值8.9ms，x = 999999时，取值39ms，由此可见，在10^4级别及以下forEach的效率占有绝对优势，但从10^5级别开始就走下坡了了。然而用火狐测过以后，结果却截然不同（见页底）。

    map方法

a.map(function(v,i,b) { b[i]++;});

        传递给map()函数的调用方式和传递给forEach()函数的调用方式一样，但传递给map()函数应该有返回值。耗时是在Google浏览器环境下forEach方法的基础上相应增加的。

    filter方法

a.filter(function(v,i,b) { b[i]++;});

        filter()方法返回的数组元素是调用的数组的一个子集，传递的函数用来进行逻辑判定的，该函数返回true或false，同样的的式子，耗时在Google浏览器环境下相比较是map方法的40%左右。

Google

for循环

普通for循环

10^4级
7.3ms

10^5级
7ms

10^6级
14.1ms

优化for循环

10^4级
2.7ms

10^5级
7.1ms

10^6级
14.6ms

forEach方法

普通for循环

10^4级
2.2ms

10^5级
10.1ms

10^6级
41.3ms

Google环境下的测试结果

Firefox

for循环

普通for循环

10^4级
2.4ms

10^5级
3.1ms

10^6级
9ms

优化for循环

10^4级
2.4ms

10^5级
3.1ms

10^6级
8.9ms

forEach方法

普通for循环

10^4级
2.5ms

10^5级
4ms

10^6级
6.7ms

Firefox环境下的测试结果