本篇文章給大家介紹一下TypeScript中Enum（枚舉）語法，聊聊Enum的基本用法，如何使用原生JavaScript來實現(xiàn)Enum。

Enum

Enum 是在 TypeScript 中新增的語法，也叫做枚舉，一般用它來管理多個相同系列的常量（即不能被修改的變量），用于狀態(tài)的判斷。

在 Web 中比較常見的狀態(tài)判斷，是在處理請求時，要針對不同的響應(yīng)狀態(tài)碼做對應(yīng)的處理：

const handleResponseStatus = (status: number): void => {   switch (status) {     case 200: // 請求成功時       // Do something...       break;     case 400: // 請求失敗時       // Do something...       break;     default:       throw (new Error('No have status code!'));   } };

但因為響應(yīng)狀態(tài)碼都是預(yù)先定義好的，所以沒什么爭議，代碼寫成這樣看也很正常，但是如果后端在服務(wù)器發(fā)生錯誤時自定義了一些編碼，并告訴前端，這些代碼都代表什么錯誤，那么上面的函數(shù)可能會變成這樣：

const handleWrongStatus = (status: string): void => {   switch (status) {     case 'A':       // Do something...       break;     case 'B':       // Do something...       break;     case 'C':       // Do something...       break;     default:       throw (new Error('No have wrong code!'));   } };

如果是這種代碼，別說是剛接手的人，就算是你自己兩星期前寫的，恐怕不去翻文檔也想不起它們都代表什么了吧。

但是如果善用 Enum ，就可以避免上述發(fā)生的情況。

基本用法

先來看看 Enum 該怎么定義，它和 Object 的用法很像：

enum requestStatusCodes {   error,   success, }

不需要在內(nèi)容與名稱之間加等號，直接在大括號內(nèi)敘述該 Enum 中具有哪些變量，與其說是變量，不如說是常量更恰當(dāng)些，因為在 Enum 中的值是不可修改的，所以也不必?fù)?dān)心這些定義好的規(guī)則會在代碼執(zhí)行的過程中發(fā)生改變，導(dǎo)致執(zhí)行錯誤。

而既然 Enum 是用來定義同一個系列常量的，那這些常量應(yīng)該都能維護(hù)特定的值。沒錯，在 Enum 中的每個常量，都可以通過 = 來指定具體的值 。

但如果是像前面的 requestStatusCodes ，沒有為 error 或 success 指定具體的值也不會出錯，因為 TypeScript 會從 0 開始自動遞增定義值，所以簽名的 requestStatusCodes 會和下面的結(jié)果相同：

enum requestStatusCodes {   error = 0,   success = 1, }console.log(requestStatusCodes.error) // 0 console.log(requestStatusCodes.success) // 1

除了數(shù)字外，也可以定義為字串：

enum requestWrongCodes {   missingParameter = 'A',   wrongParameter = 'B',   invalidToken = 'C', }console.log(requestWrongCodes.wrongParameter) // 'B'

當(dāng)然也可以在一個 enum 中設(shè)定不同的類型，但這樣一點意義都沒有：

enum requestStatusCodes {   error = 0,   success = 'OK', }

了解基本的 Enum 怎么定義后，接著就來改寫前面代碼中的 handleResponseStatus 和 handleWrongStatus ，讓它們在語義上能夠更明確。

首先用 Enum 定義兩者的狀態(tài)描述：

enum requestStatusCodes {   error = 400,   success = 200, }  enum requestWrongCodes {   missingParameter = 'A',   wrongParameterType = 'B',   invalidToken = 'C', }

然后修改 handleResponseStatus 和 handleWrongStatus 中的 Switch 判斷：

const handleResponseStatus = (status: number): void => {   switch (status) {     case requestStatusCodes.success:       // Do something...       break;     case requestStatusCodes.error:       // Do something...       break;     default:       throw (new Error('No have status code!'));   } };  const handleWrongStatus = (status: string): void => {   // 如果覺得 requestWrongCodes.missingParameter 太長了，也可以用以下方式：   const { missingParameter, wrongParameterType, invalidToken, } = requestWrongCodes;   switch (status) {     case missingParameter:       // Do something...       break;     case wrongParameterType:       // Do something...       break;     case invalidToken:       // Do something...       break;     default:       throw (new Error('No have wrong code!'));   } };

修改后的代碼就變得直觀多了，因為狀態(tài)碼都被放到了 Enum 中統(tǒng)一管理，所以就能用常量名來代表它們，之后不管過了多久，可以明確的知道這里再做什么，甚至連注解或文檔都不用寫了，因為代碼就是最好的文檔。

善用 Enum 能使代碼絕對是不可或缺的，但就算沒使用 TypeScript 也別灰心，因為 TypeScript 最終會被轉(zhuǎn)換為 JavaScript ，那來看看如何直接用 JavaScript 實現(xiàn) Enum 吧！

用原生 JavaScript 實現(xiàn) Enum

在前面說過 Enum 很像 Object ，如果研究一下 Enum 被編譯成 javascript 之后的代碼，就會發(fā)現(xiàn)還真的是 Object。

Enum 被編譯后會變成 Key 和 Value 反向?qū)?yīng)的對象，這樣看起來非常簡單，為了方便使用，下面把它的編譯方式寫成一個函數(shù)：

const newEnum = (descriptions) => {   const result = {};   Object.keys(descriptions).forEach((description) => {     result[result[description] = descriptions[description]] = description;   });   return result; };  const responseStatus = newEnum({   error: 400,   success: 200, });  // { '200': 'success', '400': 'error', error: 400, success: 200 } console.log(responseStatus);

雖然得到的結(jié)果相同，但是喪失了 Enum 中最可貴的常量特色，如果不能讓它變成不可修改，那就有可能會在代碼里不經(jīng)意地改動它，導(dǎo)致執(zhí)行結(jié)果可能出錯，于是可以在最后利用 Object.freeze() ，讓外部操作無法新增、刪除或重新定義任何 Property ：

const newEnum = (descriptions) => {   const result = {};   Object.keys(descriptions).forEach((description) => {     result[result[description] = descriptions[description]] = description;   });   return Object.freeze(result); };  const responseStatus = newEnum({   error: 400,   success: 200, });  // 即使不小心修改了 responseStatus['200'] = 'aaaaaaaa';  // 仍然是 { '200': 'success', '400': 'error', error: 400, success: 200 } console.log(responseStatus);

這樣就能簡單在 JavaScript 中實現(xiàn) Enum 了。

const Enum 的用法

從前面的 JavaScript 代碼中可以看到 Enum 編譯過后會變成 Key 和 Value 互相對應(yīng)的 Object ，也就是說不管是用 Key 還是Value 都可以取出對應(yīng)的值，

但是如果用 const 聲明 Enum ，編譯之后就不會產(chǎn)生 Object。

直接看例子，假設(shè)我把 responseState 用 const 重新生命，且也是以 handleResponseStatus 使用該 Enum 做判斷：

enum responseStatus {   error = 400,   success = 200, }  const handleResponseStatus = (status: number): void => {   switch (status) {     case responseStatus.success:       console.log('請求成功！');       break;     case responseStatus.error:       console.log('請求失??！');       break;     default:       throw (new Error('No have status code!'));   } };

看起來一切正常，不過在編譯后的 JavaScript 中，會發(fā)現(xiàn) Enum 并沒有產(chǎn)生 Object ，而是直接用 const 聲明在 Enum 中的值。

用 const 聲明 Enum 有幾個好處：

• 假設(shè)要用到的 Enum 非常多，那在執(zhí)行時就會不停地使用 IIFE 產(chǎn)生 Object 將 Key 和 Value 綁定到 Object，會造成一些效率上的損失，也會增加內(nèi)存，但是 const 并不會產(chǎn)生 Object ，也就不會有以上的問題。

• 就算到的 Enum 不多，判斷時也需要一直從 Object 中找出對應(yīng)的值，而如果是用 const 聲明 Enum ，在編譯成 JS 時就將聲明的值直接放入判斷中。

不過這樣也就沒法從 Enum 中反向取值了，因為它并不會產(chǎn)生對象：

const enum responseStatus {   error = 400,   success = 200, }// 會出錯，因為已經(jīng)沒有對象可供查找了 console.log(responseStatus[400])// 但這個不會有問題，因為編譯的時候會直接填值 console.log(responseStatus.error)// 編譯后： // console.log(400)