詳解JavaScript的流程控制語(yǔ)句
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支持不同類(lèi)型的循環(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é)果為：
從三大方面介紹了JavaScript的流程控制語(yǔ)句，希望大家仔細(xì)閱讀，數(shù)量掌握J(rèn)avaScript流程控制語(yǔ)句的使用方法。
相關(guān)文章
extract-text-webpack-plugin用法詳解
這篇文章主要介紹了extract-text-webpack-plugin用法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
史上最全JavaScript數(shù)組去重的十種方法（推薦）
這篇文章主要介紹了JavaScript數(shù)組去重的十種方法,利用元素的屬性和特性進(jìn)行不同的去重方法，并實(shí)例演示如何測(cè)試去重超大數(shù)組，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
Javascript獲取background屬性中url的值
Javascript獲取CSS中屬性值方法有很多，今天工作的時(shí)候遇到了一個(gè)問(wèn)題是需要利用Javascript獲取css中background-img屬性u(píng)rl的值，通過(guò)查閱網(wǎng)站的資料找到了解決方法，現(xiàn)在將方法分享給大家，有需要的朋友們們可以參考借鑒，下面來(lái)一起看看吧。2016-10-10
Unicode 編碼轉(zhuǎn)換器...2007-01-01
淺析$(function) ready和onload 的區(qū)別
新手剛學(xué)習(xí)js和jq的時(shí)候難免會(huì)接觸題目所標(biāo)識(shí)的相關(guān)內(nèi)容，下面小編通過(guò)本教程給大家講解(function) ready和onload 的區(qū)別，感興趣的朋友一起看看吧2016-09-09
TypeScript模塊與命名空間的關(guān)系和使用方法
在TypeScript中就像在EC5中一樣,任何包含頂級(jí)import或export的文件都被認(rèn)為是一個(gè)模塊,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript使用模塊與命名空間以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2023-03-03
javascript 手機(jī)號(hào)碼驗(yàn)證是否正確
javascript 手機(jī)號(hào)碼驗(yàn)證實(shí)現(xiàn)代碼。2009-06-06
JavaScript實(shí)現(xiàn)的搜索及高亮顯示功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的搜索及高亮顯示功能,涉及javascript字符遍歷與頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了面向切面編程（AOP）的理解,需要的朋友可以參考下2015-05-05
JavaScript XML和string相互轉(zhuǎn)化實(shí)現(xiàn)代碼
兩個(gè)小function實(shí)現(xiàn)XML和string相互轉(zhuǎn)化，需要的朋友可以參考下。2011-07-07