es6中使用map簡(jiǎn)化復(fù)雜條件判斷操作實(shí)例詳解
本文實(shí)例講述了es6中使用map簡(jiǎn)化復(fù)雜條件判斷操作。分享給大家供大家參考,具體如下:
復(fù)雜邏輯判斷時(shí)需要寫很多if/else,代碼可讀性較差,可以用es6新增的Map來(lái)簡(jiǎn)化代碼
列舉六種實(shí)例,逐步簡(jiǎn)化
/** * 按鈕點(diǎn)擊事件 * @param {number} status 活動(dòng)狀態(tài):1 開團(tuán)進(jìn)行中 2 開團(tuán)失敗 3 商品售罄 4 開團(tuán)成功 5 系統(tǒng)取消 */ 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') } }
轉(zhuǎn)化成switch簡(jiǎn)化:
/** * 按鈕點(diǎn)擊事件 * @param {number} status 活動(dòng)狀態(tài):1 開團(tuán)進(jìn)行中 2 開團(tuán)失敗 3 商品售罄 4 開團(tuán)成功 5 系統(tǒng)取消 */ 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 } }
將判斷條件作為對(duì)象的屬性名,將處理邏輯作為對(duì)象的屬性值,繼續(xù)簡(jiǎn)化:
const actions = { '1': ['processing', 'IndexPage'], '2': ['fail', 'FailPage'], '3': ['fail', 'FailPage'], '4': ['success', 'SuccessPage'], '5': ['cancel', 'CancelPage'], 'default': ['other', 'Index'], } /** * 按鈕點(diǎn)擊事件 * @param {number} status 活動(dòng)狀態(tài):1開團(tuán)進(jìn)行中 2開團(tuán)失敗 3 商品售罄 4 開團(tuán)成功 5 系統(tǒng)取消 */ const onButtonClick = (status) => { let action = actions[status] || actions['default'], logName = action[0], pageName = action[1] sendLog(logName) jumpTo(pageName) }
轉(zhuǎn)化成Map簡(jiǎn)化
const actions = new Map([ [1, ['processing', 'IndexPage']], [2, ['fail', 'FailPage']], [3, ['fail', 'FailPage']], [4, ['success', 'SuccessPage']], [5, ['cancel', 'CancelPage']], ['default', ['other', 'Index']] ]) /** * 按鈕點(diǎn)擊事件 * @param {number} status 活動(dòng)狀態(tài):1 開團(tuán)進(jìn)行中 2 開團(tuán)失敗 3 商品售罄 4 開團(tuán)成功 5 系統(tǒng)取消 */ const onButtonClick = (status) => { let action = actions.get(status) || actions.get('default') sendLog(action[0]) jumpTo(action[1]) }
Map對(duì)象和Object對(duì)象的區(qū)別:Map的鍵可以是任意值,Map的鍵值對(duì)個(gè)數(shù)可通過(guò)size屬性直接獲
接下來(lái)將問(wèn)題升級(jí):
除去判斷狀態(tài)還要判斷用戶身份:
傳統(tǒng)寫法:
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*/ }], ]) /** * 按鈕點(diǎn)擊事件 * @param {string} identity 身份標(biāo)識(shí):guest客態(tài) master主態(tài) * @param {number} status 活動(dòng)狀態(tài):1 開團(tuán)進(jìn)行中 2 開團(tuán)失敗 3 開團(tuán)成功 4 商品售罄 5 有庫(kù)存未開團(tuán) */ const onButtonClick = (identity, status) => { let action = actions.get(`${identity}_${status}`) || actions.get('default') action.call(this) }
用對(duì)象做鍵值簡(jiǎn)化:
const actions = new Map([ [{ identity: 'guest', status: 1 }, () => { /*do sth*/ }], [{ identity: 'guest', status: 2 }, () => { /*do sth*/ }], //... ]) const onButtonClick = (identity, status) => { //下面代碼使用了數(shù)組解構(gòu) [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代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
- ES6學(xué)習(xí)教程之Map的常用方法總結(jié)
- ES6學(xué)習(xí)筆記之Set和Map數(shù)據(jù)結(jié)構(gòu)詳解
- ES6教程之for循環(huán)和Map,Set用法分析
- 淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)
- ES6學(xué)習(xí)筆記之map、set與數(shù)組、對(duì)象的對(duì)比
- 一文搞懂ES6中的Map和Set
- ES6新特性五:Set與Map的數(shù)據(jù)結(jié)構(gòu)實(shí)例分析
- ES6 Map結(jié)構(gòu)的應(yīng)用實(shí)例分析
相關(guān)文章
JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對(duì)象去重功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對(duì)象去重功能,結(jié)合實(shí)例形式分析了ES5與ES6兩種版本針對(duì)數(shù)組去重的相關(guān)操作技巧,需要的朋友可以參考下2019-02-02基于JavaScript實(shí)現(xiàn)生成名片、鏈接等二維碼
本文使用javascript技術(shù)實(shí)現(xiàn)生成名片、鏈接等二維碼的代碼,代碼簡(jiǎn)單易懂并附有注釋,需要的朋友可以參考下本文2015-09-09chorme 瀏覽器記住密碼后input黃色背景處理方法(兩種)
使用chrome瀏覽器選擇記住密碼的賬號(hào),輸入框會(huì)自動(dòng)加上黃色的背景,有些設(shè)計(jì)輸入框是透明背景的,需要去除掉這個(gè)黃色的背景。下面給大家分享chorme 瀏覽器記住密碼后input黃色背景處理方法,一起看看吧2017-11-11javascript 節(jié)點(diǎn)排序?qū)崿F(xiàn)代碼
為了讓自定義選擇選擇出的節(jié)點(diǎn)集合盡可能接近原生API選出的結(jié)果,我們往往要對(duì)結(jié)果集進(jìn)行排序,此順序當(dāng)然是從上到下,從左到右的DOM樹順序。2011-01-01JavaScript Canvas繪制圓形時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas繪制圓形時(shí)鐘效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04