枚舉+entries+map=option優雅寫法

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第4天,點擊查看活動詳情

寫在前面

不知道大家有沒有維護過代碼,維護代碼簡單嗎? 那麼今天就和大家分享,如何寫出優雅的容易維護的代碼 本文將以一個代碼實例來解析!

需求如下:寫出一個option

js let options = [ { label: 'one', value: 0 }, { label: 'two', value: 1 }, { label: 'three', value: 2 }, { label: 'four', value: 3 }, ] 我們可以看出,這個options是一個結構體數組,他的每個itemlabelvalue兩個屬性。

分析一下這樣寫的缺點

  • 難以維護
    • 以後新增了,在後面加,有沒有想過,代碼量很大也許新人找不到
    • 或者説labelvalue中出現亂序之後,導致整個可能需要大改
    • 數據太大,頁面篇幅大,導致代碼可讀性差
  • 代碼中存在魔數(magic number),比如0的意義不明顯
    • 我們可以用枚舉來改進 ## 改進版1:枚舉之消除魔數
  • 我們就會使用到TS的枚舉啦! ts enum OPTIONS_VALUE { ONE = 0, TWO = 1, THREE = 2, FOUR = 3 } enum OPTIONS_LABLE { ONE = 'one', TWO = 'two', THREE = 'three', FOUR = 'four' } // 上面枚舉可以另起一個constants文件保存,所以下面的是真正的代碼 let options = [ { label: OPTIONS_LABLE.ONE, value: OPTIONS_VALUE.ONE }, { label: OPTIONS_LABLE.TWO, value: OPTIONS_VALUE.TWO }, { label: OPTIONS_LABLE.THREE, value: OPTIONS_VALUE.THREE }, { label: OPTIONS_LABLE.FOUR, value: OPTIONS_VALUE.FOUR }, ]
  • 很明顯地,下面地這種枚舉寫法可讀性有了很大的提升,我們很容易能看出使用了枚舉,並且沒有魔數,我們很容易知道labelvalue指的是1,2,3,4,當然實際問題一般不是1,2,3,4.會更加明顯。

分析一下這樣寫的缺點

  • 這樣寫仍然是有缺點的,比如累...
    • 對,或者説,這樣不優雅!
    • 所以,像標題一樣,我們用entries+map的融入使用讓這個過程變成一行代碼
    • 這裏會使用到jsx的寫法,在React中就會加{},表示我要用js語法了0.0

改進版2:優雅寫法,後續維護不費力

  • 我們把LABEL改寫成結構體,屬性用枚舉,這樣就把結構體和枚舉結合起來了
  • 結構體可以轉換成二維數組就可以mapts enum OPTIONS_VALUE { ONE = 0, TWO = 1, THREE = 2, FOUR = 3 } const OPTIONS_LABLE = { }
  • 那麼我們怎麼來完成循環呢?
    • entries可以幫我們拿到結構體中每一項的屬性,而這就是我們要的,所以下面就可以直接對得到的這個數組直接mapts let options = Object.entries(OPTIONS_LABLE).map(([value,label])=>({label,value}))
  • 記得注意地是
    • map的參數裏面使用了解構
    • 返回的時候用了()省略了return
    • 然後lable:lable簡寫為lable 可以説是很優雅了

是的,一行就搞定了!

補充:我們還可以使用Record來檢測是否使用enum值

```ts const OPTIONS_LABLE:Record = {

} ```