记录一下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:
- 满足条件时,使用break跳出循环,避免不必要的资源浪费
- 循环数组时要缓存数组的长度