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

前言

前言

在JavaScript中遍历对象或数组时，for循环是常用的工具。本文将通过具体示例，详细解析for循环的各种使用场景及其操作细节。

常规正序循环及其局限

以下是几种常见的for循环写法及其对比分析。

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

最基础的写法是正序循环，如代码所示。这种写法的缺陷在于每次迭代都需要从数组中获取length属性并与索引i进行比较，这会消耗额外性能。此外，如果数组长度动态变化，可能导致死循环。改进方法是将arr.length保存到变量中：

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

这种写法相比第一种能略微提升性能，数组越长，提升效果越明显。

然而，这种写法引入了额外变量al，该变量仅在循环条件判断中有用，显得较为冗余。

倒序循环的优化与问题

若循环顺序对业务逻辑无影响，可尝试倒序循环：

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

此写法减少了变量数量并缓存了数组长度，性能表现良好。但代码可读性较差（如i = arr.length-1需手动减1，且循环条件为i > -1），可能引起代码洁癖者的不适。

以下是作者常用的倒序for循环写法：

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

该写法极为精简。其原理在于：for循环继续执行的条件是判断表达式为真。此处i--在首次进入循环时，i=arr.length的值不变（因为i--的副作用在循环体执行后才体现）；当i=1时，i--仍返回1，但进入循环体后i变为0，从而正常执行最后一次循环；当i=0时，i--返回0，0为假值，循环终止。

上述所有代码的for循环体内均包含var a = arr[i] ，用于获取当前数组项。这实际上是一种资源浪费，且jsLint等工具会提示不要在循环内声明变量。

正序精简写法及其原理

倒序循环已足够精简，但若需正序且兼顾高效与少变量，该如何处理？

参考以下写法：

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.length。

2. 若遍历数字数组，当取出的项（即a的值）为0时，循环会中止（因为0是假值）。

3. 若数组中包含假值项（如空字符串、0、null、undefined），循环同样会中止。

因此，使用这种写法前，务必排除上述情况。

该原理同样适用于倒序循环。

最后，给出几点忠告：

1. 代码精简并不等同于执行效率高！
2. 切勿为了精简代码而牺牲性能。

性能优化建议

此外，分享几点提升for循环性能的建议：

1. 适时使用break！无需遍历全部元素时，应添加跳出条件。

2. 避免在for循环体内声明变量（建议一次性var，多次赋值）。

2，数组长度缓存，尽量少变量

总结

以上就是本文的全部内容，希望这些内容能对您的学习或工作有所帮助。如有疑问，欢迎留言交流。