javascript每日必學(xué)之條件分支
大家好,我們今天接著前面的講,前面已經(jīng)大概了講了一下運(yùn)算符,今天的任務(wù)主要就是講解邏輯條件分支,循環(huán)。
我們先就來模擬一個(gè)邏輯塊,就用我們經(jīng)常接觸到的買車票來說吧,車票的價(jià)格對(duì)不同的人價(jià)格是有差別的,但是我們都是一樣的去執(zhí)行買票這個(gè)行為,我們就可以把買票寫成一個(gè)函數(shù)BuyTicket
//代碼
function BuyTicket(){
console.log("請(qǐng)付款200元");
}
大家看到了這個(gè)函數(shù)體,其實(shí)是有缺陷的,我們每個(gè)人去買票的時(shí)候,都是執(zhí)行這一個(gè)函數(shù),如果是軍人,或者是學(xué)生,這個(gè)函數(shù)就不適用了,他們 的折扣就沒有辦法使用了,我們只能多寫一個(gè)函數(shù)來解決這樣的問題,然后,我們的javascript語(yǔ)言已經(jīng)給我們提供了分支語(yǔ)句,我們就可以輕松的解決這樣的問題了,我們可以把函數(shù)給修改一下,我們來看一下接下來修改后的代碼
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("普通人");

這樣使用是不是比前面的寫法更科學(xué),后面我還會(huì)慢慢升級(jí),慢慢地大家就會(huì)明白程序的可愛之處。
通過上面的示例,我們不難看出,這樣一個(gè)函數(shù),就可以解決分支的問題,我們現(xiàn)在來講解一下if分支語(yǔ)法
if(條件){
//執(zhí)行語(yǔ)句
}
條件就是我們前面講到的,非空對(duì)象,非未定義對(duì)象,布爾值true,非0數(shù)字,所有字符串,我們函數(shù)體里面是用的 == 比較符來運(yùn)算后得到一個(gè)布爾值來進(jìn)行的判斷,這也是我們經(jīng)常用到的一種方式,我們同樣可以用其他值來作為條件,再上一張圖片,讓大家來理解一下

A處:條件全部成立,所以都打印出了“執(zhí)行了”幾個(gè)字;B處:條件都不是if條件的合格值,所以沒有執(zhí)行。注:這里我們都是使用的明值,有時(shí)候我們就會(huì)使用運(yùn)算后的返回值,就如前面的BuyTicket函數(shù)中所使用的 == 運(yùn)算,返回的如果是true,就執(zhí)行,如果返回的是false,肯定就不執(zhí)行,我們每次執(zhí)行BuyTicket時(shí),所傳入的值,就只能符合一個(gè)條件。
接下來,我們學(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ù)下面的條件比較,是一種效率比較高的方式,如果單純地去寫if塊,就會(huì)像上面的BuyTicket函數(shù)一樣,那是一個(gè)效率很低的寫法,三個(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元");
}
}
這種寫法就比較科學(xué)了,執(zhí)行的效果也跟前面一樣,這樣寫的好處就是執(zhí)行效率高了,條件逐一匹配,如果條件合格就執(zhí)行,而不會(huì)再去匹配其他的條件塊,這樣效率就比前面寫的函數(shù)代碼優(yōu)秀,然而,還有一種多分支的替換寫法,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í)行的過程,就是,用表達(dá)式與下面的常量表達(dá)式逐個(gè)匹配,如果匹配上了,就執(zhí)行里面的語(yǔ)句,記得,在每個(gè)case塊后面加上break關(guān)鍵字,不然,會(huì)依次執(zhí)行后面的case塊里面的語(yǔ)句,直到遇到break為止,所以這個(gè)特性我們也可以利用起來,在合適的情況下,我們也會(huì)不寫break關(guān)鍵字。好了,我們先就用switch結(jié)構(gòu)體來修改一下前面的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á)式都沒有匹配上情況,我們默認(rèn)執(zhí)行這一塊的代碼,因?yàn)檫@也是最后一個(gè)代碼塊,所以也可以省略break關(guān)鍵字

總結(jié)一下,今天,只說了條件分支之類的知識(shí),if , if--else , if--else if--else , switch就這幾個(gè)條件分支語(yǔ)句塊,每天我也只能抽出一定的時(shí)間來寫,篇幅有限,下一篇就是寫循環(huán)了,好了,大家先去消化了,下一篇我們繼續(xù)。
相關(guān)文章
如何設(shè)置iframe高度自適應(yīng)在跨域情況下的可用方法
iframe的高度需要根據(jù)子頁(yè)面的實(shí)際高度來進(jìn)行調(diào)整,但是如果子頁(yè)面不在同一域中怎么辦?這時(shí)候腳本沒有辦法獲取到子頁(yè)面的高度,存在JavaScript跨域的問題2013-09-09
DataGear開發(fā)基于three.js的3D數(shù)據(jù)可視化看板的詳細(xì)代碼
DataGear?支持采用原生的HTML、JavaScript、CSS制作數(shù)據(jù)可視化看板,也支持導(dǎo)入由npm、vite等前端工具構(gòu)建的前端程序包,這篇文章主要介紹了DataGear制作基于three.js的3D數(shù)據(jù)可視化看板,需要的朋友可以參考下2024-02-02
JavaScript第一個(gè)分水嶺之?dāng)?shù)組的基本操作
Arrays(數(shù)組) 數(shù)組是一個(gè)固定長(zhǎng)度的存儲(chǔ)相同數(shù)據(jù)類型的數(shù)據(jù)結(jié)構(gòu),數(shù)組中的元素被存儲(chǔ)在一段連續(xù)的內(nèi)存空間中,下面這篇文章主要給大家介紹了關(guān)于JavaScript第一個(gè)分水嶺之?dāng)?shù)組的基本操作,需要的朋友可以參考下2022-04-04
js實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
javascript針對(duì)cookie的基本操作實(shí)例詳解
這篇文章主要介紹了javascript針對(duì)cookie的基本操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript操作cookie的基本技巧,并給出了一個(gè)JavaScript操作cookie的完整類,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
JS 邏輯判斷不要只知道用 if-else 和 switch條件判斷(小技巧)
這篇文章主要介紹了JS 邏輯判斷不要只知道用 if-else 和 switch,在一些邏輯復(fù)雜度的增加,代碼中的 if/else 和 switch 會(huì)越來越臃腫。本文將帶你嘗試寫出更優(yōu)雅的判斷邏輯,需要的朋友可以參考下2020-05-05

