[TOC] >[success] # 枚舉（Enum） 本章節講一下 **枚舉（Enum）** ，**枚舉（Enum）** 對于 **前端開發者** 也是一個全新的概念，它非常好理解，在 **js** 中有 **常量（ const）** ，**常量（ const）** 是指在**執行程序中，不會改變的值** ，在 **js** 中我們會用 **const 聲明常量** ，但是 **有些取值是在一定范圍內的一系列的常量，比如說我們一周內的七天（周一到周日），三原色（紅、黃、藍），四個方位（上、下、左、右）** 等等，這些值就可以用 **枚舉（Enum）** 來表示。 >[success] ## 數字枚舉（Enum） 1. **數字枚舉（Enum）舉例** **枚舉（Enum）** 成員會被 **賦值成 0 開始 ，自動遞增的一個數字** ，**Up** 是 **0** ， **Down** 是 **1** **index.ts** ~~~ enum Direction { Up, Down, Left, Right } console.log(Direction.Up) // 0 console.log(Direction[0]) // Up ~~~ **枚舉（Enum）** 就像一個雙向映射一樣，可以用 **數組** 來 **取枚舉成員的屬性字符串** ，用 **對象來取枚舉成員的值** 。 **編譯后** ： 編譯成 **js文件** 就是下面這樣，首先是一個**自執行函數** ，封裝了自己的一個 **作用域** ，其中 **Direction["Up"] = 0** 是用來 **自我解釋** ，它會將 **Direction["Up"] = 0** 中的 **0** ，設為 **Direction[0] = "Up"** 的 **索引** ~~~ var Direction; (function (Direction) { Direction[Direction["Up"] = 0] = "Up"; Direction[Direction["Down"] = 1] = "Down"; Direction[Direction["Left"] = 2] = "Left"; Direction[Direction["Right"] = 3] = "Right"; })(Direction || (Direction = {})); console.log(Direction.Up); // 0 console.log(Direction[0]); // Up ~~~ 2. **值遞增** 如果 **給枚舉成員賦一個 number 值** ，它會 **從賦值這個成員開始向后遞增數字** ，如下代碼： **index.ts** ~~~ enum Direction { Up, // 0 Down = 10, // 10 Left, // 11 Right // 12 } console.log(Direction.Down) // 10 console.log(Direction[2]) // undefined ~~~ 上面 **Direction[2]** 為什么會是 **undefined** 呢？正常情況下 **0 是 Up** 、 **1 是 Down** 、 **2 是 Left** ， 因為 **Down** 被 **賦值成 10** ，也就是說**Down** 的 **索引是 10** ，**Left** 的 **索引** 應該是 **11** ，要這樣寫 **console.log(Direction[11])** 才能打印出 **Left** >[success] ## 字符串枚舉（Enum） **字符串枚舉** 就是 **給它每一項都加一個字符串的值** ， **不可以有的成員有字符串值，有的成員沒有字符串值** ， **字符串枚舉** 可以用來做一個 **簡單的字符串的比較** ，如下： **index.ts** ~~~ enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT' } const value = 'UP' // 用來做判斷 if(value === Direction.Up){ console.log('go Up!') } ~~~ >[success] ## 常量枚舉（Enum） **常量枚舉（Enum）** 可以**提升性能** ，因為 **Typescript 文件** 在編譯后， **枚舉（Enum）** 會 **多出來一大堆的代碼** ，那是不是所有的 **Enum** 都可以使用 **常量枚舉** 呢， **答案是否定的** ， **枚舉的值有 2 種類型** ，一種是 **常量（cosnt）值** ，一種是 **計算（computed）值** ，**只有常量值可以進行常量枚舉** ，我們這里舉例的都是 **常量值** ， **計算值** 我們后期會講到。 1. **未用const 的 枚舉（Enum）** **index.ts** ~~~ enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT' } const value = 'UP' // 用來做判斷 if(value === Direction.Up){ console.log('go Up!') } ~~~ **編譯之后成 js 文件 之后** ~~~ var Direction; (function (Direction) { Direction["Up"] = "UP"; Direction["Down"] = "DOWN"; Direction["Left"] = "LEFT"; Direction["Right"] = "RIGHT"; })(Direction || (Direction = {})); var value = 'UP'; // 用來做判斷 if (value === Direction.Up) { console.log('go Up!'); } ~~~ 2. **用 const 的 枚舉（Enum）** ~~~ const enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT' } const value = 'UP' // 用來做判斷 if(value === Direction.Up){ console.log('go Up!') } ~~~ **編譯之后成 js 文件 之后** ~~~ var value = 'UP'; // 用來做判斷 if (value === "UP" /* Up */) { console.log('go Up!'); } ~~~