JS之使用策略对象，减少if判断语句

在开发过程中，前端与后端进行接口联调是必不可少的环节。

后端是把数据存储在数据库里的，基于尽量减少内存占用的原则，对于一些状态值，他们通常会选择使用数值而非字符串进行存储。就比如操作、上传、在线等状态值，后端在数据库里储存这个状态值时，会用0和1来代替文字表示。

当前端拿到接口，想要把这些状态展示到页面上时，就得从拿到的接口里获取相应的字段，比如status,来进行转化，判断用户到底是哪种状态。

面对这种情况，我们常用的转化方法可能就是这样：

if(status == 0) {
    return '是/在线/同意'
} else if(status == 1) {
    return '否/离线/拒绝'
} else {
    return '-'
}

这种方法是没有问题的，但是在状态值比较多的情况下，我们就得继续往下写判断条件，或者用switch语句,两者不管是哪种，都会显得不太优雅，不妨来看看以下代码：

showStatus(status) {
    const value = {
        0: '是/在线/同意',
        1: '否/离线/拒绝',
        ...
    }
    return value[status] ?? '-'
}

这里我们用到了ES6新增的操作符 ??,它的效果与 || 相近却稍有不同，有兴趣可以搜索一下。

上面的代码利用对象这种数据结构做了一个策略，只需要将status可能的取值情况作为[key]列举在对象中，然后status对应的值作为[value]，最后使用中括号语法对对象进行取值即可得到我们期待的结果，减少了if判断或者switch判断语句，让代码看上去更简洁、易读。

本文借鉴转载于稀土掘金，作者：zhishuizhishui