JavaScript 中的枚举介绍和使用

Question

虽然 enum 是 JavaScript 中的保留字，JavaScript 不支持传统的枚举。 定义枚举相当容易 使用 JavaScript 中的对象 。 例如，TypeScript 支持 enums：

enum Direction {
  Up,
  Down,
  Left,
  Right
}

在运行时，TypeScript 将上面的代码编译成下面的类枚举对象：

const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};

该对象具有您期望从枚举中获得的大部分功能：

1. 获取所有允许的枚举值： Object.keys(Direction) 返回一个数组 ['Up', 'Down', 'Left', 'Right']
2. 检查一个值是否等于一个枚举值： val === Direction.Up
3. 检查枚举中是否有值： Direction.hasOwnProperty('Up')

但是，有几个限制：

1. 您可以在实例化后修改枚举。 例如 Direction.sideways = 'sideways'。
2. 如果 val === undefined， 然后 val === Direction.notAnEnumValue和 val === Direction.Downe，因此枚举属性中的拼写错误可能会导致问题。
3. 不保证属性值不冲突。 Direction.Down = 'Up' 已验证。

您可以 使 JavaScript 对象不可变使用 Object.freeze()，使用 Object.freeze() 和一个函数，您可以解决限制 (1) 和 (3)。

function createEnum(values) {
  const enumObject = {};
  for (const val of values) {
    enumObject[val] = val;
  }
  return Object.freeze(enumObject);
}

// { Up: 'Up', Down: 'Down', Left: 'Left', Right: 'Right' }
createEnum(['Up', 'Down', 'Left', 'Right']);

基于类的方法

的更复杂的方法 这篇博客文章 使用 JavaScript 类 。他的方法看起来更像这样：

class Direction {
  static Up = new Direction('Up');
  static Down = new Direction('Down');
  static Left = new Direction('Left');
  static Right = new Direction('Right');

  constructor(name) {
    this.name = name;
  }
  toString() {
    return `Color.${this.name}`;
  }
}

以下是您如何使用 Direction班级：

1. 获取所有允许的枚举值： Object.keys(Direction) 返回一个数组 ['Up', 'Down', 'Left', 'Right']
2. 检查一个值是否等于一个枚举值： val === Direction.Up.name
3. 检查枚举中是否有值： Direction.Up instanceof Direction

这种方法很有趣，甚至还有一个 enumify npm 包 可以实现这种基本方法以及额外的语法糖。 这种方法还有一个好处是 Direction.Downe.name 抛出错误，这意味着您不会意外检查 undefined === undefined 如果您输入了枚举属性。

但是，我们通常建议使用 Object.freeze()在 POJO 上表示枚举。 Enumify 确实提供了一些优势和一些简洁的语法糖，但我们认为 POJO 可以以更少的开销为您提供大部分优势。