JavaScript開發小技巧-使用策略對象,減少if判斷語句

語言: CN / TW / HK

在開發過程中,與後端進行接口聯調是必不可少的環節。後端把數據存儲在數據庫,基於儘量減少內存佔用的原則,對於一些狀態值,後端會選擇使用數值而非字符串進行存儲。比如,對於一個遊戲系統,玩家的在線和離線就是一種狀態值,數據庫在存儲這個狀態的時候,通常會用0和1來代替文字,0代表離線,1代表在線。

當前端要展示用户的在線狀態時,就會從後台接口中獲取到一個字段,比如status,來表示這個玩家是離線還是在線,如果後台不幫我們轉化,就需要我們自己轉換成文字。面對這種需求,常用的轉換方式可能如下:

js function transferOnlineStatus(status) { if (status === 0) { return '離線' } else if (status === 1) { return '在線' } else { return '未知' } }

乍一看似乎沒問題,但是優雅與否值得商榷。不妨來看如下代碼:

```js function tranferOnlineStatus(status) { const map = { 0: '離線', 1: '在線', }

return map[status] ?? '未知' } ```

值得一提的是??是ES6新增的操作符,效果與||相近但稍有不同,不瞭解但有興趣的可自行搜索。

如上代碼利用了對象這種數據結構做了一個策略,只需要將status可能的取值情況作為[key]列舉在對象中,然後status對應的值作為[value],最後使用中括號語法對對象進行取值即可得到我們期待的結果,減少了判斷語句(哪怕是switch也會顯得臃腫),使代碼看上去更優雅。當然,還可以使用||??操作符給出默認值。

如果你覺得兩個if...else的判斷沒必要讓你搞得這麼花裏胡哨,那請自行腦補狀態值有五個或者更多的情況,比如1返回星期一,2返回星期二,3返回星期三......

```js function tranferWeekday(day) { const map = { 1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六', 7: '星期日', }

return map[day] ?? '不要開玩笑,沒有這個日子哦~' } ```

利用這種策略對象,讓代碼變得簡潔、易讀、優雅。你學會了嗎!

最後值得一提的是,這屬於一種編程思想,並不一定只用在轉換後端給出的狀態值中。其他有趣更有用的使用場景等你來發現。

視頻版歡迎查看[https://www.bilibili.com/video/BV1rf4y1K7Mk]。 ^_^