JavaScript丨條件語句
這應該是JavaScript系列教程的第五期了，本期講講基礎知識之條件語句，也是項目中常用的。比如有個挺火的小程序，今天吃什么？其實基本上就是列舉了很多的食物，然后使用隨機數(shù)或者使用條件語句來給你選擇其中一個出來。
什么是條件語句？簡單的理解就是當代碼運行到條件語句這里，就需要選擇運行，要么選擇一個，要不選擇另一個。舉個栗子，在生活中，到了吃飯的時候，我們就面臨著選擇，這個時候就是到了條件語句了，我們是選擇吃麻辣燙呢？還是麻辣香鍋又或者是冒菜？后面我會用代碼對這個栗子翻譯。當然，條件語句也有好幾個寫法，常用的就是以下幾種。
這個是我們在代碼中最最最常見的寫法
const?age?=?18;if?(age?>?20)?{console.log("我今年20啦");}?else?{console.log("我永遠18！");}
可以看到最終輸出的是我永遠18！。
簡單的翻譯一下，就是定義了個年齡為18，if表示如果，如果年齡大于20，那么輸出我今年20啦！，else表示否則，否則年齡不大于20，輸出`我永遠18！``
當然，你說這只能是兩個選擇，萬一選擇多的話呢？我有三個四個五個甚至更多怎么辦？
如果你可以想要更多選項，那么就要試試else if這個語法了！
將上面這個麻辣燙栗子改成代碼試試，我們規(guī)定，早上吃麻辣燙，中午吃麻辣香鍋，晚上吃冒菜：
/**?*?早上吃麻辣燙?*?中午吃麻辣香鍋?*?晚上吃冒菜?*/const?time?=?"早上";if?(time?===?"早上")?{??console.log("早上吃麻辣燙");}?else?if?(time?===?"中午")?{??console.log("中午吃麻辣香鍋");}?else?{??console.log("晚上吃冒菜");}
運行一下，可以看到輸出了早上吃麻辣燙的文本。當然你還想早上加個餐，想吃茶葉蛋還是煎蛋呢？那我們還可以再加一個！
/**?*?早上吃麻辣燙?*?中午吃麻辣香鍋?*?晚上吃冒菜?*/const?time?=?"早上";const?moreEat?=?"茶葉蛋";if?(time?===?"早上")?{??console.log("早上吃麻辣燙");??if?(moreEat?===?"茶葉蛋")?{????console.log("我選擇吃茶葉蛋！");??}?else?{????console.log("煎蛋yyds！");??}}?else?if?(time?===?"中午")?{??console.log("中午吃麻辣香鍋");}?else?{??console.log("晚上吃冒菜");}
我們在早上這里再加上一個if else判斷，打印一下，輸出以上結果！
你說以上看的太麻煩了，要是很多個選擇，就有很多個if else，那真的是看的眼睛疼，別慌，我們還有個語法。
當我們的選項太多了，看的眼花繚亂，難以維護的時候，我們就可以使用這個條件語句switch！它也可以和if else混用！還是以上面的栗子舉栗：
/**?*?早上吃麻辣燙?*?中午吃麻辣香鍋?*?晚上吃冒菜?*/const?time?=?"早上";const?moreEat?=?"茶葉蛋";switch?(time)?{??case?"早上":????console.log("早上吃麻辣燙");????if?(moreEat?===?"茶葉蛋")?{??????console.log("我選擇吃茶葉蛋！");????}?else?{??????console.log("煎蛋yyds！");????}????break;??case?"中午":????console.log("中午吃麻辣香鍋");????break;??default:????console.log("晚上吃冒菜");????break;}
打印一下，發(fā)現(xiàn)結果一模一樣！現(xiàn)在來解釋一下這個語法！
switch后面的括號，就是相當于咱們做選擇題的括號，我們選擇的每一個，都是下面的選項內容。與下面選項一一對應的。括號內部可以是表達式也可以是其他的。
case關鍵字就是后面就是選項，上面的括號的內容結果和case后面的選項一致的話，就會執(zhí)行這個里面的代碼。
break關鍵詞，正如翻譯的中文一樣打破，意思就是打斷后面的選擇，我們選擇一個就成。
default關鍵詞，就是當前面的所有選項完美避開了，都沒有執(zhí)行，那么將會執(zhí)行default這個里面的代碼，正如翻譯的中文一樣默認，他是在所有都沒執(zhí)行的時候，執(zhí)行默認的代碼。
注意，當你確定是csae后面要執(zhí)行代碼的話，請保證一定要有break，不然它不會按照你的預期執(zhí)行對應選項的代碼，會一直往下走，直到遇到了break才會停止選擇。
你可以想說，那我要是真的只有兩個或者三個選項，用if else或者switch是不是太長了，想簡潔一點！
上一期講過了運算符，其中就包含了三目運算符。我們可以將以上代碼改造一下：
const?age?=?18;age?>?20???console.log("我今年20啦")?:?console.log("我永遠18！");以上是兩個條件，簡簡單單完成！
const?time?=?"早上";time?===?"早上"????console.log("早上吃麻辣燙")??:?time?===?"中午"????console.log("中午吃麻辣香鍋")??:?console.log("晚上吃冒菜");看起來也挺簡簡單單的，當然，三目運算符雖然也可以做條件語句使用，但是盡量保持兩個或者三個選項的時候使用，多了就別用了，因為看起來以及維護起來是真的很麻煩，多了建議還是直接用switch吧，看起來舒服很多，也更加利于維護！
思路很簡單，如果不考慮早飯，中午，下午茶，晚飯，宵夜這幾種使用場景的話，只需要列舉所有的食物放在一個數(shù)組中，然后使用隨機數(shù)獲取就可以了。代碼如下：
//?列舉幾個食物const?foodList?=?['麻辣燙',?'麻辣香鍋',?'冒菜',?'炒米粉',?'小籠包',?'豆?jié){',?'茶葉蛋',?'拌飯',?'火鍋',?'肉夾饃',?'麻辣米線'];//?設置一個均衡分布隨機數(shù)，隨機數(shù)最大數(shù)以及最小數(shù)一定是在上面這個數(shù)組中，然后我們要取整數(shù)const?random?=?Math.floor(Math.random()?*?(foodList.length?-?1));console.log(foodList[random]);
運行一下，發(fā)現(xiàn)其實還是很不錯，每次都有不一樣的驚喜！三行代碼的事情！
如果我們要考慮到各種時間吃的東西，就要對進行分類，在寫代碼的時候，就需要用到了條件語句，代碼如下：
/**?*?今天吃什么？?*?考慮時間版本?*///?早餐const?breakfastList?=?['包子',?'豆?jié){',?'油條',?'米粉',?'肉夾饃'];//?午餐const?lunchList?=?['火鍋',?'麻辣燙',?'麻辣香鍋',?'冒菜',?'炒米粉',?'蘭州炒飯',?'回鍋肉',?'宮保雞丁',?'小炒肉',?'麻婆豆腐'];//?下午茶const?afternoonTeaList?=?['水果撈',?'清補涼',?'冰粉',?'奶茶'];//?晚餐const?dinnerList?=?['火鍋',?'韓式烤肉',?'油潑面'];//?宵夜const?midnightSnack?=?['烤串',?'煎餅果子',?'小龍蝦'];//?設置一個均衡分布隨機數(shù)，隨機數(shù)最大數(shù)以及最小數(shù)一定是在上面這個數(shù)組中，然后我們要取整數(shù)let?random;//?設置時間const?time?=?'宵夜';//?打印時間console.log("現(xiàn)在是：",time);switch?(time)?{????case?'早餐':????????random?=?Math.floor(Math.random()?*?(breakfastList.length?-?1));????????console.log(breakfastList[random]);????????break;????case?'午餐':????????random?=?Math.floor(Math.random()?*?(lunchList.length?-?1));????????console.log(lunchList[random]);????????break;????case?'下午茶':????????random?=?Math.floor(Math.random()?*?(afternoonTeaList.length?-?1));????????console.log(afternoonTeaList[random]);????????break;????case?'晚餐':????????random?=?Math.floor(Math.random()?*?(dinnerList.length?-?1));????????console.log(dinnerList[random]);????????break;????default:????????random?=?Math.floor(Math.random()?*?(midnightSnack.length?-?1));????????console.log(midnightSnack[random]);????????break;}
運行一下代碼，我們就能看到以上的結果，發(fā)現(xiàn)是不是和那個小程序一樣？可以很好的解決選擇困難癥！但是你發(fā)現(xiàn)似乎有點重復代碼，能不能簡潔點呢？
/**?*?今天吃什么？?*?考慮時間版本，簡潔點?*///?食物const?foodList?=?{????//?早餐????breakfastList:?['包子',?'豆?jié){',?'油條',?'米粉',?'肉夾饃'],????//?午餐????lunchList:?['火鍋',?'麻辣燙',?'麻辣香鍋',?'冒菜',?'炒米粉',?'蘭州炒飯',?'回鍋肉',?'宮保雞丁',?'小炒肉',?'麻婆豆腐'],????//?下午茶????afternoonTeaList:?['水果撈',?'清補涼',?'冰粉',?'奶茶'],????//?晚餐????dinnerList:?['火鍋',?'韓式烤肉',?'油潑面'],????//?宵夜????midnightSnack:?['烤串',?'煎餅果子',?'小龍蝦'],};//?設置一個均衡分布隨機數(shù)，隨機數(shù)最大數(shù)以及最小數(shù)一定是在上面這個數(shù)組中，然后我們要取整數(shù)let?random;//?設置時間const?time?=?'下午茶';//?打印時間console.log('現(xiàn)在是：',?time);//?定義一個函數(shù)const?outputFood?=?list?=>?{????random?=?Math.floor(Math.random()?*?(list.length?-?1));????console.log(list[random]);};switch?(time)?{????case?'早餐':????????outputFood(foodList.breakfastList);????????break;????case?'午餐':????????outputFood(foodList.lunchList);????????break;????case?'下午茶':????????outputFood(foodList.afternoonTeaList);????????break;????case?'晚餐':????????outputFood(foodList.dinnerList);????????break;????default:????????outputFood(foodList.midnightSnack);????????break;}
再運行一下，輸出的結果如上，你可能說其實沒有怎么簡潔，但是我們使用了一個對象，維護了所有的食物，并且使用函數(shù)，將重復的代碼定義在一起了，方便復用，這種思想在正式的項目中是非常重要的！
以上代碼都在一個文件中，名稱就是條件語句.js，你可以在我的個人博客中找到下載方式，如果沒有看到，那可能就是我太懶了，沒放上去，你可以去公眾號回復JavaScript系列代碼獲取下載連接即可。系列教程持續(xù)更新，歡迎關注，時不時再寫幾個案例分享！
