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

在開發過程中，與後端進行接口聯調是必不可少的環節。後端把數據存儲在數據庫，基於儘量減少內存佔用的原則，對於一些狀態值，後端會選擇使用數值而非字符串進行存儲。比如，對於一個遊戲系統，玩家的在線和離線就是一種狀態值，數據庫在存儲這個狀態的時候，通常會用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] ?? '不要開玩笑，沒有這個日子哦~' } ```

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

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

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