for循环

在for循环中你会去迭代一些数组元素或者一些HTML元素。for循环常常如此：

for (var i = 0; i < myarray.length; i++) {
   // do something with myarray[i]
}

这样写的问题在于，每一次迭代的时候都会计算数组的长度，尤其在这个参数不是一个数组而是一组HTML元素的时候会降低你的程序的性能。

HTML元素的集合在页面上，这样每次都会去再页面上查找相应的元素，这是非常耗时的。所以对于for循环，你需要预先保存数组的长度，这样写：

for (var i = 0, max = myarray.length; i < max; i++) {
   // do something with myarray[i]
}

这样缓存了参数的长度，在每次迭代的时候就不用再去查找计算了。

在查找HTML元素集合的时候，缓存参数长度可以带来可观的性能提升，Safari下面提高两倍的速度，在IE7下面提高190倍的速度。

需要注意的是，当你需要操作修改DOM元素的数量的时候，你肯定希望这个值是随时更新的而不是一个常量。

使用下面的单一var模式，你也可以把var提到循环之外：

function looper() {
   var i = 0,
        max,
        myarray = [];
   // ...
   for (i = 0, max = myarray.length; i < max; i++) {
      // do something with myarray[i]
   }
}

这个模式可以增强整个代码的连续性，但是不好的一点是当你重构代码的时候复制粘贴就没那么容易了。例如：如果你想在其他函数中也使用这个循环，那你需要确定在新的函数中处理好了i和max（或许还需要删掉这个）。

这个函数还有两个点可以优化的：

• 可以少一个变量（不需要max）
• 递减到0，一个数字与0比较比这个数字与另外一个数字比较更快

所以就可以写为：

var i, myarray = [];
for (i = myarray.length; i--;) {
   // do something with myarray[i]
}

针对第二点：

var myarray = [],
    i = myarray.length;
while (i--) {
   // do something with myarray[i]
}

这是两个比较微小的点的优化。另外，JSLint可能对于i–会有意见。

出处：rockux
责任编辑：bluehearts

上一页 如何编写高质量的Javascript代码 [3] 下一页 如何编写高质量的Javascript代码 [5]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。