前端 TS 快速入门之六:枚举 enum

1. 数字枚举

枚举类型的值是数字类型,因此它们被称为数字类型枚举,成员的值可以不用初始化,因为具有自增行为。

// 默认自增
enum Person {
  name,
  age,
}
Person.name; // 0
Person.age; // 1

// 可人为自行修改
enum Person {
  name = 2,
  age = 1,
}
Person.name; // 2
Person.age; // 1

2. 数字枚举的反向映射

数字枚举成员还具有 反向映射 的特性,从枚举值到枚举名字,要注意的是 不会为字符串枚举成员生成反向映射。

enum Person {
  name,
  age,
}
Person; // { '0': 'name', '1': 'age', name: 0, age: 1 }
Person[1]; // age

enum Person {
  name = "名字",
  age = "年龄",
}
Person; // { name: '名字', age: '年龄' }

 3. 字符串枚举

在一个字符串枚举里,每个成员都必须用字符串字面量,或另外一个字符串枚举成员进行初始化。

enum Person {
  name = "名字",
  age = "年龄",
}
Person.name; // 名字
Person.age; // 年龄

4. 异构枚举

枚举可以混合字符串和数字成员,但一般没必要这么做。

enum Person {
  name = 1,
  age = 2,
  man = "男",
  wuman = "女",
}
Person.name; // 1
Person.man; // 男

5. 常量枚举

用 const 修饰符来定义,常量枚举不同于常规的枚举,他们会在编译阶段被删除。

因此常量枚举会带来一个对性能的提升。

const enum Size {
  WIDTH = 10,
  HEIGHT = 20,
}
const area = Size.WIDTH * Size.HEIGHT; // 200
Size; // 'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query

上一章:前端 TS 快速入门之五:泛型 T

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端枚举类型enum的用法有多种方式可以实现。一种常见的用法是在JavaScript中使用对象字面量来定义枚举类型。例如: ``` const ClassEnum = { CLASSA: 1, CLASSB: 2, CLASSC: 3 }; ``` 可以通过`ClassEnum.CLASSA`来访问枚举值。这种方式可以直接使用枚举值,但没有提供其他方法来操作枚举类型。 另一种常见的用法是使用ES6的class来定义枚举类型。可以定义一个Enum类,然后在其中定义枚举值作为类的静态属性。例如: ``` class Enum { static CLASSA = new Enum(1, "A类"); static CLASSB = new Enum(2, "B类"); static CLASSC = new Enum(3, "C类"); constructor(num, desc) { this.num = num; this.desc = desc; } } ``` 可以通过`Enum.CLASSA`来访问枚举值,并且还可以定义其他方法来操作枚举类型。 另外,如果使用的是TypeScript,它提供了原生的枚举类型的支持。可以使用`enum`关键字来定义枚举类型。例如: ``` enum ClassEnum { CLASSA = 1, CLASSB = 2, CLASSC = 3 } ``` 可以通过`ClassEnum.CLASSA`来访问枚举值。 总结来说,前端枚举类型enum的用法可以通过对象字面量、class或TypeScript的`enum`关键字来实现。具体使用哪种方式取决于你的项目需求和个人偏好。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [枚举类(ENUM)用法总结](https://blog.csdn.net/lulueee/article/details/114277518)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [枚举类型Enum的用法](https://blog.csdn.net/LCW0102/article/details/124550969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yqcoder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值