javascript每日必學(xué)之條件分支
大家好,我們今天接著前面的講,前面已經(jīng)大概了講了一下運(yùn)算符,今天的任務(wù)主要就是講解邏輯條件分支,循環(huán)。
我們先就來(lái)模擬一個(gè)邏輯塊,就用我們經(jīng)常接觸到的買車票來(lái)說(shuō)吧,車票的價(jià)格對(duì)不同的人價(jià)格是有差別的,但是我們都是一樣的去執(zhí)行買票這個(gè)行為,我們就可以把買票寫(xiě)成一個(gè)函數(shù)BuyTicket
//代碼 function BuyTicket(){ console.log("請(qǐng)付款200元"); }
大家看到了這個(gè)函數(shù)體,其實(shí)是有缺陷的,我們每個(gè)人去買票的時(shí)候,都是執(zhí)行這一個(gè)函數(shù),如果是軍人,或者是學(xué)生,這個(gè)函數(shù)就不適用了,他們 的折扣就沒(méi)有辦法使用了,我們只能多寫(xiě)一個(gè)函數(shù)來(lái)解決這樣的問(wèn)題,然后,我們的javascript語(yǔ)言已經(jīng)給我們提供了分支語(yǔ)句,我們就可以輕松的解決這樣的問(wèn)題了,我們可以把函數(shù)給修改一下,我們來(lái)看一下接下來(lái)修改后的代碼
function BuyTicket(identity){ if(identity == "學(xué)生"){ console.log("請(qǐng)付款100元"); } if(identity == "軍人"){ console.log("請(qǐng)付款150元"); } if(identity == "普通人"){ console.log("請(qǐng)付款200元"); } } //模擬3種人去買票 BuyTicket("學(xué)生"); BuyTicket("軍人"); BuyTicket("普通人");
這樣使用是不是比前面的寫(xiě)法更科學(xué),后面我還會(huì)慢慢升級(jí),慢慢地大家就會(huì)明白程序的可愛(ài)之處。
通過(guò)上面的示例,我們不難看出,這樣一個(gè)函數(shù),就可以解決分支的問(wèn)題,我們現(xiàn)在來(lái)講解一下if分支語(yǔ)法
if(條件){ //執(zhí)行語(yǔ)句 }
條件就是我們前面講到的,非空對(duì)象,非未定義對(duì)象,布爾值true,非0數(shù)字,所有字符串,我們函數(shù)體里面是用的 == 比較符來(lái)運(yùn)算后得到一個(gè)布爾值來(lái)進(jìn)行的判斷,這也是我們經(jīng)常用到的一種方式,我們同樣可以用其他值來(lái)作為條件,再上一張圖片,讓大家來(lái)理解一下
A處:條件全部成立,所以都打印出了“執(zhí)行了”幾個(gè)字;B處:條件都不是if條件的合格值,所以沒(méi)有執(zhí)行。注:這里我們都是使用的明值,有時(shí)候我們就會(huì)使用運(yùn)算后的返回值,就如前面的BuyTicket函數(shù)中所使用的 == 運(yùn)算,返回的如果是true,就執(zhí)行,如果返回的是false,肯定就不執(zhí)行,我們每次執(zhí)行BuyTicket時(shí),所傳入的值,就只能符合一個(gè)條件。
接下來(lái),我們學(xué)習(xí)一下完整的if分支
//第一種,兩個(gè)分支 if(條件){ //執(zhí)行 }else{ //執(zhí)行 }
直接上圖,一下就明白了
A處:執(zhí)行了前面的代碼;B處條件不合格,所以就執(zhí)行了else塊里面的語(yǔ)句。很簡(jiǎn)單,不多作解釋。
兩個(gè)分支的情況,就是始終會(huì)執(zhí)行二者之一,不會(huì)兩個(gè)同時(shí)執(zhí)行
//第二種,多個(gè)分支 if(條件){ //執(zhí)行 }else if(條件){ //執(zhí)行 }else if(條件){ //執(zhí)行 }…else if(條件){ //執(zhí)行 }else{ //執(zhí)行 }
多個(gè)分支的情況,始終只執(zhí)行其中之一,如果執(zhí)行其中的某一個(gè)分支后,就不會(huì)再繼續(xù)下面的條件比較,是一種效率比較高的方式,如果單純地去寫(xiě)if塊,就會(huì)像上面的BuyTicket函數(shù)一樣,那是一個(gè)效率很低的寫(xiě)法,三個(gè)if塊都會(huì)去比較所以,我們可以改造一下BuyTicket函數(shù)
//代碼 funciton BuyTicket(identity){ if("學(xué)生"){ console.log("請(qǐng)付款100元"); }else if("軍人"){ console.log("請(qǐng)付款150元"); }else{ console.log("請(qǐng)付款200元"); } }
這種寫(xiě)法就比較科學(xué)了,執(zhí)行的效果也跟前面一樣,這樣寫(xiě)的好處就是執(zhí)行效率高了,條件逐一匹配,如果條件合格就執(zhí)行,而不會(huì)再去匹配其他的條件塊,這樣效率就比前面寫(xiě)的函數(shù)代碼優(yōu)秀,然而,還有一種多分支的替換寫(xiě)法,switch結(jié)構(gòu)體,先看語(yǔ)法
switch(表達(dá)式){ case 常量表達(dá)式1: //執(zhí)行 break; case 常量表達(dá)式1: //執(zhí)行 break; case 常量表達(dá)式1: //執(zhí)行 break; default: //執(zhí)行 break; }
從上往下執(zhí)行的過(guò)程,就是,用表達(dá)式與下面的常量表達(dá)式逐個(gè)匹配,如果匹配上了,就執(zhí)行里面的語(yǔ)句,記得,在每個(gè)case塊后面加上break關(guān)鍵字,不然,會(huì)依次執(zhí)行后面的case塊里面的語(yǔ)句,直到遇到break為止,所以這個(gè)特性我們也可以利用起來(lái),在合適的情況下,我們也會(huì)不寫(xiě)break關(guān)鍵字。好了,我們先就用switch結(jié)構(gòu)體來(lái)修改一下前面的BuyTicket函數(shù)
function BuyTicket(identity){ switch(identity){ case "學(xué)生": console.log("請(qǐng)付款100元"); break; case "軍人": console.log("請(qǐng)付款150元"); break; case "普通人": console.log("請(qǐng)付款200元"); break; default: console.log("請(qǐng)出示身份證"); } }
default塊就是當(dāng)一個(gè)表達(dá)式都沒(méi)有匹配上情況,我們默認(rèn)執(zhí)行這一塊的代碼,因?yàn)檫@也是最后一個(gè)代碼塊,所以也可以省略break關(guān)鍵字
總結(jié)一下,今天,只說(shuō)了條件分支之類的知識(shí),if , if--else , if--else if--else , switch就這幾個(gè)條件分支語(yǔ)句塊,每天我也只能抽出一定的時(shí)間來(lái)寫(xiě),篇幅有限,下一篇就是寫(xiě)循環(huán)了,好了,大家先去消化了,下一篇我們繼續(xù)。
相關(guān)文章
JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個(gè)方法技巧,需要的朋友可以參考下2015-07-07js中flexible.js實(shí)現(xiàn)淘寶彈性布局方案
這篇文章主要為大家詳細(xì)介紹了js中flexible.js實(shí)現(xiàn)淘寶彈性布局方案,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12JavaScript三大重點(diǎn)同步異步與作用域和閉包及原型和原型鏈詳解
這篇文章主要介紹了JavaScript同步異步與作用域和閉包及原型和原型鏈,每個(gè)對(duì)象都連接到一個(gè)原型對(duì)象,并且它可以從中繼承屬性。所有通過(guò)對(duì)象字面量創(chuàng)建的對(duì)象都連接到object.prototype,它是JavaScript中的標(biāo)配對(duì)象<BR>2022-07-07表單input項(xiàng)使用label同時(shí)引用Bootstrap庫(kù)導(dǎo)致input點(diǎn)擊效果區(qū)增大問(wèn)題
這篇文章主要介紹了表單input項(xiàng)使用label,同時(shí)引用Bootstrap庫(kù),導(dǎo)致input點(diǎn)擊效果區(qū)增大問(wèn)題的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10基于Bootstrap的標(biāo)簽頁(yè)組件及bootstrap-tab使用說(shuō)明
這篇文章主要介紹了基于Bootstrap的標(biāo)簽頁(yè)組件及bootstrap-tab使用說(shuō)明,需要的朋友可以參考下2017-07-07JavaScript通過(guò)Date-Mask將日期轉(zhuǎn)換成字符串的方法
這篇文章主要介紹了JavaScript通過(guò)Date-Mask將日期轉(zhuǎn)換成字符串的方法,涉及javascript日期、數(shù)組及字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06JavaScript Set與Map數(shù)據(jù)結(jié)構(gòu)詳細(xì)分析
大家心里是否產(chǎn)生過(guò)這樣的疑問(wèn),JS中既然已經(jīng)有對(duì)象這種數(shù)據(jù)結(jié)構(gòu),我們?yōu)槭裁催€要再單獨(dú)去使用Set或者M(jìn)ap呢?下面這篇文章主要給大家介紹了關(guān)于ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2022-11-11