JavaScript开发小技巧-使用策略对象，减少if判断语句

在开发过程中，与后端进行接口联调是必不可少的环节。后端把数据存储在数据库，基于尽量减少内存占用的原则，对于一些状态值，后端会选择使用数值而非字符串进行存储。比如，对于一个游戏系统，玩家的在线和离线就是一种状态值，数据库在存储这个状态的时候，通常会用0和1来代替文字，0代表离线，1代表在线。

当前端要展示用户的在线状态时，就会从后台接口中获取到一个字段，比如status，来表示这个玩家是离线还是在线，如果后台不帮我们转化，就需要我们自己转换成文字。面对这种需求，常用的转换方式可能如下：

function transferOnlineStatus(status) {
  if (status === 0) {
    return '离线'
  } else if (status === 1) {
    return '在线'
  } else {
    return '未知'
  }
}

乍一看似乎没问题，但是优雅与否值得商榷。不妨来看如下代码：

function tranferOnlineStatus(status) {
  const map = {
    0: '离线',
    1: '在线',
  }

  return map[status] ?? '未知'
}

值得一提的是??是ES6新增的操作符，效果与||相近但稍有不同，不了解但有兴趣的可自行搜索。

如上代码利用了对象这种数据结构做了一个策略，只需要将status可能的取值情况作为[key]列举在对象中，然后status对应的值作为[value]，最后使用中括号语法对对象进行取值即可得到我们期待的结果，减少了判断语句（哪怕是switch也会显得臃肿），使代码看上去更优雅。当然，还可以使用||或??操作符给出默认值。

如果你觉得两个if...else的判断没必要让你搞得这么花里胡哨，那请自行脑补状态值有五个或者更多的情况，比如1返回星期一，2返回星期二，3返回星期三......

function tranferWeekday(day) {
  const map = {
    1: '星期一',
    2: '星期二',
    3: '星期三',
    4: '星期四',
    5: '星期五',
    6: '星期六',
    7: '星期日',
  }

  return map[day] ?? '不要开玩笑，没有这个日子哦~'
}

利用这种策略对象，让代码变得简洁、易读、优雅。你学会了吗！

最后值得一提的是，这属于一种编程思想，并不一定只用在转换后端给出的状态值中。其他有趣更有用的使用场景等你来发现。

视频版欢迎查看[www.bilibili.com/video/BV1rf… ^_^