善用 Enum 能使代码绝对是不可或缺的,但就算没使用 TypeScript 也别灰心,因为 TypeScript 最终会被转换为 JavaScript ,那来看看如何直接用 JavaScript 实现 Enum 吧!
用原生 JavaScript 实现 Enum
在前面说过 Enum 很像 Object ,如果研究一下 Enum 被编译成 javascript 之后的代码,就会发现还真的是 Object。
Enum 被编译后会变成 Key 和 Value 反向对应的对象,这样看起来非常简单,为了方便使用,下面把它的编译方式写成一个函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
虽然得到的结果相同,但是丧失了 Enum 中最可贵的常量特色,如果不能让它变成不可修改,那就有可能会在代码里不经意地改动它,导致执行结果可能出错,于是可以在最后利用 Object.freeze()
,让外部操作无法新增、删除或重新定义任何 Property :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
这样就能简单在 JavaScript 中实现 Enum 了。
const Enum 的用法
从前面的 JavaScript 代码中可以看到 Enum 编译过后会变成 Key 和 Value 互相对应的 Object ,也就是说不管是用 Key 还是Value 都可以取出对应的值,
但是如果用 const
声明 Enum ,编译之后就不会产生 Object。
直接看例子,假设我把 responseState
用 const
重新生命,且也是以 handleResponseStatus
使用该 Enum 做判断:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
看起来一切正常,不过在编译后的 JavaScript 中,会发现 Enum 并没有产生 Object ,而是直接用 const
声明在 Enum 中的值。
用 const
声明 Enum 有几个好处:
假设要用到的 Enum 非常多,那在执行时就会不停地使用 IIFE 产生 Object 将 Key 和 Value 绑定到 Object,会造成一些效率上的损失,也会增加内存,但是
const
并不会产生 Object ,也就不会有以上的问题。就算到的 Enum 不多,判断时也需要一直从 Object 中找出对应的值,而如果是用
const
声明 Enum ,在编译成 JS 时就将声明的值直接放入判断中。
不过这样也就没法从 Enum 中反向取值了,因为它并不会产生对象:
1 2 3 4 5 6 7 |
|
更多编程相关知识,请访问:编程入门!!
以上就是聊聊TypeScript中Enum(枚举)的用法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者