在前端开发中我们经常遇到这样一种情况：假设我们要渲染一个订单列表，后端返回的数据中包含这样一个字段：

后端可能会告诉我们，它对应后端的这样一组值：

那么我们在前端如何优雅地把后端所返回的值 0 转换成字符串 已完成 呢？这就是本文要讨论的问题。

为了引出我们的方案，我们先来看一个常用但不那么优雅的方案：

首先，我们来为这个字段定义一个对象

接下来，根据返回的字段值从对象中取出对应的值即可：

得益于JavaScript语法的灵活性，这种方案实现起来特别简单，对于简单的枚举场景算得上一种很好的解决方案。但它也有缺点，我只列举最明显的两点：

关于灵活性，我们尝试换一个场景：假设我们现在需要根据中文文本来获取它对应的value，该怎么办呢？我们可能会定义下面这样一个对象：

我相信任何一个有开发经验的开发者看到这样的代码都会嗤之以鼻，毕竟用中文字符串作对象的key实在太疯狂了（尽管这在js中是允许的）！

关于封装性差，不利于扩展，我们也举一个场景：假设我们需要将 已完成 的文案渲染为绿色，待支付 的渲染为橙色，已取消 的渲染为灰色；并且各个状态对应不同的操作：已完成 的订单可以查看详情 或 下载，待支付 的订单可以 继续支付 或 取消订单，已取消 的订单只支持 查看详情。

面对这个场景，我们定义的那个‘单薄’的对象已经完全不够用了。简单场景看起来很美好，但现实却总是很复杂！

关于这个方案的其他缺点我们不再一一列举，我们接下来介绍一种更加优雅的方案：

历史常识告诉我们，当一个地区变得混乱，多半是管理出了问题，上述问题也一样。为了解决混乱，我们尝试引入一个“管理者”，来管理这个枚举字段。

在实现这个“管理者”之前，我们先来思考这个管理者应该具备哪些能力。这里我们把后端返回的值0,1,2称为value，把对应的中文文本称为label。

首先，它必须能同时具备根据value获取label，以及根据label获取value的能力，为了提供更大的灵活性，它最好可以以数组的形式暴露出所有的value和label，以便我们枚举，于是它的结构大概是这样的（这里只列举了最基本的属性和方法）：

我们定义的这两个get方法的搜索逻辑是：根据传入的value找到它在values数组中的索引，然后取出labels中对应位置的值即可，反之亦然。这样我们就解决了上述第一个不够灵活的问题。

当然，作为一个优雅的解决方案，我们肯定不会一个个手写每个枚举字段的管理者对象？所以我们来定义一个工厂函数：

还有另外一种方法，我们给管理者对象新增一个用于获取颜色的方法：

现在表格的每一项新增了一个字段label，对应的就是订单状态的中文文本，可以直接拿来渲染！

通过创建这个管理者对象，我们不仅实现了对枚举值的封装和隔离，还很大程度地增加了它的扩展性和灵活性，建议大家可以在日常开发中尝试使用它。