详解JavaScript的流程控制语句

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）;

运行的结果为：

从三大方面介绍了JavaScript的流程控制语句，希望大家仔细阅读，数量掌握JavaScript流程控制语句的使用方法。