轻松学习JavaScript七：JavaScript的流程控制语句

来源：互联网发布：手机vpn软件编辑：程序博客网时间：2024/06/06 05:14

JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看

一下这些语句。顺序结构我们在这里就不再提到，直接说条件和循环以及其他语句。

一条件选择结构

条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的

动作，可以在代码中使用条件语句来完成该任务。

在JavaScript中，我们可使用以下条件语句：

if 语句：只有当指定条件为true时，使用该语句来执行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS流程控制语句</title></head><body><p>如果时间早于 20:00，会获得问候 "Good day"。</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script type="text/javascript">var time=new Date().getHours();document.write("当前北京时间："+time);function myFunction(){     var x="";     if (time<20)     {         x="Good day";     }     document.getElementById("demo").innerHTML=x;}</script></body></html>

运行的结果为：

if...else语句：当条件为true时执行代码，当条件为 false 时执行其他代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS流程控制语句</title></head><body><p>如果时间早于 20:00，会获得问候 "Good day"。如果时间晚于 20:00，会获得问候 "Good evening"。</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script type="text/javascript">var time=new Date().getHours();document.write("当前北京时间："+time);function myFunction(){var x="";if (time<20)  {  x="Good day";  }else  {  x="Good evening";  }document.getElementById("demo").innerHTML=x;}</script></body></html>

运行的结果为：

if...else if....else 语句：使用该语句来选择多个代码块之一来执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS流程控制语句</title></head><body><p>如果时间早于 10:00，会获得问候 "Good morning"。</p><p>如果时间早于 20:00，会获得问候 "Good day"。</p><p>如果时间晚于 20:00，会获得问候 "Good evening"。</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script type="text/javascript">var time=new Date().getHours();document.write("当前北京时间："+time);function myFunction(){var x="";if (time<10)  {  x="Good morning";  }else if (time<20)  {  x="Good day";  }else  {  x="Good evening";  }document.getElementById("demo").innerHTML=x;}</script></body></html>

运行的结果为：

switch语句：使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS流程控制语句2</title></head><body><p>点击下面的按钮来显示今天是周几：</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script type="text/javascript">var d=new Date().getDay();document.write("今天的星期代表数字："+d);function myFunction(){var x;switch (d)  {  case 0:x="Today it's Sunday";break;  case 1:x="Today it's Monday";break;  case 2:x="Today it's Tuesday";break;  case 3:x="Today it's Wednesday";break;  case 4:x="Today it's Thursday";break;  case 5:x="Today it's Friday";break;  case 6:x="Today it's Saturday";break;  }document.getElementById("demo").innerHTML=x;}</script></body></html>

运行的结果：

default关键字的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS流程控制语句2</title></head><body><p>点击下面的按钮来显示今天是周几：</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script type="text/javascript">var d=new Date().getDay();document.write("今天的星期代表数字："+d);function myFunction(){var x;switch (d)   {   case 6:     x="Today it's Saturday";     break;   case 0:     x="Today it's Sunday";     break;   default:     x="Looking forward to the Weekend";   }document.getElementById("demo").innerHTML=x;}</script></body></html>

运行的结果为：

二循环结构

循环可以将代码块执行指定的次数。

JavaScript支持不同类型的循环：

(1)for语句：循环代码块一定的次数

for(var box=1;box<=10;box++){    document.write("box="+box+"<br/>");}

运行的结果为：

(2)for...in语句：循环遍历对象的属性

    var box={       name:"张三",       age:24,       sex:"男"     };    for(x in box)    {       document.write(box[x]+"<br/>");    }

运行的结果为：

(3)while语句：当指定的条件为 true 时循环指定的代码块。先判断，再执行语句，这种比较实用。

     var box=1;     while(box<=5)     {       document.write("box="+box+"<br/>");       box++;     }

运行的结果为：

(4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次，再判断

     var box=1;     do{       document.write("box="+box+"<br/>");       box++;     }while(box<=10)

运行的结果为：

三其他语句

(1)break语句：用于跳出循环。

    for(var box=1;box<=10;box++)     {        if(box==5)       {          break;//强制退出整个循环        }       document.write("box="+box+"<br/>");     }

运行的结果为：

执行到第四次循环时不再继续执行，跳出了真个循环,，输出的少了box=5以后的循环。

(2)continue语句：用于跳过循环中的一个迭代。

     for(var box=1;box<=10;box++)     {       if(box==5)       {          continue;//退出当前循环，还会继续执行后面的循环        }       document.write("box="+box+"<br/>");     }

运行的结果为：

执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了box=5。

(3)with语句：将代码的作用域设置到一个特定的对象中

先来看一般我们是怎么样输出对象的属性的值的：

      var box={       name:"张三",       age:24,       sex:"男"      };      var n=box.name;      var a=box.age;      var s=box.sex;      document.write(n+"<br/>");  document.write(a+"<br/>");  document.write(s);

运行的结果为：

改用with语句来写：

     var box={       name:"张三",       age:24,       sex:"男"      };      with(box){        var n=name;        var a=age;        var s=sex;      };  document.write(n+"<br/>");  document.write(a+"<br/>");  document.write(s);

运行的结果为：

4 0