Enum is a javascript enumeration module. It works with Node.js and the browser.

构建Enum对象在JavaScript中使用，可用于枚举定义，前端组件单选、多选等的options选项的定义。

1. 安装

可查看版本变更记录ChangeLog

1.1 NodeJS

npm install js-enumerate

import * as Enum from 'js-enumerate';new Enum([  { key: 'RED', value: 'red', label: '红色' },  { key: 'GREEN', value: 'green', label: '绿色' },]);// 也可使用字典构造new Enum({  Red: 'red',  green: 'green',});

1.2 Bower

<script src="../releases/js-enumerate-latest.min.js"></script><script>    new Enum([{ key: 'RED', value: 'red', label: '红色' }]);</script>

ps: 可自行将 releases/js-enumerate-latest.min.js 文件上传到CDN、或者拷贝到项目里引用。

2 使用

2.1 constructor构造函数

new Enum(data, options)

参数说明：

options参数说明

2.2 register全局注册

// 在nodejs中定义 global.Enum// 在浏览器中定义 window.EnumEnum.register();// 可以通过key更改对象的名称Enum.register("JsEnum"); // window.JsEnum

2.3 用法示例

const Color = new Enum([  { key: 'RED', value: 'red', label: '红色' },  { key: 'GREEN', value: 'green', label: '绿色' },]);// 使用成员值Color.RED // 'red'Color.GREEN // 'green'// 成员个数Color.length // 2Color.toJSON(); // 返回数组 [{"key":"RED","value":"red","label":"红色"},{"key":"GREEN","value":"green","label":"绿色"}]JSON.stringify(Color); // 返回字符串 '[{"key":"RED","value":"red","label":"红色"},{"key":"GREEN","value":"green","label":"绿色"}]'// 获取成员const member = Color.getMember('red'); // 返回单个成员对象 {"key":"RED","value":"red","label":"红色"}member.value === 'red'; // truemember.key; // 'RED'member.label; // '红色'Color.getLabel(Color.RED); // '红色'// 判断枚举值是否合法Color.has('red'); // trueColor.has('yellow'); // false// map，forEach和filter函数都可直接使用Color.map(member => member.label); // ['红色', '绿色']// 属性成员来自定义枚举的keyObject.keys(Color); // ['RED', 'GREEN']// 用in是遍历keysfor (const key in Color) {  console.log(key);}// 用of是遍历成员对象for (const member of Color) {  console.log(member);}// 使用字典构造const ColorV2 = new Enum({  Red: 'red',  green: 'green',});ColorV2.toJSON(); // [{"key":"Red","value":"red"},{"key":"blue","value":"blue"}]// 注意区分大小写，字典属性字段为成员的keyColorV2.Red // 'red'ColorV2.green // 'green'

2.4 前端组件中使用

使用React + Ant Design举例：

import React from 'react';import { Select, Radio, Table } from 'antd';// 可以直接在index.js入口文件中执行Enum.register()，即可全局使用；import Enum from 'js-enumerate';const Color = new Enum([  { key: 'RED', value: 'red', label: '红色' },  { key: 'GREEN', value: 'green', label: '绿色' },]);// 依次应用于 下拉选项、单选框、表格字段的筛选菜单项const App = () => (  <>    {/*使用filters可以选择“全部”*/}    <Select defaultValue={Color.RED} options={Color.filters} />    <Radio.Group defaultValue={Color.GREEN} options={Color.options} />    <Table colums={[{ key: 'color', title: '颜色', filters: Color.to_filters() }]}/>  </>);

2.5 其他扩展用法

const Color = new Enum([  { key: 'RED', value: 'red', label: '红色', disabled: true, color: '#f00' },  { key: 'GREEN', value: 'green', label: '绿色', extra: { msg: '其他信息' }, color: '#0f0' },]);const redMem = Color.getMember(Color.RED);redMem.disabled // trueredMem.color // '#f00'const greenMem = Color.getMember(Color.GREEN);greenMem.extra // { msg: '其他信息' }// 以下非读操作会报错Color.RED = 'red-v2'; // Throws Errordelete Color.RED; // Throws ErrorredMem.label = '大红色'; // Throws Error// 可以通过 options.freez 不冻结枚举实例// 但不建议这么使用，容易出现不可预期的事情const ColorEdit = new Enum([  { key: 'RED', value: 'red', label: '红色' },  { key: 'GREEN', value: 'green', label: '绿色' },], { freez: false });const redEdit = ColorEdit.getMember(ColorEdit.RED);redEdit.label // '红色'redEdit.label = '大红色' // trueredEdit.label // '大红色'

2.6 内置属性

• length 枚举实例所有成员个数
• options 可用于下拉选择的数组数据
• filters 可用于刷选的数组数据，比options多一个value=''的成员

2.7 Enum object API

• forEach,map,filter 这三个方法是对枚举成员迭代器进行遍历操作
• getMember(value) 通过value获取成员对象
• has(value) 值value是否在枚举定义的成员当中
• getLabel(value) 通过value获取成员label用于展示
• to_filters() 转换成ant design/element中表格table组件filters需要的刷选条件
• getOptions(option = {}) 根据所有成员信息返回数组数据
• Enum.register(key = 'Enum')类的静态方法，用于全局注册对象

2.8 其他注意事项

• 成员key属性只能由数字、大小写字母、中横线、下划线组成的字符串，且不能以__开头；
• 成员key属性不能使用内置属性字符串，例如length/options/filters不能使用；
• 成员value不能为null和undefined；
• 成员label不能为null和''；
• 枚举实例成员默认都被freez冻结，不允许修改；

3. 推荐

• 若是后端是Python语言，推荐 py-enum 配合该lib一起使用