JavaScript循环结构
For 循环
所谓循环,就是重复执行一段代码。。
for语句结构如图:
语法定义:
for (初始化;条件;增量)
{
循环代码;
}
实现条件循环,当条件成立时,执行语句1,否则跳出循环体。
让我们来看一个简单的例子吧:有十个学员报数,“学员1号、学员2号”。有了for循环,很少的代码就可以实现十个学员的报数。
1
2
3
4
5
6
7
|
<script type= "text/JavaScript" > var i=1; for (i=1;i<=10;i++) { document.write( "学员" +i+ "号<br />" ); } </script> |
结果如下:
学员1号
学员2号
学员3号
学员4号
学员5号
学员6号
学员7号
学员8号
学员9号
学员10号
在上面那个例子中,循环恰好执行了10次,那么和“for (i=1;i<=10;i++)”一句中的10是不是10次的意思呢?下面我们就来看看for循环的工作机制。
首先"i=1"叫做初始条件,也就是说从哪里开始,特别的,我们的例子从i=1开始。出现在第一个分号后面的"i<=10"表示判断条件,每次循环都会先判断这个条件是否满足,如果满足则继续循环,否则停止循环,继续执行for循环后面的代码。你可能想问了,我们设定了i=0,岂不是永远都小于等于10吗?来看第三个部分。
最后的"i++"表示让i在自身的基础上加1,这时每次循环后的动作.也就是说,每次循环结束,i都会比原来大1,执行若干次循环之后,i<=10的条件就不满足了,这时循环结束。for循环后面的代码将得到执行。
While循环
while循环重复执行一段代码,直到某个条件不再满足。
while循环的结构如图:
语法定义:
while(判断条件)
{
循环代码
}
运行功能和for类似,当条件成立循环执行语句花括号{}内的语句,否则跳出循环
其实while循环和for循环的作用都是重复执行代码,例如下面这段代码,和上一节for循环的输出结果完全没有区别。先来读读例子的代码,下面会解释为什么这个循环会和上一节的for循环等价。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html> <body> <script type=“text/JavaScript”> var i=0; while (i<=10) { document.write( "学员" +i+ "号" ); document.write( "<br />" ); i=i+1; } </script> </body> </html> |
看起来好像比for循环少了点东西啊,只有一个判断条件啊。其实这个循环也是有初始条件的,只不过在之前就已经定义好了,例如上面例子中的"var i=0;",至于变量i的增大,则是放到了循环体里面,其实这个过程和for没有什么区别,也是变量i不断变大,直到判断条件不满足,则循环结束。
do while循环的结构
do wile结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次。因为它是先执行代码,后判断条件。例子如下:
1
2
3
4
5
6
7
8
9
10
|
<script type= "text/JavaScript" > i = 0; do { document.write( "The number is " + i); document.write( "<br />" ); i++; } while (i <= 5) </script> |
运行结果:
例子2如下:
1
2
3
4
5
6
7
8
9
10
|
<script type= "text/JavaScript" > i = 0; do { document.write( "The number is " + i); document.write( "<br />" ); i++; } while (i <0) </script> |
代码第2行赋值i的值为0,程序执行循环体,执行到第9行while(i<0)后判断循环条件得到结果为“不成立”退出循环体,程序结束。
运行结果:
JavaScript For...In循环
Javascript中的for in循环通常用来遍历数组
首先要了解什么是数组,所谓数组,其实就是一个保存了一组类似变量的一个集合。我们来看一个保存了爱好的数组实例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html> <body> <script type= "text/JavaScript" > var x; var hobbies = new Array(); //创建一个新的数组 hobbies[0] = "JavaScript" ; hobbies[1] = "CSS" ; hobbies[2] = "篮球" ; for (x in hobbies) //数组中的每一个变量 { document.write(hobbies[x] + "<br />" ); } </script> </body> </html> |
输出结果如下:
JavaScript
CSS
篮球
我们来分析一下上面的例子:
var hobbies = new Array();一句创建了一个新的数组。
hobbies[0] = "JavaScript";以及之后的两句则是给hobbies数组赋值。这与我们之前见过的变量赋值不太一样,hobbies后面多出一个"[0]",这个是变量的索引。我们之前已经说了,数组是变量的集合,因此我们在赋值之前需要指明给数组中的哪一个变量赋值。在这里,"[0]"表示的是hobbies数组所包含的第一个变量,没错,数组的索引是从0开始的,开始可能有点别扭,慢慢就习惯了。
最后的for in循环就很好理解了,
for (x in hobbies) //数组中的每一个变量
{
document.write(hobbies[x] + "<br />");
}
表示遍历hobbies数组的所有变量,并且将他们逐一输出。