復雜判斷 · 前端筆記

[TOC] # if/else ~~~ /** * 按鈕點擊事件 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 商品售罄 4 開團成功 5 系統取消 */ const onButtonClick = (status)=>{ if(status == 1){ sendLog('processing') jumpTo('IndexPage') }else if(status == 2){ sendLog('fail') jumpTo('FailPage') }else if(status == 3){ sendLog('fail') jumpTo('FailPage') }else if(status == 4){ sendLog('success') jumpTo('SuccessPage') }else if(status == 5){ sendLog('cancel') jumpTo('CancelPage') }else { sendLog('other') jumpTo('Index') } } ~~~ # switch ~~~ /** * 按鈕點擊事件 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 商品售罄 4 開團成功 5 系統取消 */ const onButtonClick = (status)=>{ switch (status){ case 1: sendLog('processing') jumpTo('IndexPage') break case 2: case 3: sendLog('fail') jumpTo('FailPage') break case 4: sendLog('success') jumpTo('SuccessPage') break case 5: sendLog('cancel') jumpTo('CancelPage') break default: sendLog('other') jumpTo('Index') break } } ~~~ # 一元判斷時：存到Object里 ~~~ const actions = { '1': ['processing','IndexPage'], '2': ['fail','FailPage'], '3': ['fail','FailPage'], '4': ['success','SuccessPage'], '5': ['cancel','CancelPage'], 'default': ['other','Index'], } /** * 按鈕點擊事件 * @param {number} status 活動狀態：1開團進行中 2開團失敗 3 商品售罄 4 開團成功 5 系統取消 */ const onButtonClick = (status)=>{ let action = actions[status] || actions['default'], logName = action[0], pageName = action[1] sendLog(logName) jumpTo(pageName) } ~~~ # 一元判斷時：存到Map里一個對象通常都有自己的原型，所以一個對象總有一個"prototype"鍵。一個對象的鍵只能是字符串或者Symbols，但一個Map的鍵可以是任意值。你可以通過size屬性很容易地得到一個Map的鍵值對個數，而對象的鍵值對個數只能手動確認。 ~~~ const actions = new Map([ [1, ['processing','IndexPage']], [2, ['fail','FailPage']], [3, ['fail','FailPage']], [4, ['success','SuccessPage']], [5, ['cancel','CancelPage']], ['default', ['other','Index']] ]) /** * 按鈕點擊事件 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 商品售罄 4 開團成功 5 系統取消 */ const onButtonClick = (status)=>{ let action = actions.get(status) || actions.get('default') sendLog(action[0]) jumpTo(action[1]) } ~~~ # 多元判斷時：If else ~~~ /** * 按鈕點擊事件 * @param {number} status 活動狀態：1開團進行中 2開團失敗 3 開團成功 4 商品售罄 5 有庫存未開團 * @param {string} identity 身份標識：guest客態 master主態 */ const onButtonClick = (status,identity)=>{ if(identity == 'guest'){ if(status == 1){ //do sth }else if(status == 2){ //do sth }else if(status == 3){ //do sth }else if(status == 4){ //do sth }else if(status == 5){ //do sth }else { //do sth } }else if(identity == 'master') { if(status == 1){ //do sth }else if(status == 2){ //do sth }else if(status == 3){ //do sth }else if(status == 4){ //do sth }else if(status == 5){ //do sth }else { //do sth } } } ~~~ # 多元判斷時：將condition拼接成字符串存到Object里 ~~~ const actions = { 'guest_1':()=>{/*do sth*/}, 'guest_2':()=>{/*do sth*/}, //.... } const onButtonClick = (identity,status)=>{ let action = actions[`${identity}_${status}`] || actions['default'] action.call(this) } ~~~ # 多元判斷時：將condition拼接成字符串存到Map里上述代碼核心邏輯是：把兩個條件拼接成字符串，并通過以條件拼接字符串作為鍵，以處理函數作為值的Map對象進行查找并執行，這種寫法在多元條件判斷時候尤其好用。 ~~~ const actions = new Map([ ['guest_1', ()=>{/*do sth*/}], ['guest_2', ()=>{/*do sth*/}], ['guest_3', ()=>{/*do sth*/}], ['guest_4', ()=>{/*do sth*/}], ['guest_5', ()=>{/*do sth*/}], ['master_1', ()=>{/*do sth*/}], ['master_2', ()=>{/*do sth*/}], ['master_3', ()=>{/*do sth*/}], ['master_4', ()=>{/*do sth*/}], ['master_5', ()=>{/*do sth*/}], ['default', ()=>{/*do sth*/}], ]) /** * 按鈕點擊事件 * @param {string} identity 身份標識：guest客態 master主態 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 開團成功 4 商品售罄 5 有庫存未開團 */ const onButtonClick = (identity,status)=>{ let action = actions.get(`${identity}_${status}`) || actions.get('default') action.call(this) } ~~~ # 多元判斷時：將condition存為Object存到Map里 ~~~ const actions = new Map([ [{identity:'guest',status:1},()=>{/*do sth*/}], [{identity:'guest',status:2},()=>{/*do sth*/}], //... ]) const onButtonClick = (identity,status)=>{ let action = [...actions].filter(([key,value])=>(key.identity == identity && key.status == status)) action.forEach(([key,value])=>value.call(this)) } ~~~ 假如guest情況下，status1-4的處理邏輯都一樣怎么辦 ~~~ const actions = ()=>{ const functionA = ()=>{/*do sth*/} const functionB = ()=>{/*do sth*/} return new Map([ [{identity:'guest',status:1},functionA], [{identity:'guest',status:2},functionA], [{identity:'guest',status:3},functionA], [{identity:'guest',status:4},functionA], [{identity:'guest',status:5},functionB], //... ]) } const onButtonClick = (identity,status)=>{ let action = [...actions()].filter(([key,value])=>(key.identity == identity && key.status == status)) action.forEach(([key,value])=>value.call(this)) } ~~~ # 多元判斷時：將condition寫作正則存到Map里 ~~~ const actions = ()=>{ const functionA = ()=>{/*do sth*/} const functionB = ()=>{/*do sth*/} const functionC = ()=>{/*send log*/} return new Map([ [/^guest_[1-4]$/,functionA], [/^guest_5$/,functionB], [/^guest_.*$/,functionC], //... ]) } const onButtonClick = (identity,status)=>{ let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`))) action.forEach(([key,value])=>value.call(this)) } ~~~ # 參考資料 [JavaScript 復雜判斷的更優雅寫法](https://juejin.im/post/5bdfef86e51d453bf8051bf8)