前端面试题：枚举和常量枚举的区别

大叔爱吃猕猴桃

在 TypeScript 中，枚举（enum） 和 常量枚举（const enum） 都用于定义一组命名的常量，但它们之间有一些重要的区别。下面是它们的主要区别及使用场景：

1. 定义方式

普通枚举（enum）：

普通枚举在编译时会生成一个对象，包含枚举成员及其对应的值。在代码中使用枚举成员时，TypeScript 会将其替换为相应的值。

  enum Color {
    Red = 1,
    Green,
    Blue
  }

  let colorName: string = Color[2]; // 'Green'
  let colorValue: number = Color.Red; // 1

常量枚举（const enum）：

常量枚举在编译时不会生成对象代码，而是将所有的枚举成员值直接内联到代码中。这使得 const enum 更高效，但也失去了反向映射的功能。

  const enum Color {
    Red = 1,
    Green,
    Blue
  }

  let colorValue: number = Color.Red; // 1

在编译后，Color.Red 会被直接替换为 1，而不会生成 Color 对象。

2. 反向映射

普通枚举：

普通枚举会生成一个包含反向映射的对象，使得可以通过值找到对应的枚举名称。

  enum Color {
    Red = 1,
    Green,
    Blue
  }

  console.log(Color[2]); // 'Green'

常量枚举：

常量枚举不生成反向映射对象。它只会在编译时内联值，因此无法通过值获取对应的枚举名称。

  const enum Color {
    Red = 1,
    Green,
    Blue
  }

  // 无法通过值获取名称
  // console.log(Color[2]); // 编译错误

3. 编译后的输出

普通枚举：

编译后会生成一个包含所有枚举值的对象。

  var Color;
  (function (Color) {
      Color[Color["Red"] = 1] = "Red";
      Color[Color["Green"] = 2] = "Green";
      Color[Color["Blue"] = 3] = "Blue";
  })(Color || (Color = {}));

常量枚举：

编译后不会生成额外的对象，枚举值会被直接替换到代码中。

  var colorValue = 1; // 直接内联值

4. 性能

普通枚举：

由于生成了对象，普通枚举在运行时会有一定的开销。
常量枚举：

常量枚举由于不生成对象，只是在编译时内联值，因此在性能上更优。

5. 使用场景

普通枚举：适用于需要枚举值和名称双向映射的场景，例如调试、日志记录等。
常量枚举：适用于性能要求较高的场景，或者不需要反向映射的场合，例如常量值的替代。