写规范的javascript脚本代码 之for循环

for循环中,你可以循环取得数组或是数组类似对象的值,譬如argumentsHTMLCollection对象。通常的循环形式如下:

// 次佳的循环
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形式。不足在于当重构代码的时候,复制和粘贴整个循环有点困难。例如,你从一个函数复制了一个循环到另一个函数,你不得不去确定你能够把imax引入新的函数(如果在这里没有用的话,很有可能你要从原函数中把它们删掉)。

最后一个需要对循环进行调整的是使用下面表达式之一来替换i++

i = i + 1
i += 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]做点什么
}

这些小的改进只体现在性能上,此外JSLint会对使用i–-加以抱怨。

————转自汤姆大叔

时间: 05-19

写规范的javascript脚本代码 之for循环的相关文章

写规范的javascript脚本代码 之单var

在函数顶部使用单var语句是比较有用的一种形式,其好处在于: 提供了一个单一的地方去寻找功能所需要的所有局部变量 防止变量在定义之前使用的逻辑错误 帮助你记住声明的全局变量,因此较少了全局变量//zxx:此处我自己是有点晕乎的- 少代码(类型啊传值啊单线完成) 单var形式长得就像下面这个样子: ? 1 2 3 4 5 6 var a=0,       b=3,      c=a+b,     myobject = {},        i,        j; 您可以使用一个var语句声明多个

写规范的javascript脚本代码 之for in

for-in循环(for-in Loops) for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的.因为如果数组对象已被自定义的功能增强,就可能发生逻辑错误.另外,在for-in中,属性列表的顺序(序列)是不能保证的.所以最好数组使用正常的for循环,对象使用for-in循环. 有个很重要的hasOwnProperty()方法,当遍历对象属性的时候可以

[Swift通天遁地]一、超级工具-(5)使用UIWebView(网页视图)加载本地页面并调用JavaScript(脚本)代码

本文将演示如何使用UIWebView(网页视图)读取项目中的网页文件,以及执行JavaScript脚本代码. 在项目文件夹[DemoApp]上点击鼠标右键,弹出右键菜单. [New File]->[Blank]空白模板->[next] ->[Save As]:Register.html->[Create] 在Register.html中输入网页代码: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta h

网页开发写好的javascript脚本在chrome执行不了但是360可以

最近写了一个象棋的布局网页,因为需要用户交互,所以在不同的浏览器进行交互的时候发现,在360的兼容模式下网页布局正确,可是在chrome和火狐根本就是相当于没有执行布局的脚本,这是为什么呢?后来发现在ie10以上的版本都不行,后来查找了种种方法,终于发现,原来是写js加脚本控制div的位置与大小的时候一定要加上单位:就是不能这么写: var object=document.getElementById("background"); object.style.height=qipan_h

【JavaScript】JavaScript脚本代码的位置及在页面中的执行顺序

三.如何改变Javascript在页面的执行顺序 利用onload <script type="text/javascript">window.onload = f; function f(){ alert(1); } alert(2);</script>输出值顺序是 2.1. 需要注意的是,如果存在多个winodws.onload的话,只有最后有一个生效,解决这个办法是: window.onload = function(){f();f1();f2();...

JavaScript脚本代码

JavaScript的DOM操作: DOM:文档对象模型 文档有好多元素,每个元素称之为文档里的对象.模型能够说明问题:对象构建出模型来, HTML的好多文档,有一个根,分出多个枝,分出多个叶子,每一个元素只有一个上一级 文档--标签文档, 对象--文档中每个元素对象 模型--抽象化的东西,树的结构 图片: WINDOW--窗口 HISTORY--前进后退,历史记录 LOCATION--网址 DOCUMENT--网页的页面--/HTML 客户端只要能看得见的 window.选择:红 函数,绿 对

JavaScript脚本代码(三) 20140926

一.表单验证:1.非空验证(去空格)2.对比验证:跟一个值对比3.范围验证:根据一个范围进行判断4.固定格式验:邮箱,电话号码,身份证号,邮编,信用卡号5.其它验证: 正则表达式:用符号来描述书写规则 语法形式:var a = /正则表达式的内容/;^:匹配开头 /^love$/ very love lovelove$:匹配结尾\d:一个任意的数字 /^\d\d\d\d\d\d$/\w:一个任意的数字或字母{n}:把左边的表达式,重复n遍 /^\d{6}$/{m,n}:把左边的表达式,重复至少m

嵌入javascript脚本的位置

JavaScript脚本可以放在HTML文档任何需要的位置.一般来说,可以在<head>与</head>.<body>与</body>标记对之间按需要放置JavaScript脚本代码. 一.放在<head>与</head>标记对之间 放置在<head>与</head>标记对之间的JavaScript脚本代码一般用于提前载入以响应用户的动作,一般不影响HTML文档的浏览器显示内容.如下是其基本文档结构: 1 &l

如何写出规范的JavaScript代码

作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题.本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当然,如果我说的有不科学的地方还希望各路前辈多多指教.下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范