TypeScript 數據類型---枚舉 (Enum)

一、基礎用法

1.默認值

從0開始遞增+1

enum Color {Red, Green, Blue}
let c: Color = Color.Red;
let d: Color = Color.Green;
let e: Color = Color.Blue;
console.log('enum',c,d,e) //0,1,2

 

2.手動設置初始值

第一位未設置的默認0,后面遞增.遇到有初始值的,后面的按照初始值+1.

enum Color {Red, Green=2, Blue}
let c: Color = Color.Red;
let d: Color = Color.Green;
let e: Color = Color.Blue;
console.log('enum',c,d,e) //0,2,3

enum Color {Red, Green=2, Blue,Yellow=7 ,Dark}
let c: Color = Color.Red;
let d: Color = Color.Green;
let e: Color = Color.Blue;
let f: Color = Color.Yellow;
let g: Color = Color.Dark;
console.log('enum',c,d,e,f,g) //0 2 3 7 8

 

3.屬性獲取

在賦予初始值的時候是以鍵值對的形式給的,那怎么拿到'鍵'呢?

enum Color {Red, Green=2, Blue,Yellow=7 ,Dark}
let c1: string = Color[0];
let c: Color = Color.Red;
let d1: string = Color[1];
let d: Color = Color.Green;
let e1: string = Color[2];
let e: Color = Color.Blue;
let f1: string = Color[3];
let f: Color = Color.Yellow;
let g1: string = Color[4];
let g: Color = Color.Dark;
console.log('enum',c1,c,d1,d,e1,e,f1,f,g1,g) //Red 0 undefined 2 Green 3 Blue 7 undefined 8

奇怪的是,為啥會有undefined.這里大膽猜測一下這里的索引,即[0]這里面的0代表的是鍵所對應的值,因為沒有一個鍵的值是1或者4,所以[1],[4]是undefinend.驗證一下

let test: string = Color[8]; //Dark

至少目前看來確實是這樣的,屬性獲取時按照屬性對應的值來獲取的.

 

4.設置初始值為字符串

假如設置的字符串不是最后一位,那后面的屬性將無法設置默認值.我們之前說過要遞增+1,如果前一個是字符串,ts將無法處理初始化.

enum Color {Red, Green=2, Blue,Yellow='b' ,Dark='b'}
let g: Color = Color.Dark;
let test: string = Color['b'];
console.log('enum',g,test) //b undefined

同時我們,發現,並不能用字符串值拿到鍵位值,那么怎么拿到呢?經過查詢資料得知,字符串賦值之后不進行反向映射.故拿不到對應鍵位值.

 

5.設置初始值為表達式(其他)

基本是只要能拿到數值的表達式都可以,但是只要有一個字符串即使它在最后一個,也不能用表達值

總結一下:枚舉成員可以是純數值,純字符串,混合三種情況.涉及字符串混合的限制條件比較多,所以盡量避免字符串的混合.

 

二、翻譯結果

要想明白枚舉的用法,最直接的方式就是看翻譯成js后的代碼.以默認值為例子

ts

enum Color {Red, Green, Pink, Blue,Yellow ,Dark}
let g: Color = Color.Dark;
let h: string = Color[5]

js

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Pink"] = 2] = "Pink";
    Color[Color["Blue"] = 3] = "Blue";
    Color[Color["Yellow"] = 4] = "Yellow";
    Color[Color["Dark"] = 5] = "Dark";
})(Color || (Color = {}));
var g = Color.Dark;
var h = Color[5];

就拿第一個"Red"為例,先是聲明了一個變量Color,然后Color["Red"]=0,也就是說給Color新增了一個"Red"屬性,並且值為0.然后Color[0]="Red",同時Color新增了一個'0'索引,其對應值為Red.

那其他情況呢?

字符串

ts

enum Color {Red, Green, Pink=7, Blue,Yellow ,Dark=''}
let g: Color = Color.Dark;
let h: string = Color[5]

js

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Pink"] = 7] = "Pink";
    Color[Color["Blue"] = 8] = "Blue";
    Color[Color["Yellow"] = 9] = "Yellow";
    Color["Dark"] = "";
})(Color || (Color = {}));
var g = Color.Dark;
var h = Color[5];

所以必須跟js的數組區分開來,他們的索引並不是按位置排列的.而是初始值.

 

總結:1.添加的索引為賦予的值,沒有就是默認值.2.字符串並沒有添加索引,所以無法根據值獲得鍵.