持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第4天，點選檢視活動詳情

寫在前面

不知道大家有沒有維護過程式碼，維護程式碼簡單嗎？ 那麼今天就和大家分享，如何寫出優雅的容易維護的程式碼 本文將以一個程式碼例項來解析！

需求如下:寫出一個option

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

分析一下這樣寫的缺點

• 難以維護
  • 以後新增了，在後面加，有沒有想過，程式碼量很大也許新人找不到
  • 或者說label和value中出現亂序之後，導致整個可能需要大改
  • 資料太大，頁面篇幅大，導致程式碼可讀性差
• 程式碼中存在魔數(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 }, ]
• 很明顯地，下面地這種列舉寫法可讀性有了很大的提升,我們很容易能看出使用了列舉，並且沒有魔數，我們很容易知道label和value指的是1，2，3，4,當然實際問題一般不是1，2，3，4.會更加明顯。

分析一下這樣寫的缺點

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

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

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

是的，一行就搞定了！

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

```ts const OPTIONS_LABLE:Record = {

} ```