网站地图    收藏   

主页 > 前端 > javascript >

Javascript for 循环语句学习笔记

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] for循环就是有个初始值与一个结束值这样可以形成一个闭合循环了,如果你要死循环只要步长不变即可了,下面我来介绍我对for 循环的夹角。...

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法:

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

语句 1 在循环(代码块)开始前执行

语句 2 定义运行循环(代码块)的条件

语句 3 在循环(代码块)已被执行之后执行

基本结构如下:

 代码如下 复制代码
for(initial condition ; test condition ; alter condition){
    statements;
}

循环控制代码(即小括号内代码)各参数的含义如下:
•initial condition:表示循环变量初始值;
•test condition:为控制循环结束与否的条件表达式,程序每执行完一次循环体内语句(或语句块),均要计算该表达式是否为真,若结果为真,则继续运行下一次循环;若结果为假,则跳出循环体。
•alter condition:指循环变量更新的方式,程序每执行完一次循环,均需要更新循环变量。

上述循环控制参数之间使用分号“ ; ”来分隔。

【例3-4】计算1+2+3 ... +98+99+100的值:

 代码如下 复制代码
<html>
<head>
<title>计算1+2+3 ... +98+99+100的值</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var total=0;
for(var i=1; i<=100; i++){
    total+=i;
}
alert(total);
</script>
</body>
</html>

下我们接着往下看

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)之间。//此数据貌似很老,仅供参考

注意到,当你明确想要修改循环中的集合的时候(例如,添加更多的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 + 1 
i += 1

JSLint提示您这样做,原因是++和–-促进了“过分棘手(excessive trickiness)”。如果你直接无视它,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–-加以抱怨。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论