Javascript中for循环语句的几种写法总结对比

更新时间：2020-04-21 00:26:49 作者：startmvc

前言for循环我们在js遍历对象或数组时都会有用到了，今天我们一起来看一些关于for循环的

前言

for循环我们在js遍历对象或数组时都会有用到了，今天我们一起来看一些关于for循环的一些使用例子了，具体的操作细节如下文介绍。

一般写法如下：


for(var i = 0;i< arr.length;i++) {
 var a = arr[i];
 //...
 }

这就是一个常见的，正序循环的for循环。这样写的缺点大家都明白：每次都从arr里取length与i来对比，浪费性能（而且，要是arr的长度是动态变化的，就会出现死循环）。改进这个循环的办法是用变量保存arr.length：


for(var i = 0, al = arr.length;i< al;i++) {
 var a = arr[i];
 //...
 }

这样比第一种可以略微提升点性能，要是数组长，可以提升更多。

不过这样写就多了个变量al，且这个变量只在用来与i对比的时候有用，看着有点鸡肋。

如果循环顺序对你不重要，那你可以尝试倒序循环：


for(var i = arr.length-1;i > -1;i--) {
 var a = arr[i];
 //...
 }

这样一来变量少些，且还缓存过arr长度，性能也不错。但这里的代码写得有点拙劣（我故意的），首先是i = arr.length-1（居然要-1，靠），然后是循环继续执行的条件i > -1，都让有洁癖的人无法忍受。

下面是我常用的倒序for循环写法：


for(var i = arr.length;i--;) {
 var a = arr[i];
 //...
 }

这已经非常精简了。原理需要理解一下：for循环继续执行的条件，是;;之间的这个判断要为真，而这里的i–，在第一次循环进来的时候，i=arr.length，i–值不变（为什么不变？因为要在for循环体里面，才会发现i变了)；当i=1时，i- -还是1，但进入循环体后，就是0了，所以可以正常执行最后一次循环；当i=0时，i–还是0，而0已经不为真了，所以循环就不会继续执行了。

大家注意到上面的所有代码的for循环体里，都有个var a = arr[i] ，用来取出当前循环到的数组项。这实际上也是种浪费，且jsLint等会告诉你：不要在循环里声明变量。。。

倒序的for可以精简至斯，但我就是要正序，而且要效率高，变量少，怎么办？

如下：


for(var i = 0, a;a = arr[i++];) {
 //...
 }

这种写法好处在于：几乎不可避免的arr.length不见了，前面说的取出当前循环到的数组项的那一句也不见了。

原理：

a = arr[i++] ，在这里作为循环能执行的条件，注意这里只有一个=号，所以这不是判断句，是赋值语句，就是把arr[i++]赋给a，然后判断a是不是真值。i++与i–的原理类型我就不说了，只说当i++已经超过数组的长度时，循环肯定要停止才行，而这里真的就停止了，为什么？因为a=arr[i++] ，如果取到了超出数组本身长度的项，只会取得一个undefined，而undefined是假值，循环条件就判断失败了。

当然，这样写的缺点也很明显：

1，当arr的长度动态变化时，依然会产生死循环————因为我们从来没缓存过arr.length呀。

2，如果循环的是一个数字数组，当取出的项（即a的值）为0时，就会中止循环（因为0是假值）。

3，当数组中某一项是假值时（包括空字符串，0，null，undefined），同样会中止循环

所以大家用这种写法时，最好排除掉上面的情况再用。

这个原理同样可以用在倒序循环上。

最后我要忠告大家几句：