JavaScript中for循环的几种写法与效率总结

前言

对于for循环，相信大家再常用不过了。但是这回说下for循环是因为看代码时我居然没有看明白一个for循环的意思，真是不应该啊。

这个for循环是这么写的：

for (var i = 0, rule; rule = rules[i++];) { //do something}

这个写法是什么意思呢？后面再说，现卖个关子，这个写法我感觉还是挺好的。

for循环写法对效率的影响

说上面那段代码之前，先说一下for循环的效率问题。在接触js时关于for循环的写法和对效率影响的文章挺不少的。但总的来说对于for循环的写法有这么两种：

不写声明变量的写法：for(var i = 0;i<arr.length;i++){} 写声明变量的写法：for(var i = 0,len = arr.length;i < len;i++){}

除了for循环还有forEach() ，也有文章说forEach()效率最高，推荐用forEach()写法，那么到底哪个效率高呢？做个测试来看看吧。

测试方案

总的测试方案如下：

做一个容纳4千万的测试数组变量。 分别用两种写法的for循环和foreach对这个测试变量进行遍历。 在同一台稳定机器上，进行10次测试，最后取平均值。 测试环境：CPU:Inter(R) Core i5-3210M,RAM:12GM,system:win10(x64)

测试流程

制作测试变量

先用while循环做个测试变量出来，这个很简单，具体如下：

var testArrs = [], i = 0;while(i<40000000){ testArrs.push(i); i++;}

编写相应测试函数

测量和执行时间的代码，我用的是console.time()和console.timeEnd()来进行测试。

针对这个三个for循环，先做出三个函数出来，他们分别是

foreach循环测试:

function testForeach(testArrs){ console.time('foreach'); var newArrs = []; testArrs.forEach(function(i){ newArrs.push(i); }); console.timeEnd('foreach');}

没有声明变量的for循环:

function testNoDeclare(testArrs){ console.time('no declare'); var newArrs = []; for(var i = 0;i<testArrs.length;i++){ newArrs.push(i); } console.timeEnd('no declare');}

有变量声明的写法

function testUseDeclare(testArrs){ console.time('use declare'); var newArrs = []; for(var i = 0,len = testArrs.length;i<len;i++){ newArrs.push(i); } console.timeEnd('use declare');}

执行测试函数

执行测试函数这里很简单啦，就是调用函数就可以了

testForeach(testArrs);testNoDeclare(testArrs);testUseDeclare(testArrs);

测试结果

经过10次测试，得到了以下结果