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

简介: 前端 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
0
15
分享
相关文章
【前端学java】Java中的接口和枚举概念(8)
【8月更文挑战第9天】Java中的接口和枚举概念(8)
66 4
【前端学java】JDBC快速入门
【8月更文挑战第12天】JDBC快速入门
57 2
【前端学java】JDBC快速入门
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
【8月更文挑战第8天】10min快速入门java的基础语法
73 2
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
前端掌握 ts 的类型体操
【8月更文挑战第23天】前端掌握 ts 的类型体操
78 4
vue 快速入门+vite前端构建工具
vue 快速入门+vite前端构建工具
136 0
前端 TS 快速入门之三:class 类
前端 TS 快速入门之三:class 类
164 1
|
10月前
|
前端 TS 快速入门之五:泛型 T
前端 TS 快速入门之五:泛型 T
143 0
前端 TS 快速入门之四:函数
前端 TS 快速入门之四:函数
55 0
|
10月前
|
前端 TS 快速入门之二:接口
前端 TS 快速入门之二:接口
87 0
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
427 14

热门文章

最新文章