1. 枚举使用
const RED = 1;
const GREEN = 2;
const BLUE = 3;
在 JS 中大量定义变量的操作很繁琐,因此 TypeScript 设计了 Enum 结构。
Enum 结构特别之处在于,它既是一种类型,也是一个值。
大部分 TypeScript 语法都是类型语法,编译后会被删除,但是 Enum 是一个值,编译后会变成 JavaScript 对象,反而会留在代码中。
枚举的简单使用:
Enum 成员默认无需赋值,系统会从零开始逐一递增,按照顺序赋值,比如 0、1、2……
enum Color {
Red,
Green,
Blue
}
// 等同于
enum Color {
Red = 0,
Green = 1,
Blue = 2
}
// 编译后
let Color = {
Red: 0,
Green: 1,
Blue: 2
};
let value:Color = Color.Red; // 0
也可以显示给 Enum 指定值,成员可以赋任何联系的值,除了 Bigint 类型。
enum Color {
Red = 10,
Green = 12,
Blue = 14
}
enum Color {
Red = 'Red',
Green = 'Green',
Blue = 'Blue'
}
注意:Enum 成员值均是只读的,不能重新赋值,否则报错。通常会在 enum 前面加上const
修饰,表示这是常量。
const enum Color {
Red,
Green,
Blue
}
2. 转化为数组
举例 🌰 :
enum ColorEnum {
Red = 1,
Green = 2,
Blue = 3
}
1、使用 Object.keys() 方法
const colorObj1 = Object.keys(ColorEnum);
// colorObj1 显示为:['1', '2', '3', 'Red', 'Green', 'Blue']
注意:keys 方法返回数组的每一项都是字符串类型。
const obj1 = Object.keys(ColorEnum).filter((item) => typeof item === 'number');
const obj2 = Object.keys(ColorEnum).filter((item) => typeof item === 'string');
// obj1: []
// obj2: ['1', '2', '3', 'Red', 'Green', 'Blue']
2、使用 Object.values() 方法
const colorObj2 = Object.values(ColorEnum);
// colorObj2 显示为:['Red', 'Green', 'Blue', 1, 2, 3]
注意:values 方法返回数组,既有数字类型又有字符串类型。
const obj1 = Object.values(ColorEnum).filter((item) => typeof item === 'number');
const obj2 = Object.values(ColorEnum).filter((item) => typeof item === 'string');
// obj1: [1, 2, 3]
// obj2: ['Red', 'Green', 'Blue']
3、使用 Object.entries() 方法
const colorObj3 = Object.entries(ColorEnum);
// colorObj3 显示为:[Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
[
[ "1", "Red" ],
[ "2", "Green" ],
[ "3", "Blue" ],
[ "Red", 1 ],
[ "Green", 2 ],
[ "Blue", 3 ],
]
4、[ ] 直接放在空数组里
const colorObj4 = [ColorEnum];
// colorObj4 显示如下:
[
{
"1": "Red",
"2": "Green",
"3": "Blue",
"Red": 1,
"Green": 2,
"Blue": 3
}
]
大家可以根据上面返回的数组类型,进行下一步操作。
比如:entries 方法
const obj = Object.entries(ColorEnum);
const objArray = [];
for (const [key, value] of obj) {
objArray.push({ color: key, value });
}
// objArray 显示为:
[
{ color: '1', value: 'Red' },
{ color: '2', value: 'Green' },
{ color: '3', value: 'Blue' },
{ color: 'Red', value: 1 },
{ color: 'Green', value: 2 },
{ color: 'Blue', value: 3 },
];
当每一个成员的名称和值相同时,Object.values() 和 Object.keys() 返回值相同。
enum ColorEnum {
Red = 'Red',
Green = 'Green',
Blue = 'Blue'
}
const obj1 = Object.keys(ColorEnum);
const obj2 = Object.values(ColorEnum);
// obj1: ['Red', 'Green', 'Blue']
// obj2: ['Red', 'Green', 'Blue']
const obj3 = Object.entries(ColorEnum);
for (const [key, value] of obj3) {
console.log(key === value); // true
}
总结:Enum 适合的场景是,内部成员的值不重要,名字反而更重要,从而增加代码的可读性和可维护性。