经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » Java相关 » Java » 查看文章
JavaScript中的四种枚举方式
来源：cnblogs　　作者：chuckQu　　时间：2023/5/8 10:21:36　　对本文有异议

字符串和数字具有无数个值，而其他类型如布尔值则是有限的集合。

一周的日子（星期一，星期二，...，星期日），一年的季节（冬季，春季，夏季，秋季）和基本方向（北，东，南，西）都是具有有限值集合的例子。

当一个变量有一个来自有限的预定义常量的值时，使用枚举是很方便的。枚举使你不必使用魔法数字和字符串（这被认为是一种反模式）。

让我们看看在JavaScript中创建枚举的四种好方法（及其优缺点）。

基于对象的枚举

枚举是一种数据结构，它定义了一个有限的具名常量集。每个常量都可以通过其名称来访问。

让我们来考虑一件T恤衫的尺寸：Small，Medium，和Large。

在JavaScript中创建枚举的一个简单方法（虽然不是最理想的）是使用一个普通的JavaScript对象。

  1. const Sizes = {
  2.   Small: 'small',
  3.   Medium: 'medium',
  4.   Large: 'large',
  5. }
  7. const mySize = Sizes.Medium
  9. console.log(mySize === Sizes.Medium) // logs true

Sizes是一个基于JavaScript对象的枚举，它有三个具名常量：Sizes.Small、Sizes.Medium以及Sizes.Large。

Sizes也是一个字符串枚举，因为具名常量的值是字符串：'small' ，'medium'，以及 'large'。

image.png

要访问具名常量值，请使用属性访问器。例如，Sizes.Medium的值是'medium'。

枚举的可读性更强，更明确，并消除了对魔法字符串或数字的使用。

优缺点

普通的对象枚举之所以吸引人，是因为它很简单：只要定义一个带有键和值的对象，枚举就可以了。

但是在一个大的代码库中，有人可能会意外地修改枚举对象，这将影响应用程序的运行。

  1. const Sizes = {
  2.   Small: 'small',
  3.   Medium: 'medium',
  4.   Large: 'large',
  5. }
  7. const size1 = Sizes.Medium
  8. const size2 = Sizes.Medium = 'foo' // Changed!
  10. console.log(size1 === Sizes.Medium) // logs false

Sizes.Medium 枚举值被意外地改变。

size1，虽然被初始化为Sizes.Medium，但不再等同于Sizes.Medium！

普通对象的实现没有受到保护，因此无法避免这种意外的改变。

让我们仔细看看字符串和symbol枚举。以及如何冻结枚举对象以避免意外改变的问题。

枚举值类型

除了字符串类型，枚举值可以是一个数字：

  1. const Sizes = {
  2.   Small: 0,
  3.   Medium: 1,
  4.   Large: 2
  5. }
  7. const mySize = Sizes.Medium
  9. console.log(mySize === Sizes.Medium) // logs true

上述例子中，Sizes枚举是数值枚举，因为值都是数字：0，1，2。

你也可以创建symbol枚举：

  1. const Sizes = {
  2.   Small: Symbol('small'),
  3.   Medium: Symbol('medium'),
  4.   Large: Symbol('large')
  5. }
  7. const mySize = Sizes.Medium
  9. console.log(mySize === Sizes.Medium) // logs true

使用symbol的好处是，每个symbol都是唯一的。这意味着，你总是要通过使用枚举本身来比较枚举：

  1. const Sizes = {
  2.   Small: Symbol('small'),
  3.   Medium: Symbol('medium'),
  4.   Large: Symbol('large')
  5. }
  7. const mySize = Sizes.Medium
  9. console.log(mySize === Sizes.Medium)     // logs true
  10. console.log(mySize === Symbol('medium')) // logs false

使用symbol枚举的缺点是JSON.stringify()将symbol字符串化为null、undefined，或者跳过有symbol作为值的属性：

  1. const Sizes = {
  2.   Small: Symbol('small'),
  3.   Medium: Symbol('medium'),
  4.   Large: Symbol('large')
  5. }
  7. const str1 = JSON.stringify(Sizes.Small)
  8. console.log(str1) // logs undefined
  10. const str2 = JSON.stringify([Sizes.Small])
  11. console.log(str2) // logs '[null]'
  13. const str3 = JSON.stringify({ size: Sizes.Small })
  14. console.log(str3) // logs '{}'

在下面的例子中，我将使用字符串枚举。但是你可以自由地使用你需要的任何值类型。

如果你可以自由选择枚举值类型，就用字符串吧。字符串比数字和symbol更容易进行调试。

基于Object.freeze()枚举

保护枚举对象不被修改的一个好方法是冻结它。当一个对象被冻结时，你不能修改或向该对象添加新的属性。换句话说，这个对象变成了只读。

在JavaScript中，Object.freeze()工具函数可以冻结一个对象。让我们来冻结Sizes枚举：

  1. const Sizes = Object.freeze({
  2.   Small: 'small',
  3.   Medium: 'medium',
  4.   Large: 'large',
  5. })
  7. const mySize = Sizes.Medium
  9. console.log(mySize === Sizes.Medium) // logs true

const Sizes = Object.freeze({ ... }) 创建一个冻结的对象。即使被冻结，你也可以自由地访问枚举值： const mySize = Sizes.Medium。

优缺点

如果一个枚举属性被意外地改变了，JavaScript会抛出一个错误（在严格模式下）：

  1. const Sizes = Object.freeze({
  2.   Small: 'Small',
  3.   Medium: 'Medium',
  4.   Large: 'Large',
  5. })
  7. const size1 = Sizes.Medium
  8. const size2 = Sizes.Medium = 'foo' // throws TypeError

语句const size2 = Sizes.Medium = 'foo' 对 Sizes.Medium 属性进行了意外的赋值。

因为Sizes是一个冻结的对象，JavaScript（在严格模式下）会抛出错误：

  1. TypeError: Cannot assign to read only property 'Medium' of object <Object>

冻结的对象枚举被保护起来，不会被意外地改变。

不过，还有一个问题。如果你不小心把枚举常量拼错了，那么结果将是未undefined：

  1. const Sizes = Object.freeze({
  2.   Small: 'small',
  3.   Medium: 'medium',
  4.   Large: 'large',
  5. })
  7. console.log(Sizes.Med1um) // logs undefined

Sizes.Med1um表达式（Med1um是Medium的错误拼写版本）结果为未定义，而不是抛出一个关于不存在的枚举常量的错误。

让我们看看基于代理的枚举如何解决这个问题。

基于proxy枚举

一个有趣的，也是我最喜欢的实现，是基于代理的枚举。

代理是一个特殊的对象，它包裹着一个对象，以修改对原始对象的操作行为。代理并不改变原始对象的结构。

枚举代理拦截对枚举对象的读和写操作，并且：

  • 当访问一个不存在的枚举值时，会抛出一个错误。
  • 当一个枚举对象的属性被改变时抛出一个错误

下面是一个工厂函数的实现，它接受一个普通枚举对象，并返回一个代理对象：

  1. // enum.js
  2. export function Enum(baseEnum) {  
  3.   return new Proxy(baseEnum, {
  4.     get(target, name) {
  5.       if (!baseEnum.hasOwnProperty(name)) {
  6.         throw new Error(`"${name}" value does not exist in the enum`)
  7.       }
  8.       return baseEnum[name]
  9.     },
  10.     set(target, name, value) {
  11.       throw new Error('Cannot add a new value to the enum')
  12.     }
  13.   })
  14. }

代理的get()方法拦截读取操作，如果属性名称不存在，则抛出一个错误。

set()方法拦截写操作，但只是抛出一个错误。这是为保护枚举对象不被写入操作而设计的。

让我们把sizes对象枚举包装成一个代理：

  1. import { Enum } from './enum'
  3. const Sizes = Enum({
  4.   Small: 'small',
  5.   Medium: 'medium',
  6.   Large: 'large',
  7. })
  9. const mySize = Sizes.Medium
  11. console.log(mySize === Sizes.Medium) // logs true

代理枚举的工作方式与普通对象枚举完全一样。

优缺点

然而，代理枚举受到保护，以防止意外覆盖或访问不存在的枚举常量：

  1. import { Enum } from './enum'
  3. const Sizes = Enum({
  4.   Small: 'small',
  5.   Medium: 'medium',
  6.   Large: 'large',
  7. })
  9. const size1 = Sizes.Med1um         // throws Error: non-existing constant
  10. const size2 = Sizes.Medium = 'foo' // throws Error: changing the enum

Sizes.Med1um抛出一个错误，因为Med1um常量名称在枚举中不存在。

Sizes.Medium = 'foo' 抛出一个错误，因为枚举属性已被改变。

代理枚举的缺点是，你总是要导入枚举工厂函数，并将你的枚举对象包裹在其中。

基于类的枚举

另一种有趣的创建枚举的方法是使用一个JavaScript类。

一个基于类的枚举包含一组静态字段，其中每个静态字段代表一个枚举的常量。每个枚举常量的值本身就是该类的一个实例。

让我们用一个Sizes类来实现sizes枚举：

  1. class Sizes {
  2.   static Small = new Sizes('small')
  3.   static Medium = new Sizes('medium')
  4.   static Large = new Sizes('large')
  5.   #value
  7.   constructor(value) {
  8.     this.#value = value
  9.   }
  11.   toString() {
  12.     return this.#value
  13.   }
  14. }
  16. const mySize = Sizes.Small
  18. console.log(mySize === Sizes.Small)  // logs true
  19. console.log(mySize instanceof Sizes) // logs true

Sizes是一个代表枚举的类。枚举常量是该类的静态字段，例如，static Small = new Sizes('small')。

Sizes类的每个实例也有一个私有字段#value，它代表枚举的原始值。

基于类的枚举的一个很好的优点是能够在运行时使用instanceof操作来确定值是否是枚举。例如，mySize instanceof Sizes结果为真，因为mySize是一个枚举值。

基于类的枚举比较是基于实例的（而不是在普通、冻结或代理枚举的情况下的原始比较）：

  1. class Sizes {
  2.   static Small = new Sizes('small')
  3.   static Medium = new Sizes('medium')
  4.   static Large = new Sizes('large')
  5.   #value
  7.   constructor(value) {
  8.     this.#value = value
  9.   }
  11.   toString() {
  12.     return this.#value
  13.   }
  14. }
  16. const mySize = Sizes.Small
  18. console.log(mySize === new Sizes('small')) // logs false

mySize（即Sizes.Small）不等于new Sizes('small')。

Sizes.Small和new Sizes('small')，即使具有相同的#value，也是不同的对象实例。

优缺点

基于类的枚举不能受到保护，以防止覆盖或访问不存在的枚举具名常量。

  1. class Sizes {
  2.   static Small = new Sizes('small')
  3.   static Medium = new Sizes('medium')
  4.   static Large = new Sizes('large')
  5.   #value
  7.   constructor(value) {
  8.     this.#value = value
  9.   }
  11.   toString() {
  12.     return this.#value
  13.   }
  14. }
  16. const size1 = Sizes.medium         // a non-existing enum value can be accessed
  17. const size2 = Sizes.Medium = 'foo' // enum value can be overwritten accidentally

但你可以控制新实例的创建，例如，通过计算在构造函数内创建了多少个实例。然后在创建超过3个实例时抛出一个错误。

当然，最好让你的枚举实现尽可能的简单。枚举的目的是为了成为普通的数据结构。

总结

在JavaScript中，有4种创建枚举的好方法。

最简单的方法是使用一个普通的JavaScript对象：

  1. const MyEnum = {
  2.   Option1: 'option1',
  3.   Option2: 'option2',
  4.   Option3: 'option3'
  5. }

普通的对象枚举适合小型项目或快速演示。

第二种选择，如果你想保护枚举对象不被意外覆盖，则可以使用冻结的对象：

  1. const MyEnum = Object.freeze({
  2.   Option1: 'option1',
  3.   Option2: 'option2',
  4.   Option3: 'option3'
  5. })

冻结的对象枚举适合于中型或大型项目，你要确保枚举不会被意外地改变。

第三种选择是代理方法：

  1. export function Enum(baseEnum) {  
  2.   return new Proxy(baseEnum, {
  3.     get(target, name) {
  4.       if (!baseEnum.hasOwnProperty(name)) {
  5.         throw new Error(`"${name}" value does not exist in the enum`)
  6.       }
  7.       return baseEnum[name]
  8.     },
  9.     set(target, name, value) {
  10.       throw new Error('Cannot add a new value to the enum')
  11.     }
  12.   })
  13. }
  1. import { Enum } from './enum'
  3. const MyEnum = Enum({
  4.   Option1: 'option1',
  5.   Option2: 'option2',
  6.   Option3: 'option3'
  7. })

代理枚举适用于中型或大型项目，以更好地保护你的枚举不被覆盖或访问不存在的命名常量。

代理的枚举是我个人的偏好。

第四种选择是使用基于类的枚举，其中每个命名的常量都是类的实例，并作为类的静态属性被存储：

  1. class MyEnum {
  2.   static Option1 = new MyEnum('option1')
  3.   static Option2 = new MyEnum('option2')
  4.   static Option3 = new MyEnum('option3')
  5.   #value
  7.   constructor(value) {
  8.     this.#value = value
  9.   }
  11.   toString() {
  12.     return this.#value
  13.   }
  14. }

如果你喜欢类的话，基于类的枚举是可行的。然而，基于类的枚举比冻结的或代理的枚举保护得更少。

你还知道哪些在JavaScript中创建枚举的方法？

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~

原文链接：https://www.cnblogs.com/chuckQu/p/17380596.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Java热门文章

  • 【IDEA】Application context not configured for this file
  • [IDEA] chapter_reader - idea看小说插件 idea阅读插件 idea摸鱼插件
  • thrift常见异常及原因分析
  • Java 调用 PaddleDetection 模型
  • JVM 详解，大白话带你认识 JVM
  • spring-boot-2.0.3不一样系列之番外篇 - @Configuration、Condition与@Conditional
  • Java Comparator.comparing比较导致空指针异常的解决
  • Java使用EasyExcel进行单元格合并的问题详解
  • 死磕 java集合之ArrayBlockingQueue源码分析
  • Java基础之集合Set详解

    • Java推荐文章

  • 面试场景题：一次关于线程池使用场景的讨论。
  • 前端黑科技：使用 JavaScript 实现网页扫码功能
  • 聊一聊 Netty 数据搬运工 ByteBuf 体系的设计与实现
  • 简单设计一个JAVA并行处理工具类
  • 【杂谈】JPA乐观锁改悲观锁遇到的一些问题与思考
  • 认识netty的基本组件
  • Jenkins如何使用CrumbIssuer防御CSRF攻击
  • 如何平稳地从nacos迁移到r-nacos？
  • 线程池遇到父子任务，有大坑，要注意！
  • Java JVM——12. 垃圾回收理论概述

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号