Question

enum PageUrl {
  Home_Page_Url = 'home',
  Setting_Page_Url = 'setting',
  Share_Page_Url = 'share',
}

const home = PageUrl.Home_Page_Url;

使用枚举拥有了更好的类型提示，并且这些常量被真正地约束在一个命名空间下。

如果没有声明枚举的值，它会默认使用数字枚举，并且从 0 开始，以 1 递增。

enum Items {
  Foo,
  Bar,
  Baz,
}

在这个例子中，Items.Foo、Items.Bar、Items.Baz 的值依次是 0、1、2。

如果只为某一个成员指定了枚举值，那么之前未赋值成员仍然会使用从 0 递增的方式，之后的成员则会开始从枚举值递增。

enum Items {
  // 0
  Foo,
  Bar = 18,
  // 19
  Baz,
}

在数字型枚举中，可以使用延迟求值的枚举值，比如函数。

const returnNum = () => 100 + 18;
enum Items {
  Foo = returnNum(),
  Bar = 18,
  Baz,
}

但要注意，延迟求值的枚举值是有条件的。如果使用了延迟求值，那么没有使用延迟求值的枚举成员必须放在使用常量枚举值声明的成员之后，或者放在第一位。

enum Items {
  Baz,
  Foo = returnNum(),
  Bar = 18,
}

也可以同时使用字符串枚举值和数字枚举值。

enum Mixed {
  Num = 18,
  Str = 'wangxiaobai'
}

枚举和对象的重要差异在于，对象是单向映射的，只能从键映射到键值。而枚举是双向映射的，可以从枚举成员映射到枚举值，也可以从枚举值映射到枚举成员。

enum Items {
  Foo,
  Bar,
  Baz,
}

const fooValue = Items.Foo; // 0
const fooKey = Items[0]; // 'Foo'

要了解这一现象的本质，需要来看一看枚举的编译产物，如以上的枚举会被编译为以下 JavaScript 代码：

"use strict";
var Items;
(function (Items) {
  Items[Items["Foo"] = 0] = "Foo";
  Items[Items["Bar"] = 1] = "Bar";
  Items[Items["Baz"] = 2] = "Baz";
})(Items || (Items = {}));

obj[k] = v 的返回值即是 v，因此这里的 obj[obj[k] = v] = k 本质上就是进行了 obj[k] = v 与 obj[v] = k 这样两次赋值。

仅有值为数字的枚举成员才能够进行这样的双向枚举，字符串枚举成员仍然只会进行单次映射：

enum Items {
  Foo,
  Bar = 'BarValue',
  Baz = 'BazValue'
}

// 编译结果，只会进行 键-值 的单向映射
"use strict";
var Items;
(function (Items) {
  Items[Items["Foo"] = 0] = "Foo";
  Items["Bar"] = "BarValue";
  Items["Baz"] = "BazValue";
})(Items || (Items = {}));

常量枚举

常量枚举和枚举相似，只是其声明多了一个 const。

const enum Items {
  Foo,
  Bar,
  Baz,
}

const fooValue = Items.Foo;

它和普通枚举的差异主要在访问性与编译产物。对于常量枚举，只能通过枚举成员访问枚举值（而不能通过值访问成员）。同时，在编译产物中并不会存在一个额外的辅助对象（如上面的 Items 对象），对枚举成员的访问会被直接内联替换为枚举的值。

以上的代码会被编译为如下形式：

const fooValue = 0 /* Foo */; // 0