JavaScript通过枚举实现优化if...else的实现办法

1、问题场景

function getDeploy(state) {
    let result = '';
    if(state == 'NOTSTARTED') {
        result = '未开始'
    } else if(state == 'LOADING') {
        result = '进行中'
    } else if(state == 'NOTCOMPLETED') {
        result = '未完成'
    } else if(state == 'FINISHED') {
        result = '已完成'
    } else {
        result = ''
    }
    return result;
}
console.log(getDeploy('NOTSTARTED')) // 未开始

2、ES6枚举实现

可以看到上面通过一个函数用来获取一个发布状态，并把英文转成中文用于前端界面显示。
不过是采用了大量的if ... else if实现的，我们可以换一种方式来实现。

const EnumDeploy = Object.freeze({
    'NOTSTARTED'   : Symbol('未开始'),
    'LOADING'      : Symbol('进行中'),
    'NOTCOMPLETED' : Symbol('未完成'),
    'FINISHED'     : Symbol('已完成')
})
console.log(EnumDeploy.NOTSTARTED); // Symbol(未开始)

这里采用了ES6官方的示例实现了枚举。

3、项目中定义Enum类实现

class Enum {
    constructor(arr) {
        let typeArr = [];
        if (!Array.isArray(arr)) throw new Error('arr is not an Array!');
        arr.map(element => {
            if (!element.state || !element.name) return;
            // 保存state值组成的数组，方便A.getName(name)类型的调用
            typeArr.push(element.state);
            // 根据state生成不同属性值，以便A.B.name类型的调用
            this[element.state] = element;
        });
        // 保存源数组
        this.arr = arr;
        this.typeArr = typeArr;
    }
    // 根据state得到对象
    valueOf(state) {
        return this.arr[this.typeArr.indexOf(state)];
    }
    // 根据state获取name值
    getNameByState(state) {
        let prop = this.valueOf(state);
        if (!prop) throw new Error('No enum constant' + state);
        return prop.name;
    }
    // 返回源数组
    getValues() {
        return this.arr;
    }
}

const DeployStatusEnum = new Enum([
    { state: 'NOTSTARTED',  name: '未开始' },
    { state: 'LOADING',     name: '进行中' },
    { state: 'NOTFINISHED', name: '未完成' },
    { state: 'FINISHED',    name: '已完成' }
]);

console.log(DeployStatusEnum.LOADING.name);  // 进行中
console.log(DeployStatusEnum.getNameByState('FINISHED'));  //已完成
console.log(DeployStatusEnum.getValues());  // [{ state: '未开始', name: '未开始' }, { state: '进行中', name: '进行中' }, { state: '未完成', name: '未完成' }, { state: '已完成', name: '已完成' }, { state: '失败', name: '失败' }]

类实现参考文章 -> ES6实现枚举类