這篇文章給大家分享的是有關(guān)if else與switch的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
我們是于2013年成立的成都網(wǎng)站建設(shè)公司,提供網(wǎng)站建設(shè),電商網(wǎng)站設(shè)計(jì)開發(fā),外貿(mào)營銷網(wǎng)站建設(shè),響應(yīng)式網(wǎng)頁設(shè)計(jì),重慶小程序開發(fā)公司、等服務(wù)。為客戶創(chuàng)造有價值的品牌營銷體驗(yàn),讓互聯(lián)網(wǎng)提升企業(yè)的競爭力!
最基本if-else
假設(shè)有這么個場景,不同情況下打印不同值。
因?yàn)樯婕暗降臈l件太多,就不提三目運(yùn)算之類優(yōu)化了。
if (a == 1) { console.log('a1') } else if (a == 2) { console.log('b2') } else if (a == 3) { console.log('c3') } else if (a == 4) { console.log('d4') } /* n..... */
現(xiàn)在還算能看,因?yàn)檫壿嫼唵?,如果邏輯?fù)雜,迭代多個版本之后,你還敢動嗎。
每動一下就戰(zhàn)戰(zhàn)兢兢,誰知道哪里會遺漏。
那么換種方式呢
switch-case
這樣稍微清晰那么一點(diǎn),差別好像沒什么差別:
switch(a){ case 1: console.log('a1'); break; /* 省略。。。 */ case 40: console.log('a40'); break; }
分離配置信息與執(zhí)行動作
object映射
定義一個object作為配置對象來存放不同狀態(tài),通過鏈表查找
const statusMap = { 1:()=>{ console.log('a1') }, 2:()=>{ console.log('b2') } /* n.... */ } // 執(zhí)行 let a = 1 statusMap[a || 1]()
這樣比較清晰,將條件配置與具體執(zhí)行分離。如果要增加其他狀態(tài),只修改配置對象即可。
數(shù)組映射
當(dāng)然在某些狀態(tài)下可以使用數(shù)組,來做這個配置對象。
// 這里就涉及其他優(yōu)化了,例如將執(zhí)行函數(shù)抽離出來,大家不要關(guān)注func的內(nèi)容就好。 // 它就是個function,內(nèi)容很復(fù)雜 const statusArr = [function(){ console.log(1) }, function () { console.log(2) },] // 執(zhí)行 let a = 1 statusArr[a || 1]()
數(shù)組的要求更高一點(diǎn),如果是其他key,例如字符串,那么數(shù)組就不能滿足需求了
升級版:不同key相同value
這樣看起來好一點(diǎn)了,那么需求又有變動了,
前面是每種處理方式都不同,下面有幾種情況下處理函數(shù)相同的,
例如1-39的時候,調(diào)用a,40之后調(diào)用b,如果我們繼續(xù)來用映射的方式來處理。
function f1 (){ console.log(1) } function f2 (){ console.log(2) } const statusMap={ 1:f1, 2:f1, 3:f1, 4:f1, //省略 40:f2 } let a = 2 statusMap[a]()
這樣當(dāng)然也可以,不過重復(fù)寫那么多f1,代碼看起來不夠簡潔。
開始重構(gòu)之前我們先捋一下思路,無非是想把多個key合并起來,對應(yīng)一個value。
也就是說我們的鍵值不是字符串而是個數(shù)組,object顯然只支持字符串,
那么可以將這么多key合并成一個:'1,2,3,4,..,9'。
但是查找的時候有點(diǎn)問題了,我們的參數(shù)肯定不能完全匹配。
接著走下去,是不是做個遍歷加個判斷,包含在子集內(nèi)的都算匹配,那么代碼看起來就是下面這個樣子。
// 將鍵值key設(shè)置為一個拼接之后的字符串 const statusMap = { '1,2,3,4,5': f1, //省略 40: f2 } // 獲取所有的鍵值,待會遍歷用 const keys = Object.keys(statusMap), len = keys.length // 遍歷獲取對應(yīng)的值 const getVal=(param='')=>{ // 用for循環(huán)的原因在于匹配之后就不需要繼續(xù)遍歷 for (let i = 0; i < len; i++) { const key = keys[i], val = statusMap[key] // 這里用什么來判斷就隨便了,兩個字符串都有。 if (key.includes(param)) { return val } } } let a = 2, handle = getVal(a) handle() // 1
但是這樣來看,增加了個遍歷的過程,而且是拼接字符串,萬一哪天傳了個逗號進(jìn)來,會得到了預(yù)料之外的結(jié)果。
map
es6有個新的數(shù)據(jù)結(jié)構(gòu)Map,支持任意數(shù)據(jù)結(jié)構(gòu)作為鍵值。如果用Map可能更清晰一點(diǎn)。
/** * map鍵值索引的是引用地址, * 如果是下面這樣的寫法不好意思,永遠(yuǎn)得不到值 * map1.set([1,4,5],'引用地址') * map1.get([1,4,5]) //輸出為undefined * 就像直接訪問 * map1.get([1,2,3,4,5]) //同樣為undefined */ const map1 = new Map() const statusArr = [1,2,3,4,5] map1.set(statusArr,f1) // 預(yù)設(shè)默認(rèn)值,因?yàn)椴荒苤苯颖闅v let handle = function(){} const getVal = (param = '') => { for (let value of map1.entries()) { console.log(JSON.stringify(value)) if (value[0].includes(param)){ console.log(value) // 不能跳出 只能處理了 handle = value[1] } } } const a = 2 getVal(a) handle()
個人而言雖然這樣減少了重復(fù)代碼,但是又增加了一步匹配值的操作,優(yōu)劣就見仁見智吧。
二維數(shù)組
肯定有部分人就是不想做遍歷的操作,既然一個數(shù)組不能滿足,那么兩個數(shù)組呢。
// 鍵值數(shù)組和value 保持對應(yīng)關(guān)系 const keyArr = ['1,2,3,4,5','40'] const valArr = [f1,f2] const getVal = (param = '')=>{ // 查找參數(shù)對應(yīng)的下標(biāo) let index = keyArr.findIndex((it)=>{ return it.includes(param) }) // 獲取對應(yīng)值 return valArr[index] } let a = 2, handle = getVal(a) handle()
利用數(shù)組提供的下標(biāo),將key和value對應(yīng)起來,進(jìn)而獲取想要的值。
這里一直沒有達(dá)到我最初的目的,即鍵里面重復(fù)的數(shù)組,可以不通過多余操作匹配到,上面不管怎么樣都進(jìn)行了處理,這不是懶人的想要的。
感謝各位的閱讀!關(guān)于“if else與switch的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
標(biāo)題名稱:ifelse與switch的示例分析
網(wǎng)站路徑:http://bm7419.com/article32/pcshsc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、、虛擬主機(jī)、電子商務(wù)、外貿(mào)建站、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)