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