本節(jié)學(xué)習(xí)目標(biāo)
- 掌握
if-else語句的使用 - 掌握
switch語句的使用
本節(jié)內(nèi)容
網(wǎng)上一直流傳這么一個段子
妻子說：“你去菜場買一個西瓜，如果看見西紅柿，就買兩個。”
過了一會，丈夫買了兩個西瓜回來。
妻子問：“你怎么買了兩個西瓜？”
程序員丈夫回答：“因為在菜場看見西紅柿了！”
吃瓜群眾表示一臉問號，但相信學(xué)完這一節(jié)，你一定會說：“嗯……沒毛病！”
- 理解條件分支語句
首先，我們來了解一下條件分支語句是做什么的。
條件分支語句就是基于不同的 條件 去執(zhí)行不同的 動作 。
我們用程序員的思維來翻譯一下上面的段子。"如果"后面的是"條件"，"條件"之后跟了相應(yīng)的"動作"。于是，我們得到下面兩組“條件 -> 動作”：
- 條件成立：看見西紅柿 -> 動作1：買兩個西瓜
- 條件不成立：沒看見西紅柿 -> 動作2：買一個西瓜
接著，我們來看一下 JavaScript 中是如何使用條件分支語句的。
-
if語句
if 語句的語法格式如下
if (condition)
{
// 當(dāng) condition==true 時執(zhí)行的語句塊
}
需要注意的是，這里的 condition 的身份是判斷語句，只有真（true）、假（false）兩種情況，即條件要么成立，要么不成立，只有兩面。
示例
var seeTomato = 'yes';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
//輸出結(jié)果 Buy two watermelons!
那么好學(xué)的你可能會問，如果條件不成立，代碼該怎么執(zhí)行呢？答案是，跳過 if 語句塊，執(zhí)行 if 語句塊后面的語句。
示例
var seeTomato = 'no';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
console.log('Buy nothing!');
//輸出結(jié)果 Buy nothing！
目前我們還無法用 JavaScript 翻譯出上面的段子，這就需要用到 if-else 語句了。
-
if-else語句
if-else 語句的語法格式如下
if (condition)
{
// 當(dāng) condition==true 時執(zhí)行的語句塊1
}
else
{
// 當(dāng) condition==false 時執(zhí)行的語句塊2
}
當(dāng)條件成立時，執(zhí)行語句塊1；當(dāng)條件不成立時，執(zhí)行語句塊2.
好了，現(xiàn)在我們來翻譯一下上面的段子。
示例
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!
所以程序員丈夫是不是買得沒毛病？！
可能好學(xué)的你又會問，上面只能設(shè)置一個條件，怎么設(shè)置多個條件呢？答案是，把 if-else 語句組合起來。
-
if-else if-else語句
if-else 語句的語法格式如下
if (condition1)
{
// 當(dāng) condition1==true 時執(zhí)行的語句塊1
}
else if (condition2)
{
// 當(dāng) condition2==true 時執(zhí)行的語句塊2
}
else
{
// 當(dāng) condition1==false && condition2==false 時執(zhí)行的語句塊3
}
剛看到這個可能會一頭霧水，我們來轉(zhuǎn)換一下形式
if (condition1)
{
// 當(dāng) condition1==true 時執(zhí)行的語句塊1
}
else
{
if (condition2)
{
// 當(dāng) condition2==true 時執(zhí)行的語句塊2
}
else
{
// 當(dāng) condition1==false && condition2==false 時執(zhí)行的語句塊3
}
}
這樣是不是就好理解了。第二個 if-else 嵌套在了第一個 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é)的你又會發(fā)問了，代碼這么長，有沒有方便的方法可以簡化一下。那么 switch 語句可以幫助到你。
-
swich語句
switch 語句的語法格式如下
switch(n)
{
case n1:
執(zhí)行代碼塊 1
break;
case n2:
執(zhí)行代碼塊 2
break;
default:
與 case n1 和 case n2 不同時執(zhí)行的代碼塊3
}
這里的 n 是一個變量，若 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 語句是做什么用的呢？break 語句在后續(xù)學(xué)習(xí)中會介紹，先小劇透一下：break 語句在這里的作用是跳出這個 switch 語句塊。如果不使用 break ,成立的case后的代碼都會接著執(zhí)行，用了 break ,就可以跳出這個 switch 語句塊。
示例
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é)的知識講解就到這了，最后強調(diào)一點，條件分支語句每次只執(zhí)行多種情況中的一種情況。
參考資料
本節(jié)練習(xí)
運行以下代碼，并思考為什么出現(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("未知");
}
