詳解JavaScript的流程控制語(yǔ)句

2019-11-20 11:07:47

字體：大中小

供稿：網(wǎng)友

JS的核心ECMAScript規(guī)定的流程控制語(yǔ)句和其他的程序設(shè)計(jì)語(yǔ)言還是蠻相似的。我們選擇一些實(shí)用的例子來(lái)看
一下這些語(yǔ)句。順序結(jié)構(gòu)我們?cè)谶@里就不再提到，直接說(shuō)條件和循環(huán)以及其他語(yǔ)句。
一、條件選擇結(jié)構(gòu)
條件選擇語(yǔ)句用于基于不同的條件來(lái)執(zhí)行不同的動(dòng)作，通常在寫(xiě)代碼時(shí)，總是需要為不同的決定來(lái)執(zhí)行不同的
動(dòng)作，可以在代碼中使用條件語(yǔ)句來(lái)完成該任務(wù)。
在JavaScript中，我們可使用以下條件語(yǔ)句：
if 語(yǔ)句：只有當(dāng)指定條件為true時(shí)，使用該語(yǔ)句來(lái)執(zhí)行代碼

<!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流程控制語(yǔ)句</title> </head>  <body>  <p>如果時(shí)間早于 20:00，會(huì)獲得問(wèn)候 "Good day"。</p>  <button onclick="myFunction()">點(diǎn)擊這里</button>  <p id="demo"></p>  <script type="text/javascript"> var time=new Date().getHours(); document.write("當(dāng)前北京時(shí)間："+time); function myFunction() {  var x="";  if (time<20)  {   x="Good day";  }  document.getElementById("demo").innerHTML=x; } </script>  </body> </html>

運(yùn)行的結(jié)果為：

if...else語(yǔ)句：當(dāng)條件為true時(shí)執(zhí)行代碼，當(dāng)條件為 false 時(shí)執(zhí)行其他代碼

<!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流程控制語(yǔ)句</title> </head>  <body>  <p>如果時(shí)間早于 20:00，會(huì)獲得問(wèn)候 "Good day"。如果時(shí)間晚于 20:00，會(huì)獲得問(wèn)候 "Good evening"。</p>  <button onclick="myFunction()">點(diǎn)擊這里</button>  <p id="demo"></p>  <script type="text/javascript"> var time=new Date().getHours(); document.write("當(dāng)前北京時(shí)間："+time); function myFunction() { var x=""; if (time<20)  {  x="Good day";  } else  {  x="Good evening";  } document.getElementById("demo").innerHTML=x; } </script>  </body> </html>

運(yùn)行的結(jié)果為：

if...else if....else 語(yǔ)句：使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行

<!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流程控制語(yǔ)句</title> </head>  <body>  <p>如果時(shí)間早于 10:00，會(huì)獲得問(wèn)候 "Good morning"。</p> <p>如果時(shí)間早于 20:00，會(huì)獲得問(wèn)候 "Good day"。</p> <p>如果時(shí)間晚于 20:00，會(huì)獲得問(wèn)候 "Good evening"。</p>  <button onclick="myFunction()">點(diǎn)擊這里</button>  <p id="demo"></p>  <script type="text/javascript"> var time=new Date().getHours(); document.write("當(dāng)前北京時(shí)間："+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>

運(yùn)行的結(jié)果為：

switch語(yǔ)句： 使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行。switch 語(yǔ)句用于基于不同的條件來(lái)執(zhí)行不同的動(dòng)作

<!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流程控制語(yǔ)句2</title> </head>  <body> <p>點(diǎn)擊下面的按鈕來(lái)顯示今天是周幾：</p>  <button onclick="myFunction()">點(diǎn)擊這里</button>  <p id="demo"></p>  <script type="text/javascript"> var d=new Date().getDay(); document.write("今天的星期代表數(shù)字："+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>

運(yùn)行的結(jié)果：

default關(guān)鍵字的使用

<!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流程控制語(yǔ)句2</title> </head>  <body> <p>點(diǎn)擊下面的按鈕來(lái)顯示今天是周幾：</p>  <button onclick="myFunction()">點(diǎn)擊這里</button>  <p id="demo"></p>  <script type="text/javascript"> var d=new Date().getDay(); document.write("今天的星期代表數(shù)字："+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>

運(yùn)行的結(jié)果為：

二、循環(huán)結(jié)構(gòu)
循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。
JavaScript支持不同類型的循環(huán)：
(1)for語(yǔ)句：循環(huán)代碼塊一定的次數(shù)

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

運(yùn)行的結(jié)果為：

(2)for...in語(yǔ)句：循環(huán)遍歷對(duì)象的屬性

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

運(yùn)行的結(jié)果為：

(3)while語(yǔ)句：當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊。先判斷，再執(zhí)行語(yǔ)句，這種比較實(shí)用。

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

運(yùn)行的結(jié)果為：

(4)do...while - 同樣當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊。先執(zhí)行一次，再判斷

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

運(yùn)行的結(jié)果為：

三、其他語(yǔ)句
(1)break語(yǔ)句：用于跳出循環(huán)。

for(var box=1;box<=10;box++)  {  if(box==5)  {  break;//強(qiáng)制退出整個(gè)循環(huán)  }  document.write("box="+box+"<br/>");  }

運(yùn)行的結(jié)果為：

執(zhí)行到第四次循環(huán)時(shí)不再繼續(xù)執(zhí)行，跳出了真?zhèn)€循環(huán),，輸出的少了box=5以后的循環(huán)。
(2)continue語(yǔ)句：用于跳過(guò)循環(huán)中的一個(gè)迭代。

for(var box=1;box<=10;box++) {  if(box==5)  {  continue;//退出當(dāng)前循環(huán)，還會(huì)繼續(xù)執(zhí)行后面的循環(huán)  }  document.write("box="+box+"<br/>"); }

運(yùn)行的結(jié)果為：

執(zhí)行到第四次循環(huán)時(shí)，跳出第五次循環(huán)，繼續(xù)向下面執(zhí)行，輸出的少了box=5。
(3)with語(yǔ)句：將代碼的作用域設(shè)置到一個(gè)特定的對(duì)象中
先來(lái)看一般我們是怎么樣輸出對(duì)象的屬性的值的：

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

運(yùn)行的結(jié)果為：

改用with語(yǔ)句來(lái)寫(xiě)：

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

運(yùn)行的結(jié)果為：