本節(jié)學(xué)習(xí)目標(biāo)
- 掌握
if-else語(yǔ)句的使用 - 掌握
switch語(yǔ)句的使用
本節(jié)內(nèi)容
網(wǎng)上一直流傳這么一個(gè)段子
妻子說(shuō)：“你去菜場(chǎng)買一個(gè)西瓜替蔬，如果看見西紅柿，就買兩個(gè)导坟±Ｂ郏”
過(guò)了一會(huì)，丈夫買了兩個(gè)西瓜回來(lái)拂封。
妻子問(wèn)：“你怎么買了兩個(gè)西瓜茬射？”
程序員丈夫回答：“因?yàn)樵诓藞?chǎng)看見西紅柿了！”
吃瓜群眾表示一臉問(wèn)號(hào)冒签，但相信學(xué)完這一節(jié)在抛，你一定會(huì)說(shuō)：“嗯……沒(méi)毛病萧恕！”
- 理解條件分支語(yǔ)句
首先刚梭，我們來(lái)了解一下條件分支語(yǔ)句是做什么的肠阱。
條件分支語(yǔ)句就是基于不同的 條件 去執(zhí)行不同的 動(dòng)作 。
我們用程序員的思維來(lái)翻譯一下上面的段子朴读。"如果"后面的是"條件"屹徘，"條件"之后跟了相應(yīng)的"動(dòng)作"。于是衅金，我們得到下面兩組“條件 -> 動(dòng)作”：
- 條件成立：看見西紅柿 -> 動(dòng)作1：買兩個(gè)西瓜
- 條件不成立：沒(méi)看見西紅柿 -> 動(dòng)作2：買一個(gè)西瓜
接著噪伊，我們來(lái)看一下 JavaScript 中是如何使用條件分支語(yǔ)句的。
-
if語(yǔ)句
if 語(yǔ)句的語(yǔ)法格式如下
if (condition)
{
// 當(dāng) condition==true 時(shí)執(zhí)行的語(yǔ)句塊
}
需要注意的是氮唯，這里的 condition 的身份是判斷語(yǔ)句鉴吹，只有真（true）、假（false）兩種情況惩琉，即條件要么成立豆励，要么不成立，只有兩面瞒渠。
示例
var seeTomato = 'yes';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
//輸出結(jié)果 Buy two watermelons!
那么好學(xué)的你可能會(huì)問(wèn)良蒸，如果條件不成立，代碼該怎么執(zhí)行呢伍玖？答案是嫩痰，跳過(guò) if 語(yǔ)句塊，執(zhí)行 if 語(yǔ)句塊后面的語(yǔ)句私沮。
示例
var seeTomato = 'no';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
console.log('Buy nothing!');
//輸出結(jié)果 Buy nothing始赎！
目前我們還無(wú)法用 JavaScript 翻譯出上面的段子，這就需要用到 if-else 語(yǔ)句了仔燕。
-
if-else語(yǔ)句
if-else 語(yǔ)句的語(yǔ)法格式如下
if (condition)
{
// 當(dāng) condition==true 時(shí)執(zhí)行的語(yǔ)句塊1
}
else
{
// 當(dāng) condition==false 時(shí)執(zhí)行的語(yǔ)句塊2
}
當(dāng)條件成立時(shí)造垛，執(zhí)行語(yǔ)句塊1；當(dāng)條件不成立時(shí)晰搀，執(zhí)行語(yǔ)句塊2.
好了五辽，現(xiàn)在我們來(lái)翻譯一下上面的段子。
示例
var seeTomato = 'yes';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
else
{
console.log('Buy one watermelon!');
}
// 輸出結(jié)果 Buy two watermelons!
var seeTomato = 'no';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
else
{
console.log('Buy one watermelon!');
}
// 輸出結(jié)果 Buy one watermelon!
所以程序員丈夫是不是買得沒(méi)毛餐馑 杆逗？！
可能好學(xué)的你又會(huì)問(wèn)鳞疲，上面只能設(shè)置一個(gè)條件罪郊，怎么設(shè)置多個(gè)條件呢？答案是尚洽，把 if-else 語(yǔ)句組合起來(lái)悔橄。
-
if-else if-else語(yǔ)句
if-else 語(yǔ)句的語(yǔ)法格式如下
if (condition1)
{
// 當(dāng) condition1==true 時(shí)執(zhí)行的語(yǔ)句塊1
}
else if (condition2)
{
// 當(dāng) condition2==true 時(shí)執(zhí)行的語(yǔ)句塊2
}
else
{
// 當(dāng) condition1==false && condition2==false 時(shí)執(zhí)行的語(yǔ)句塊3
}
剛看到這個(gè)可能會(huì)一頭霧水，我們來(lái)轉(zhuǎn)換一下形式
if (condition1)
{
// 當(dāng) condition1==true 時(shí)執(zhí)行的語(yǔ)句塊1
}
else
{
if (condition2)
{
// 當(dāng) condition2==true 時(shí)執(zhí)行的語(yǔ)句塊2
}
else
{
// 當(dāng) condition1==false && condition2==false 時(shí)執(zhí)行的語(yǔ)句塊3
}
}
這樣是不是就好理解了。第二個(gè) if-else 嵌套在了第一個(gè) if-else 中癣疟。但是挣柬，為了方便，為了美觀睛挚，為了養(yǎng)成良好的代碼書寫習(xí)慣邪蛔，我們要采用第一種寫法。
示例
var date = 3;
if (date == 1)
{
console.log('星期一');
}
else if (date == 2)
{
console.log('星期二');
}
else{
console.log('未知');
}
// 輸出結(jié)果 未知
看到這段代碼扎狱，你可能回想侧到，星期三、星期四……怎么辦淤击？那就再嵌套唄床牧！
示例
var date = 5;
if (date == 1)
{
console.log('星期一');
}
else if (date == 2)
{
console.log('星期二');
}
else if (date == 3)
{
console.log('星期三');
}
else if (date == 4)
{
console.log('星期四');
}
else if (date == 5)
{
console.log('星期五');
}
else if (date == 6)
{
console.log('星期六');
}
else if (date == 7)
{
console.log('星期日');
}
else
{
console.log('未知');
}
// 輸出結(jié)果 星期五
于是好學(xué)的你又會(huì)發(fā)問(wèn)了，代碼這么長(zhǎng)遭贸，有沒(méi)有方便的方法可以簡(jiǎn)化一下。那么 switch 語(yǔ)句可以幫助到你心软。
-
swich語(yǔ)句
switch 語(yǔ)句的語(yǔ)法格式如下
switch(n)
{
case n1:
執(zhí)行代碼塊 1
break;
case n2:
執(zhí)行代碼塊 2
break;
default:
與 case n1 和 case n2 不同時(shí)執(zhí)行的代碼塊3
}
這里的 n 是一個(gè)變量壕吹，若 n 與 n1 相等，則執(zhí)行代碼塊1删铃，若
n 與 n2 相等耳贬，則執(zhí)行代碼塊2，若都不相等猎唁，則執(zhí)行代碼塊3咒劲。
于是，之前的代碼可以這樣寫
var date = 5;
switch(date)
{
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("未知");
}
//輸出結(jié)果 星期五
最后诫隅，這里的 break 語(yǔ)句是做什么用的呢腐魂？break 語(yǔ)句在后續(xù)學(xué)習(xí)中會(huì)介紹，先小劇透一下：break 語(yǔ)句在這里的作用是跳出這個(gè) switch 語(yǔ)句塊逐纬。如果不使用 break ,成立的case后的代碼都會(huì)接著執(zhí)行蛔屹，用了 break ,就可以跳出這個(gè) switch 語(yǔ)句塊。
示例
var date = 5;
switch(date)
{
case 1:
console.log("星期一");
case 2:
console.log("星期二");
case 3:
console.log("星期三");
case 4:
console.log("星期四");
case 5:
console.log("星期五");
case 6:
console.log("星期六");
case 7:
console.log("星期日");
default:
console.log("未知");
}
輸出結(jié)果
星期五
星期六
星期日
未知
本節(jié)的知識(shí)講解就到這了豁生，最后強(qiáng)調(diào)一點(diǎn)兔毒，條件分支語(yǔ)句每次只執(zhí)行多種情況中的一種情況。
參考資料
本節(jié)練習(xí)
運(yùn)行以下代碼甸箱，并思考為什么出現(xiàn)這樣的結(jié)果育叁。
- if-else
var x = 3;
if(x = 1)
console.log('x=1');
else
console.log('x!=1');
- switch
var date = 5;
switch(date)
{
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
default:
console.log("未知");
}
