es6中使用map簡化複雜條件判斷操作例項詳解
阿新 • • 發佈:2020-02-20
本文例項講述了es6中使用map簡化複雜條件判斷操作。分享給大家供大家參考,具體如下:
複雜邏輯判斷時需要寫很多if/else,程式碼可讀性較差,可以用es6新增的Map來簡化程式碼
列舉六種例項,逐步簡化
/** * 按鈕點選事件 * @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 } }
將判斷條件作為物件的屬性名,將處理邏輯作為物件的屬性值,繼續簡化:
const actions = { '1': ['processing','IndexPage'],'2': ['fail','FailPage'],'3': ['fail','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簡化
const actions = new Map([ [1,['processing','IndexPage']],[2,['fail','FailPage']],[3,[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]) }
Map物件和Object物件的區別:Map的鍵可以是任意值,Map的鍵值對個數可通過size屬性直接獲
接下來將問題升級:
除去判斷狀態還要判斷使用者身份:
傳統寫法:
const actions = new Map([ ['guest_1',() => { /*do sth*/ }],['guest_2',['guest_3',['guest_4',['guest_5',['master_1',['master_2',['master_3',['master_4',['master_5',]) /** * 按鈕點選事件 * @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) }
用物件做鍵值簡化:
const actions = new Map([ [{ identity: 'guest',status: 1 },[{ identity: 'guest',status: 2 },//... ]) const onButtonClick = (identity,status) => { //下面程式碼使用了陣列解構 [key,value] = cuurrentValue let action = [...actions].filter(([key,value]) => (key.identity == identity && key.status == status)) action.forEach(([key,value]) => value.call(this)) }
正則作為key
const actions = () => { const functionA = () => { /*do sth*/ } const functionB = () => { /*do sth*/ } return new Map([ [/^guest_[1-4]$/,functionA],[/^guest_5$/,functionB],//... ]) } const onButtonClick = (identity,status) => { let action = [...actions()].filter(([key,value]) => (key.test(`${identity}_${status}`))) action.forEach(([key,value]) => value.call(this)) }
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。