JS for循环性能测试：不声明变量vs声明变量，以及特殊写法解析

前言

对于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次测试，得到了以下结果

foreach	不写声明	写声明
2372.891ms	672.530ms	743.974ms
2431.821ms	710.275ms	805.676ms
2422.448ms	729.287ms	741.014ms
2330.894ms	730.200ms	755.390ms
2423.186ms	703.255ms	769.674ms
2379.167ms	689.811ms	741.040ms
2372.944ms	712.103ms	710.524ms
2316.005ms	726.518ms	726.522ms
2535.289ms	733.826ms	747.427ms
2560.925ms	793.680ms	817.098ms
平均值	平均值	平均值
2414.56ms	720.15ms	755.83ms

不知道结果是否让你出乎意料？没想到最平常的写法效率最高，为什么？我也没想明白，谁知道就告诉我吧，但我估计写声明的写法是没有意义的。因为len = arr.length这个arr.length可能已经缓存起来了，所以我们在声明个len变量来存储是没有意义的。

最后附上全部测试代码，复制到自己的电脑上直接就可以测试了，要是有不合理的地方请告诉我吧


var testArrs = [],
 i = 0;
while(i<40000000){
 testArrs.push(i);
 i++;
}
function testForeach(testArrs){
 console.time('foreach');
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd('foreach');
}
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);

for循环的特殊写法

下面说下文章刚开始说的那个我没看懂的代码，说之前先温习下再熟悉不过的for循环语法。for循环的基本语法是:


for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

语句1：在循环（代码块）开始前执行
语句2：定义运行循环（代码块）的条件
语句3：在循环（代码块）已被执行之后执行

如果我们用for循环要输出1到10，我们可以这么写:


for(var i=0;i<10;i++){
console.log(i);
}

但是！根据上面的语法说明，我们也可以写成这样


for(var i=10;i--;){
console.log(i);
}

刚开始看的时候我也很疑惑，怎么能这么写？语句2放的是循环条件，i–是什么判断条件。其实不然，在语句2中，如果返回true循环会继续执行。在js中0,null,undefined,false,'',””作为条件判断时，其结果为false，也就说当i–到0的时候就是false，循环就终止了。

再回到文章开头的代码


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

这个rule = rules[i++]就是判断条件，当成为undefined时就会终止循环啦。所以这段代码换成普通写法就是这样的：


for(var i = 0;i < rules.length;i++){
 var rule = rules[i]
}

其实就是把判断和赋值放到一起了，一边循环一边赋值。是不是挺简单？

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Javascript能带来一定的帮助，如果有疑问大家可以留言交流。

JavaScript for循环写法对比与特殊语法解析

前言

for循环写法对效率的影响

测试方案

测试流程

测试结果

for循环的特殊写法

总结

实用工具推荐