持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

写在前面

不知道大家有没有维护过代码，维护代码简单吗？ 那么今天就和大家分享，如何写出优雅的容易维护的代码 本文将以一个代码实例来解析！

需求如下:写出一个option

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的枚举啦！

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了

enum OPTIONS_VALUE {
  ONE = 0,
  TWO = 1,
  THREE = 2,
  FOUR = 3
}
const OPTIONS_LABLE = {
  [OPTIONS_VALUE.ONE]: 'one',
  [OPTIONS_VALUE.TWO]: 'two',
  [OPTIONS_VALUE.THREE]: 'three',
  [OPTIONS_VALUE.FOUR]: 'four'
}

• 那么我们怎么来完成循环呢？
  • entries可以帮我们拿到结构体中每一项的属性和值,而这就是我们要的，所以下面就可以直接对得到的这个数组直接map了

let options = Object.entries(OPTIONS_LABLE).map(([value,label])=>({label,value}))

• 记得注意地是
  • map的参数里面使用了解构
  • 返回的时候用了()省略了return
  • 然后lable:lable简写为lable 可以说是很优雅了

是的，一行就搞定了！

补充:我们还可以使用Record来检测是否使用enum值

const OPTIONS_LABLE:Record<OPTIONS_VALUE,string> = {
  [OPTIONS_VALUE.ONE]: 'one',
  [OPTIONS_VALUE.TWO]: 'two',
  [OPTIONS_VALUE.THREE]: 'three',
  [OPTIONS_VALUE.FOUR]: 'four'
}