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数组的所有变量,并且将他们逐一输出。

posted @ 2018-12-20 15:18  猝死边缘挣扎的狗子  阅读(136)  评论(0编辑  收藏  举报