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]。 ^_^