TS 枚举 转化为 数组

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 适合的场景是，内部成员的值不重要，名字反而更重要，从而增加代码的可读性和可维护性。