js中有意思的for循环

519 阅读2分钟

记录一下js中各种for循环的写法,发现还是蛮有意思的。好了,话不多说,切入正题。

js中for循环的结构如下所示:

for (语句1; 语句2; 语句3) {
    // do something
}

嗯,很完整的一个for循环,老铁没毛病。但是还是记一下这里的语句到底什么意思吧:

  • 语句1:循环开始前执行的语句
  • 语句2:循环条件,值为true时继续循环
  • 语句3:循环结束后执行的语句

下面写个循环一个数组的例子

var arr = [0,1,2,3,4,5,6,7,8,9];
for (var i = 0; i< arr.length; i++) {
    console.log(arr[i]); 
}

如果已经定义好初始变量,语句1其实可以省略

var arr = [0,1,2,3,4,5,6,7,8,9],
    i = 0;
for (; i< arr.length; i++) {
    console.log(arr[i]); 
}

在语句1中也可以缓存数组长度,这样会略微提升一下性能,如果数组很大,性能会提升较多

var arr = [0,1,2,3,4,5,6,7,8,9];
for (var i = 0, l = arr.length; i< l; i++) {
    console.log(arr[i]); 
}


如果循环的顺序不重要,那么可以倒叙循环

var arr = [0,1,2,3,4,5,6,7,8,9];
for (var i = arr.length; i > -1; i--) {
    console.log(arr[i]);
}

但是貌似不太优雅(都特么扯到-1去了,尴尬症有些要犯了。咋办?有病得治啊!),下面:

var arr = [0,1,2,3,4,5,6,7,8,9];
for (var i = arr.length; i--;) {
    console.log(arr[i]);
}

上面这句舒服多了。但是如果我就要是要正常的顺序循环、又要提升性能减少变量呢?

var arr = [1,2,3,4,5,6,7,8,9];
for (var i = 0, item; item = arr[i++];) {
    console.log(item); 
}

为什么这里item可以作为判断条件呢?是因为item在取值时如果超过了arr的长度的时候,自然就取到的是个undefind,所以返回false;使用这种循环写法时要注意如下几点:

  • 当数组长度动态变化时,会导致死循环。
  • 当数组取出的值为0,undefined、null、false、空值时也会立即终止循环
  • 所以使用时要排除上面这些情况


当然,循环数组还有forEach/some/every/map等等,因为不是for了,这里暂时不做说明,需要的小伙伴可以自行查阅相关方法。

最后列两种死循环:

for(;;) {
    // DO SOMETHING
};
for(;1;) {
    // DO SOMETHING
};


tips:

  1. 满足条件时,使用break跳出循环,避免不必要的资源浪费
  2. 循环数组时要缓存数组的长度