詳解JavaScript的流程控制語句
JS的核心ECMAScript規(guī)定的流程控制語句和其他的程序設(shè)計語言還是蠻相似的。我們選擇一些實用的例子來看
一下這些語句。順序結(jié)構(gòu)我們在這里就不再提到,直接說條件和循環(huán)以及其他語句。
一、條件選擇結(jié)構(gòu)
條件選擇語句用于基于不同的條件來執(zhí)行不同的動作,通常在寫代碼時,總是需要為不同的決定來執(zhí)行不同的
動作,可以在代碼中使用條件語句來完成該任務(wù)。
在JavaScript中,我們可使用以下條件語句:
if 語句:只有當(dāng)指定條件為true時,使用該語句來執(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流程控制語句</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("當(dāng)前北京時間:"+time); function myFunction() { var x=""; if (time<20) { x="Good day"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運行的結(jié)果為:
if...else語句:當(dāng)條件為true時執(zhí)行代碼,當(dāng)條件為 false 時執(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流程控制語句</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("當(dāng)前北京時間:"+time); function myFunction() { var x=""; if (time<20) { x="Good day"; } else { x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運行的結(jié)果為:
if...else if....else 語句:使用該語句來選擇多個代碼塊之一來執(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流程控制語句</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("當(dāng)前北京時間:"+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>
運行的結(jié)果為:
switch語句: 使用該語句來選擇多個代碼塊之一來執(zhí)行。switch 語句用于基于不同的條件來執(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流程控制語句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("今天的星期代表數(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>
運行的結(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流程控制語句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("今天的星期代表數(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>
運行的結(jié)果為:
二、循環(huán)結(jié)構(gòu)
循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。
JavaScript支持不同類型的循環(huán):
(1)for語句:循環(huán)代碼塊一定的次數(shù)
for(var box=1;box<=10;box++) { document.write("box="+box+"<br/>"); }
運行的結(jié)果為:
(2)for...in語句: 循環(huán)遍歷對象的屬性
var box={ name:"張三", age:24, sex:"男" }; for(x in box) { document.write(box[x]+"<br/>"); }
運行的結(jié)果為:
(3)while語句:當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊。先判斷,再執(zhí)行語句,這種比較實用。
var box=1; while(box<=5) { document.write("box="+box+"<br/>"); box++; }
運行的結(jié)果為:
(4)do...while - 同樣當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊。先執(zhí)行一次,再判斷
var box=1; do{ document.write("box="+box+"<br/>"); box++; }while(box<=10)
運行的結(jié)果為:
三、其他語句
(1)break語句:用于跳出循環(huán)。
for(var box=1;box<=10;box++) { if(box==5) { break;//強制退出整個循環(huán) } document.write("box="+box+"<br/>"); }
運行的結(jié)果為:
執(zhí)行到第四次循環(huán)時不再繼續(xù)執(zhí)行,跳出了真?zhèn)€循環(huán),,輸出的少了box=5以后的循環(huán)。
(2)continue語句:用于跳過循環(huán)中的一個迭代。
for(var box=1;box<=10;box++) { if(box==5) { continue;//退出當(dāng)前循環(huán),還會繼續(xù)執(zhí)行后面的循環(huán) } document.write("box="+box+"<br/>"); }
運行的結(jié)果為:
執(zhí)行到第四次循環(huán)時,跳出第五次循環(huán),繼續(xù)向下面執(zhí)行,輸出的少了box=5。
(3)with語句:將代碼的作用域設(shè)置到一個特定的對象中
先來看一般我們是怎么樣輸出對象的屬性的值的:
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);
運行的結(jié)果為:
改用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);
運行的結(jié)果為:
從三大方面介紹了JavaScript的流程控制語句,希望大家仔細(xì)閱讀,數(shù)量掌握J(rèn)avaScript流程控制語句的使用方法。
相關(guān)文章
JavaScript實現(xiàn)三種常用網(wǎng)頁特效(offset、client、scroll系列)
這篇文章主要為大家介紹了三種常用的PC端網(wǎng)頁特效:元素偏移量offset系列,元素可視區(qū)client系列和元素滾動scroll系列,文中示例代碼介紹詳細(xì),需要的可以參考一下2021-12-12

JavaScript計算器網(wǎng)頁版實現(xiàn)代碼分享

手把手教你 CKEDITOR 4 實現(xiàn)Dialog 內(nèi)嵌 IFrame操作詳解

javascript 對象屬性property與元素屬性attribute的瀏覽器支持

JavaScript 實現(xiàn)簡單的倒計時彈窗DEMO附圖