深入理解JavaScript系列(1):编写高质量JavaScript代码的基本(4)
为了完整,我们再提一提执行层面的稍微复杂点的东西。代码处理分两个阶段,第一阶段是变量,函数声明,以及正常格式的参数创建,这是一个解析和进入上下文 的阶段。第二个阶段是代码执行,函数表达式和不合格的标识符(为声明的变量)被创建。但是,出于实用的目的,我们就采用了”hoisting”这个概念, 这种ECMAScript标准中并未定义,通常用来描述行为。
for循环(for Loops)
在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象。通常的循环形式如下:
// 次佳的循环for (var i = 0; i < myarray.length; i++) { // 使用myarray[i]做点什么}复制代码
这种形式的循环的不足在于每次循环的时候数组的长度都要去获取下。这回降低你的代码,尤其当myarray不是数组,而是一个HTMLCollection对象的时候。
HTMLCollections指的是DOM方法返回的对象,例如:
document.getElementsByName()document.getElementsByClassName()document.getElementsByTagName()复制代码
还有其他一些HTMLCollections,这些是在DOM标准之前引进并且现在还在使用的。有:
document.images: 页面上所有的图片元素document.links : 所有a标签元素document.forms : 所有表单document.forms[0].elements : 页面上第一个表单中的所有域复制代码
集合的麻烦在于它们实时查询基本文档(HTML页面)。这意味着每次你访问任何集合的长度,你要实时查询DOM,而DOM操作一般都是比较昂贵的。
这就是为什么当你循环获取值时,缓存数组(或集合)的长度是比较好的形式,正如下面代码显示的:
for (var i = 0, max = myarray.length; i < max; i++) { // 使用myarray[i]做点什么}复制代码
这样,在这个循环过程中,你只检索了一次长度值。
在所有浏览器下,循环获取内容时缓存HTMLCollections的长度是更快的,2倍(Safari3)到190倍(IE7)之间。//zxx:此数据貌似很老,仅供参考
注意到,当你明确想要修改循环中的集合的时候(例如,添加更多的DOM元素),你可能更喜欢长度更新而不是常量。
伴随着单var形式,你可以把变量从循环中提出来,就像下面这样:
function looper() { var i = 0, max, myarray = []; // ... for (i = 0, max = myarray.length; i < max; i++) { // 使用myarray[i]做点什么 }}复制代码
这种形式具有一致性的好处,因为你坚持了单一var形式。不足在于当重构代码的时候,复制和粘贴整个循环有点困难。例如,你从一个函数复制了一个循环到另一个函数,你不得不去确定你能够把i和max引入新的函数(如果在这里没有用的话,很有可能你要从原函数中把它们删掉)。
最后一个需要对循环进行调整的是使用下面表达式之一来替换i++。
i = i + 1i += 1复制代码
JSLint提示您这样做,原因是++和–-促进了“过分棘手(excessive trickiness)”。//zxx:这里比较难翻译,我想本意应该是让代码变得更加的棘手
如果你直接无视它,JSLint的plusplus选项会是false(默认是default)。
还有两种变化的形式,其又有了些微改进,因为:
少了一个变量(无max)
向下数到0,通常更快,因为和0做比较要比和数组长度或是其他不是0的东西作比较更有效率
//第一种变化的形式:var i, myarray = [];for (i = myarray.length; i–-;) { // 使用myarray[i]做点什么}//第二种使用while循环:var myarray = [], i = myarray.length;while (i–-) { // 使用myarray[i]做点什么}复制代码
相关新闻>>
- Javascript 兼容 IE6、IE7、FF 的“加入收藏”“设为首页”
- 好好学一遍JavaScript 笔记(一)——基础中的基础
- 好好学一遍JavaScript 笔记(二)——encode、数组、对象创建
- 好好学一遍JavaScript 笔记(三)——StringBuffer、prototype
- 好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎
- 好好学一遍JavaScript 笔记(五)——正则表达式基础
- 好好学一遍JavaScript 笔记(六)——正则表达式基础二
- 好好学一遍JavaScript 笔记(七)——RegExp对象与常用正则
- 好好学一遍JavaScript 笔记(八)——冒泡型事件、捕获型事件
- JavaScript详解
- 发表评论
-
- 最新评论 更多>>