JavaScript中的四种枚举方式

这篇具有很好参考价值的文章主要介绍了JavaScript中的四种枚举方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

基于对象的枚举

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

让我们来考虑一件T恤衫的尺寸:SmallMedium,和Large

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

const Sizes = {
  Small: 'small',
  Medium: 'medium',
  Large: 'large',
}

const mySize = Sizes.Medium

console.log(mySize === Sizes.Medium) // logs true

Sizes是一个基于JavaScript对象的枚举,它有三个具名常量:Sizes.SmallSizes.Medium以及Sizes.Large

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

JavaScript中的四种枚举方式

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

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

优缺点

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

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

const Sizes = {
  Small: 'small',
  Medium: 'medium',
  Large: 'large',
}

const size1 = Sizes.Medium
const size2 = Sizes.Medium = 'foo' // Changed!

console.log(size1 === Sizes.Medium) // logs false

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

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

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

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

枚举值类型

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

const Sizes = {
  Small: 0,
  Medium: 1,
  Large: 2
}

const mySize = Sizes.Medium

console.log(mySize === Sizes.Medium) // logs true

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

你也可以创建symbol枚举:

const Sizes = {
  Small: Symbol('small'),
  Medium: Symbol('medium'),
  Large: Symbol('large')
}

const mySize = Sizes.Medium

console.log(mySize === Sizes.Medium) // logs true

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

const Sizes = {
  Small: Symbol('small'),
  Medium: Symbol('medium'),
  Large: Symbol('large')
}

const mySize = Sizes.Medium

console.log(mySize === Sizes.Medium)     // logs true
console.log(mySize === Symbol('medium')) // logs false

使用symbol枚举的缺点是JSON.stringify()symbol字符串化为nullundefined,或者跳过有symbol作为值的属性:

const Sizes = {
  Small: Symbol('small'),
  Medium: Symbol('medium'),
  Large: Symbol('large')
}

const str1 = JSON.stringify(Sizes.Small)
console.log(str1) // logs undefined

const str2 = JSON.stringify([Sizes.Small])
console.log(str2) // logs '[null]'

const str3 = JSON.stringify({ size: Sizes.Small })
console.log(str3) // logs '{}'

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

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

基于Object.freeze()枚举

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

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

const Sizes = Object.freeze({
  Small: 'small',
  Medium: 'medium',
  Large: 'large',
})

const mySize = Sizes.Medium

console.log(mySize === Sizes.Medium) // logs true

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

优缺点

如果一个枚举属性被意外地改变了,JavaScript会抛出一个错误(在严格模式下):

const Sizes = Object.freeze({
  Small: 'Small',
  Medium: 'Medium',
  Large: 'Large',
})

const size1 = Sizes.Medium
const size2 = Sizes.Medium = 'foo' // throws TypeError

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

因为Sizes是一个冻结的对象,JavaScript(在严格模式下)会抛出错误:

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

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

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

const Sizes = Object.freeze({
  Small: 'small',
  Medium: 'medium',
  Large: 'large',
})

console.log(Sizes.Med1um) // logs undefined

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

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

基于proxy枚举

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

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

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

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

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

// enum.js
export function Enum(baseEnum) {  
  return new Proxy(baseEnum, {
    get(target, name) {
      if (!baseEnum.hasOwnProperty(name)) {
        throw new Error(`"${name}" value does not exist in the enum`)
      }
      return baseEnum[name]
    },
    set(target, name, value) {
      throw new Error('Cannot add a new value to the enum')
    }
  })
}

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

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

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

import { Enum } from './enum'

const Sizes = Enum({
  Small: 'small',
  Medium: 'medium',
  Large: 'large',
})

const mySize = Sizes.Medium

console.log(mySize === Sizes.Medium) // logs true

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

优缺点

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

import { Enum } from './enum'

const Sizes = Enum({
  Small: 'small',
  Medium: 'medium',
  Large: 'large',
})

const size1 = Sizes.Med1um         // throws Error: non-existing constant
const size2 = Sizes.Medium = 'foo' // throws Error: changing the enum

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

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

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

基于类的枚举

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

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

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

class Sizes {
  static Small = new Sizes('small')
  static Medium = new Sizes('medium')
  static Large = new Sizes('large')
  #value

  constructor(value) {
    this.#value = value
  }

  toString() {
    return this.#value
  }
}

const mySize = Sizes.Small

console.log(mySize === Sizes.Small)  // logs true
console.log(mySize instanceof Sizes) // logs true

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

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

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

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

class Sizes {
  static Small = new Sizes('small')
  static Medium = new Sizes('medium')
  static Large = new Sizes('large')
  #value

  constructor(value) {
    this.#value = value
  }

  toString() {
    return this.#value
  }
}

const mySize = Sizes.Small

console.log(mySize === new Sizes('small')) // logs false

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

Sizes.Smallnew Sizes('small'),即使具有相同的#value,也是不同的对象实例。

优缺点

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

class Sizes {
  static Small = new Sizes('small')
  static Medium = new Sizes('medium')
  static Large = new Sizes('large')
  #value

  constructor(value) {
    this.#value = value
  }

  toString() {
    return this.#value
  }
}

const size1 = Sizes.medium         // a non-existing enum value can be accessed
const size2 = Sizes.Medium = 'foo' // enum value can be overwritten accidentally

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

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

总结

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

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

const MyEnum = {
  Option1: 'option1',
  Option2: 'option2',
  Option3: 'option3'
}

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

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

const MyEnum = Object.freeze({
  Option1: 'option1',
  Option2: 'option2',
  Option3: 'option3'
})

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

第三种选择是代理方法:

export function Enum(baseEnum) {  
  return new Proxy(baseEnum, {
    get(target, name) {
      if (!baseEnum.hasOwnProperty(name)) {
        throw new Error(`"${name}" value does not exist in the enum`)
      }
      return baseEnum[name]
    },
    set(target, name, value) {
      throw new Error('Cannot add a new value to the enum')
    }
  })
}
import { Enum } from './enum'

const MyEnum = Enum({
  Option1: 'option1',
  Option2: 'option2',
  Option3: 'option3'
})

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

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

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

class MyEnum {
  static Option1 = new MyEnum('option1')
  static Option2 = new MyEnum('option2')
  static Option3 = new MyEnum('option3')
  #value

  constructor(value) {
    this.#value = value
  }

  toString() {
    return this.#value
  }
}

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

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

以上就是本文的全部内容,如果对你有所帮助,欢迎点赞、收藏、转发~文章来源地址https://www.toymoban.com/news/detail-436230.html

到了这里,关于JavaScript中的四种枚举方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java中的四种引用类型及其使用方式

    Java中有四种引用类型,分别是强引用(Strong Reference)、软引用(Soft Reference)、弱引用(WeakReference)、虚引用(PhantomReference)。 这要从Java管理内存的方式说起。Java为了将程序员从内存管理中解救出来,即不让程序员自己申请堆内存(比如C语言程序员需要通过malloc请求操作系统分配一

    2023年04月09日
    浏览(48)
  • 如何从Java中的字符串值中获取枚举值

    说我有一个枚举,它只是 我想找到一个字符串的枚举值,例如 “A” 这将是 Blah.A。怎么可能做到这一点? Enum.valueOf() 是我需要的方法吗?如果是这样,我将如何使用它? 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com 是的

    2024年02月16日
    浏览(51)
  • JavaScript中的Unicode和字符串内部结构

    🧑‍🎓 个人主页: 《爱蹦跶的大A阿》 🔥 当前正在更新专栏: 《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​  ​         在我们的日常生活中,JavaScript已经成为了一种无处不在的编程语言。它的应用范围从简单的网页动画,到复杂的前端框架,

    2024年01月23日
    浏览(38)
  • 【JavaScript数据结构与算法】字符串类(反转字符串中的单词)

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,也会涉及到服务端(Node.js) 📃 个人状态: 在校大学生一枚,已拿多个前端 offer(秋招) 🚀 未来打算: 为中国的工业软件事业效力 n 年 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目

    2023年04月09日
    浏览(89)
  • JavaScript从入门到精通系列第二十八篇:详解JavaScript中的字符串的方法

      文章目录 前言 一:String中的方法 1:获取字符串的长度 2:返回指定位置的字符 3:返回指定位置的字符Unicode编码 4:返回指定位置的字符Unicode编码  二:比较常用的 1:连接两个字符串 2:检索一个字符串中指定内容  3:从后检索一个字符串中指定内容   4:截取字符串

    2024年02月06日
    浏览(53)
  • View 的四种 OnClick 方式

    嗨喽,大家好!今天呢,我跟大家聊一聊Android 的View 的点击事件onClick 。额,有点拗口(^_^) 。 看过我的文章的人可能会好奇,你怎么写Android的文章了啊?说起这啊,就是我的血泪史了,此处省略一万字.................... 废话不多说,让我们代码走起,风里来,雨里去,唯有代

    2023年04月15日
    浏览(42)
  • 创建多线程的四种方式

    ① 创建一个类继承 Thread 类,重写 run() 方法 ② 调用 start() 方法启动线程 例: ① 创建类实现 Runnable 接口,重写 run() 方法 ② 以实现类作为构造器参数,创建一个线程( Thread )对象 ③ 调用 start() 方法启动线程 例 注意:实现Runnable接口方式中,调用的不是Thread类的run()方法

    2024年02月10日
    浏览(45)
  • STM32的四种开发方式

    首先看下ST官方给出的四种开发方式的比较 寄存器开发 寄存器编程对于从51等等芯片过渡过来的小伙伴并不陌生,不管你是什么库,最终操作的还是寄存器,所以对于标准库、HAL库、LL库都是在寄存器上的编程,所以可以直接在各种库中直接操作寄存器。 但寄存器开发方法到

    2024年02月11日
    浏览(41)
  • JavaScript从入门到精通系列第三十一篇:详解JavaScript中的字符串和正则表达式相关的方法

      文章目录 知识回顾 1:概念回顾 2:正则表达式字面量 一:字符串中正则表达式方法 1:split 2:search 3:match 4:replace         正则表达式用于定义一些字符串的规则,计算机可以根据正则表达式检查一个字符串是否符合规则,或者将字符串中符合规则的内容提取出来。

    2024年01月17日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包