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次测试，得到了以下结果
| 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能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
split()方法将一个字符串对象的每个字符拆出来，并且将每个字符串当成数组的每个元素 reverse()方法用来改变数组，将数组中的元素倒个序排列，第一个数组元素成为最后一个，最后一个变成第一个 join()方法将数组中的所有元素边接成一个字符串2016-04-04
这篇文章主要介绍了JavaScript异步回调的Promise模式封装实例,本文通过分析easyjs的源码得出,实例均参考easyjs,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了javascript实现tab切换特效，实现的方法很简单，特别适合初学者学习javascript实现tab切换特效，tab切换再也不是问题，需要的朋友可以参考下2015-11-11
听说这是一道腾讯的面试题,可能网上已经有不少答案了,晚上没事看到这道题就自己做了下,下面这篇文章主要给大家介绍了关于如何用Js写一个简单的五子棋小游戏的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了js实现随机数小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要给大家介绍了关于JS异步错误捕获的一些事，文中通过示例代码介绍的非常详细，对大家学习或者使用Javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
使用 JavaScript 和 canvas 压缩图像可以使用 canvas 的 drawImage() 方法将图像绘制到 canvas 上，然后使用 toDataURL() 方法将图像转换为 Data URL 形式，这篇文章主要介绍了JavaScript 图像压缩的相关资料,需要的朋友可以参考下2023-01-01
IE8 下的Js错误HTML Parsing Error...
今天调试一段JS代码出现这个状况..在火狐 IE7 和IE6下都正常...郁闷,在网上搜索了一下相关资料 一般错误都是指所指定的标签没有加载完就是用该对象....2009-08-08
在开发的时候为什么左边的数据出来比右边的慢呢？因为这里没有进行分页，左边的数据多，所以查询相对较慢。怎么解决此问题呢？下面小编给大家带来了JS鼠标滚动分页效果示例，需要的的朋友参考下吧2017-07-07
这篇文章主要为大家详细介绍了js canvas实现验证码并获取验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论