JavaScript中的创建枚举四种方式

当我们需要为了提高程序的可读性和可维护性的目的,要定义一些有限的可能性的常量时,就需要使用枚举了。在 JavaScript 中,以下是创建枚举的四种方式:

1. 使用对象

通过定义一个对象,我们可以实现基本的枚举功能。

    const DAY_OF_WEEK = {
      SUNDAY: 0,
      MONDAY: 1,
      TUESDAY: 2,
      WEDNESDAY: 3,
      THURSDAY: 4,
      FRIDAY: 5,
      SATURDAY: 6
    }

在上面的示例中,我们定义了一个表示一周的每个星期几的枚举,我们将其赋值给一个名为 DAY_OF_WEEK 的常量。每个值都是一个实际的 JavaScript 变量,它们的值从 0 开始递增。这个对象是一个具有只读属性的 JavaScript 对象,它不允许重新定义值。

2. 使用类

另一种可行的方法是利用 ES6 中的类。

    class DAY_OF_WEEK {
      static SUNDAY = 0
      static MONDAY = 1
      static TUESDAY = 2
      static WEDNESDAY = 3
      static THURSDAY = 4
      static FRIDAY = 5
      static SATURDAY = 6
    }

在上面的示例中,我们定义了一个名为 DAY_OF_WEEK 的类,并在其中作为其静态属性定义了每个星期几的常量。这种方式允许我们通过实例化该类来使用这些常量,并在创建时传递参数。

    const myEnum = new DAY_OF_WEEK()
    console.log(myEnum.SUNDAY) // 0

3. 使用Symbol

如果您想要创建完全不可变的枚举,则可以使用 Symbol(一种 ES6 中的新数据类型)来实现。

    const DAY_OF_WEEK = {
      SUNDAY: Symbol('Sunday'),
      MONDAY: Symbol('Monday'),
      TUESDAY: Symbol('Tuesday'),
      WEDNESDAY: Symbol('Wednesday'),
      THURSDAY: Symbol('Thursday'),
      FRIDAY: Symbol('Friday'),
      SATURDAY: Symbol('Saturday')
    }

在上面的示例中,我们使用了 Symbol 来定义常量。每个常量都是一个唯一的 Symbol 实例,这使得我们可以确保在整个应用程序中不存在两个名称相同的常量。

4. 使用有限制的类(Frozen Class)

我们也可以使用 Object.freeze() 和 ES6 中的类来创建枚举。

    class DAY_OF_WEEK {
      constructor(name, value) {
        this.name = name
        this.value = value
        Object.freeze(this)
      }
      toString(){
        return this.name
      }
    }

    const SUNDAY = new DAY_OF_WEEK('Sunday', 0)
    const MONDAY = new DAY_OF_WEEK('Monday', 1)
    const TUESDAY = new DAY_OF_WEEK('Tuesday', 2)
    const WEDNESDAY = new DAY_OF_WEEK('Wednesday', 3)
    const THURSDAY = new DAY_OF_WEEK('Thursday', 4)
    const FRIDAY = new DAY_OF_WEEK('Friday', 5)
    const SATURDAY = new DAY_OF_WEEK('Saturday', 6)

在上面的示例中,我们使用了 ES6 类来定义常量,同时在构造函数中使用 Object.freeze() 冻结了常量对象。任何试图更新这些常量对象的尝试都将失败,因为它们是不可变的。该类也覆盖了 toString() 方法,以便在需要时输出名称字符串。

值得注意的是,虽然这四种方式都可以创建枚举,但第一种方式比较常用。如果枚举的常量数量很少,且不需要将其包裹在类或函数中,那么使用对象可以很快地完成枚举的创建。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript中的创建枚举四种方式 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • MockJs结合json-server模拟后台数据

    MockJs结合json-server模拟后台数据的完整攻略如下: 1. 安装MockJs和json-server 在终端中执行以下命令安装MockJs和json-server: npm install mockjs json-server –save-dev 2. 编写Mock数据 在项目根目录下创建mock文件夹,然后创建文件db.json和mock.…

    JavaScript 2023年5月27日
    00
  • js字符串与Unicode编码互相转换

    JavaScript字符串与Unicode编码互相转换 JavaScript内部使用Unicode编码,每个字符对应一个Unicode码位,可以通过字符串和Unicode编码之间的互相转换来操作Unicode码位。 字符串转Unicode编码 字符串转换成Unicode编码可以使用JavaScript内置的charCodeAt()函数。 charCodeAt…

    JavaScript 2023年5月20日
    00
  • js控制div弹出层实现方法

    “JS控制div弹出层实现方法”有很多种方法,以下是其中一种比较常见的方法: 1. 首先创建一个html文件,并添加CSS样式 CSS样式的作用是设置弹出层的样式和位置,实现以上功能: .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%…

    JavaScript 2023年6月11日
    00
  • 微信小程序之仿微信漂流瓶实例

    以下是“微信小程序之仿微信漂流瓶实例”的完整攻略。 1. 确定需求及设计界面 首先需要确定需要开发的功能及设计的界面。在这个实例中,需要实现类似微信的漂流瓶功能,用户可以扔出漂流瓶,也可以捡到漂流瓶并回复。设计的界面需要包含扔出漂流瓶、捡到漂流瓶、显示漂流瓶详情及回复等功能。 2. 创建项目 在微信开发者工具中创建一个新的小程序项目,并填入相应的AppID。…

    JavaScript 2023年6月11日
    00
  • ES6 let和const定义变量与常量的应用实例分析

    ES6 let和const定义变量与常量的应用实例分析 let的应用实例 示例1 // ES6之前 for(var i=0; i<5; i++) { setTimeout(function() { console.log(i) }, 1000) } // ES6之后 for(let i=0; i<5; i++) { setTimeout(func…

    JavaScript 2023年6月11日
    00
  • vue后台返回格式为二进制流进行文件的下载方式

    当我们在处理后台返回的文件下载数据时,有时候会遇到后台返回数据格式为二进制流的情况。这种格式的数据在前端界面上无法直接显示,需要通过特殊的处理方式进行文件下载。下面是完整攻略。 1. 后台设置content-type 第一步是需要后台在返回数据时设置content-type为“application/octet-stream”,这个content-type是…

    JavaScript 2023年6月11日
    00
  • Javascript 日期对象Date扩展方法

    JavaScript 日期对象 Date 扩展方法是用于处理日期时间的工具,对于处理时间日期的任务非常有用。本文将深入地探讨 JavaScript 日期对象 Date 的基本知识和常见的扩展方法,让你掌握 JavaScript 中的日期和时间处理。 什么是 JavaScript 日期对象 Date? JavaScript Date 对象是用来处理日期和时间的…

    JavaScript 2023年5月27日
    00
  • js对象关系图 方便dom操作

    JS对象关系图可以用来表示JS中各个对象之间的关系,有利于我们进行DOM操作。以下是实现的详细步骤: 安装JS对象关系图库 我们可以通过npm来安装JS对象关系图库,命令如下:npm install object-graph-js。 创建DOM对象 在接下来的实例中,我们将创建一个包含“Hello, World”的div元素,代码如下: const divE…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部