JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

巧写循环条件,让JS for循环更加高效

首先举例说明,例如我们需要遍历数组,很多时候我们会这样做:
var arr=["www.itxueyuan.com","javascript","你好"];
for(var i=0,i<arr.length;i++){
    document.write("第"+(i+1)+“项的值是:”+arr[i]);
}
对于for循环,每次开始循环之前都会判断循环条件,满足循环条件才执行后边的语句。这个例子中,每次循环都会执行 arr.length 语句来获取数组长度,数组越大,执行时间越长;如果是获取 HTMLCollection 对象的长度,每次都要实时查询DOM,而DOM操作一般都是比较昂贵的。

注意,这里的HTMLCollections指的是DOM方法返回的对象,例如:
document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()

还有其他一些HTMLCollections,这些是在DOM标准之前引进并且现在还在使用的。有:
document.images: 页面上所有的图片元素
document.links : 所有a标签元素
document.forms : 所有表单
document.forms[0].elements : 页面上第一个表单中的所有域


这就给我们一个启示,有必要提前缓存数组长度或者 HTMLCollection 对象长度。正如下面代码所示:
for (var i = 0, max=arr.length; i < max; i++) {
   // 使用myarray[i]做点什么
}

这样,在这个循环过程中,你只检索了一次长度值。

在所有浏览器下,循环获取内容时缓存HTMLCollections的长度是更快的,2倍(Safari3)到190倍(IE7)之间。此数据貌似很老,仅供参考。

而且,你可以把变量从循环中提出来,让代码更加优雅,就像下面这样:
function looper() {
   var i = 0,
        max,
        myarray = [];
   // ...
   for (i = 0, max = myarray.length; i < max; i++) {
      // 使用myarray[i]做点什么
   }
}

这种形式具有一致性的好处,因为你坚持了单一var形式。不足在于当重构代码的时候,复制和粘贴整个循环有点困难。例如,你从一个函数复制了一个循环到另一个函数,你不得不去确定你能够把i和max引入新的函数(如果在这里没有用的话,很有可能你要从原函数中把它们删掉)。