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

前言

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

这个for循环是这么写的：

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

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

for循环写法对效率的影响

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

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

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

测试方案

总的测试方案如下：

1. 做一个容纳4千万的测试数组变量。
2. 分别用两种写法的for循环和foreach对这个测试变量进行遍历。
3. 在同一台稳定机器上，进行10次测试，最后取平均值。
4. 测试环境：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. 语句1：在循环（代码块）开始前执行
2. 语句2：定义运行循环（代码块）的条件
3. 语句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循环  # js  # for循环的几种写法  # for循环效率  # JS数组的遍历方式for循环与for...in  # js 数组的for循环到底应该怎么写？  # js for终止循环 跳出多层循环  # 浅谈vue.js中v-for循环渲染  # 全面解析JavaScript里的循环方法之forEach  # for-in  # for-of  # javascript forEach通用循环遍历方法  # javascript 循环语句 while、do-while、for-in、for用法区别  # JS 使用for循环遍历子节点查找元素  # javascript下for循环用法小结  # JavaScript中三种for循环语句的使用总结（for、for...in、for...of）  # 的是  # 两种  # 很简单  # 做个  # 刚开始  # 我吧  # 就可以  # 不写  # 自己的  # 我也  # 也有  # 是因为  # 让你  # 过了  # 已被  # 遍历  # 但我  # 执行时间  # 这段  # 我们可以 

相关文章： 哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  ,有什么在线背英语单词效率比较高的网站？  如何设计高效校园网站？  建站之星如何快速更换网站模板？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  网站制作培训多少钱一个月,网站优化seo培训课程有哪些？  香港服务器租用每月最低只需15元？  建站主机选哪种环境更利于SEO优化？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  建站之星如何取消后台验证码生成？  广州营销型建站服务商推荐：技术优势与SEO优化解析  如何选择高效稳定的ISP建站解决方案？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何基于云服务器快速搭建网站及云盘系统？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  建站主机系统SEO优化与智能配置核心关键词操作指南  c# 在高并发场景下，委托和接口调用的性能对比  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  高防服务器租用如何选择配置与防御等级？  建站之星会员如何解锁更多建站功能？  如何在宝塔面板中创建新站点？  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  太原网站制作公司有哪些,网约车营运证查询官网？  如何在Windows 2008云服务器安全搭建网站？  SQL查询语句优化的实用方法总结  青岛网站建设如何选择本地服务器？  如何通过PHP快速构建高效问答网站功能？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  网站制作多少钱一个,建一个论坛网站大约需要多少钱？  建站三合一如何选？哪家性价比更高？  小型网站建站如何选择虚拟主机？  公司网站设计制作厂家,怎么创建自己的一个网站？  大连网站制作公司哪家好一点,大连买房网站哪个好？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  网站好制作吗知乎,网站开发好学吗？有什么技巧？  网站图片在线制作软件,怎么在图片上做链接？  活动邀请函制作网站有哪些,活动邀请函文案？  如何在IIS中新建站点并配置端口与物理路径？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  如何解决ASP生成WAP建站中文乱码问题？  已有域名建站全流程解析：网站搭建步骤与建站工具选择  Python路径拼接规范_跨平台处理说明【指导】  如何在Golang中指定模块版本_使用go.mod控制版本号  ,网页ppt怎么弄成自己的ppt？