TypeScript枚舉類型
1.概述
所謂的枚舉類型就是為一組數(shù)值賦予名字。
enum類型在C++、Java語(yǔ)言中比較常見,TypeScript在JavaScript原有的類型基礎(chǔ)上也增加了enum類型。
比如我們需要定義一組角色,需要使用數(shù)字表示,就可以使用如下代碼定位:
enum role{
STUDENT,
TEACHER,
ADMIN
}
上面代碼中我們定義了role為一個(gè)枚舉類型,這個(gè)里面有是三個(gè)值,TypeScript會(huì)為每個(gè)值自動(dòng)的分配序號(hào),默認(rèn)從0開始依次排列,它們的值依次為0 1 2。
當(dāng)然我們也可以自定義每個(gè)值,如果非全部定義則后面的值會(huì)根據(jù)前面的值自增。
示例代碼如下:
enum role1 {
student = 1,
// 后面兩個(gè)值依次為2 3
teacher,
admin,
}
enum role2 {
// 每個(gè)名具有指定的值
student = 1,
teacher = 3,
admin = 6,
}
2.數(shù)字枚舉
我們上面介紹的例子就是數(shù)字枚舉類型,但是還有一個(gè)注意點(diǎn)就是如果某個(gè)字段使用了常量或者計(jì)算后的值 ,我們就必須設(shè)置緊跟著字段的初始值 ,否則將會(huì)拋出異常。
示例代碼如下:
;(function () {
// 定義一個(gè)函數(shù)
const getValue: () => number = (): number => {
return 0
}
enum role1 {
student = getValue(),
// teacher, // error 枚舉成員必須具有初始化表達(dá)式。
// admin, // error 枚舉成員必須具有初始化表達(dá)式。
}
const TEACHER_ROLE: number = 3
// 每個(gè)名具有指定的值
enum role2 {
student,
teacher = TEACHER_ROLE,
// admin, // error 枚舉成員必須具有初始化表達(dá)式。
}
})()
2.1反向映射
所謂的反向映射就是可以通過(guò)key訪問(wèn)到value,通過(guò)value訪問(wèn)到key。
我們可以通過(guò).名稱或者['名稱']的方式取到每個(gè)具體的值,也可以通過(guò)[數(shù)值]的方式取到每個(gè)數(shù)值對(duì)應(yīng)的名稱,
示例代碼如下:
enum role {
student,
teacher,
admin,
}
console.log(role.admin) // 2
console.log(role['teacher']) //1
console.log(role[0]) //‘student'
其實(shí)TypeScript中的枚舉類型編譯成JavaScript代碼之后就是一個(gè)對(duì)象,我們將上面那個(gè)枚舉類型編譯一下,
編譯后的代碼如下:
"use strict";
var role;
(function (role) {
role[role["student"] = 0] = "student";
role[role["teacher"] = 1] = "teacher";
role[role["admin"] = 2] = "admin";
})(role || (role = {}));
這樣看我們可能好理解,其實(shí)就是通過(guò)一個(gè)自調(diào)函數(shù)將值賦值給role對(duì)象,賦值之后如下:
var role = {
"student": 0,
"teacher": 1,
"admin" : 2,
0: "student",
1: "teacher",
2: "admin",
}
值得注意的是 反向映射僅僅支持在數(shù)字枚舉 中,不支持在2.4版本中新增的字符串枚舉 中。
3.字符串枚舉
所謂的字符串枚舉就是枚舉中的每個(gè)字段的值必須都是字符串,或者是枚舉中的其他字段,
示例代碼如下:
enum Person {
name = '一碗周',
hobby = 'coding',
// 設(shè)置枚舉中的字段作為值
myName = name,
}
console.log(Person.name, Person.myName) // 一碗周 一碗周
4.const枚舉
在我們定義了普通枚舉之后,被編譯成JavaScript代碼之后會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的對(duì)象,如果使用枚舉是增了增加程序的可讀性,且并不需要編譯之后的對(duì)象。在TypeScript1.4中增加了const枚舉。
const枚舉被翻譯為完全嵌入枚舉 ,所謂的完全嵌入枚舉就是編譯之后沒(méi)有對(duì)應(yīng)的對(duì)象,只是從枚舉中拿到對(duì)應(yīng)你的值然后進(jìn)行替換。定義const枚舉只需要在普通枚舉前面加上const關(guān)鍵字。
示例代碼如下:
const enum role {
student,
teacher,
admin,
}
let admin = role.admin
如上代碼會(huì)被編譯為如下:
let admin = 2 /* admin */;
5.總結(jié)
這篇文章介紹了兩種基本的枚舉類型:數(shù)字枚舉 和字符串枚舉 ,數(shù)組枚舉還有一個(gè)反射映射的概念,就是可以通過(guò)key訪問(wèn)value,通過(guò)value可以訪問(wèn)key;最后我們還介紹了const枚舉,就是編譯后不生成所謂的枚舉對(duì)象。
到此這篇關(guān)于TypeScript枚舉類型的文章就介紹到這了,更多相關(guān)TypeScript枚舉 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict,嚴(yán)格模式是JavaScript中的一種限制性更強(qiáng)的變種方式。嚴(yán)格模式并不是JavaScript中的子集,它在語(yǔ)義上與正常的代碼有明顯的差異,下面我們就一起來(lái)學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下2021-12-12
JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)學(xué)生信息管理系統(tǒng),文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04
微信小程序(二十二)action-sheet組件詳細(xì)介紹
這篇文章主要介紹了微信小程序action-sheet組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
ComponentLoader?與動(dòng)態(tài)組件實(shí)例詳解
這篇文章主要為大家介紹了ComponentLoader?與動(dòng)態(tài)組件實(shí)現(xiàn)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
小程序開發(fā)實(shí)戰(zhàn):實(shí)現(xiàn)九宮格界面的導(dǎo)航的代碼實(shí)現(xiàn)
本篇文章主要介紹了小程序開發(fā)實(shí)戰(zhàn):實(shí)現(xiàn)九宮格界面的導(dǎo)航的代碼實(shí)現(xiàn),具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01
微信小程序 sha1 實(shí)現(xiàn)密碼加密實(shí)例詳解
這篇文章主要介紹了微信小程序 sha1 實(shí)現(xiàn)密碼加密實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07

