Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > typescript 枚举

typescript 枚举

浏览: 作者:Datehoer 发布日期:2021-01-18 22:17:09 来源: 原创
enums,枚举enums对于我们前端开发工程师来说也是一个全新的概念,不过其实枚举还是非常好理解的。在任何项目中我们都会遇到常量这种情况,它是在执行的程序中不会被改变的值,在typescript中我们一般会用const来声明一个常量,但是呢,有些取值是在一定范围内的一系列常量,比如说我们一周内的七天从周一到周日,红黄蓝三原色,上下左右,南北东西等等,这些值就可以用枚举来表示。

1.数字枚举

我们用enum来进行定义。

enum Direction {

    up,

    down,

    right,

    left,

}

枚举成员会被赋值,从0开始,自动递增。

我们简单举例来看一下这个值,console.log(Direction.up)



typescript 枚举

我们其实也可以将枚举当作一个数组,然后其中的值可以当作字符串来取出。

console.log(Direction[0])


typescript 枚举

我们也可以给其中的成员手动赋值,比如说我给up赋值10。而未手动赋值的枚举项会根据手动赋值的枚举项的值来自动递增

enum Direction {

    up = 10,

    down,

    right,

    left,

}


typescript 枚举
我们将typescript文件进行编译,来看一下通过js是怎么实现的。
typescript 枚举

首先我们是创建了一个函数,封装了一个作用域。

我们可以看到其中Direction["up"]=0是用于自我解释,它会将Direction这个对象的成员up的值设置为0,注意JavaScript中的赋值运算符返回的是被赋予的这个值。所以这个例子中我们返回的就是0了。

2.字符串枚举

其实字符串枚举应该就很好理解了,将每一项设置为字符串,这样我们的值就会更容易处理和调试,因为他们都是提供有意义和可调式的字符串。

enum Direction {

    up = "Up",

    down = "Down",

    right = "Right",

    left = "Left",

}

当然,在使用字符串枚举的时候要注意,这个是不能自动递增的,所以要给下面每一项都赋上字符串的值。我们可以通过上面的例子来进行一个简单的字符串比较,比如说我们服务器返回的一个是up,我们将它和枚举进行比较。

const vaule = "Up"

这里我们通过if来进行比较

enum Direction {

    up = "Up",

    down = "Down",

    right = "Right",

    left = "Left",

}

const vaule = "Up"

if (vaule === Direction.up){

    console.log("go up!")

}

简单来看一下结果。


typescript 枚举

3.常量枚举

我们使用常量枚举可以提升性能,我们只需要在enum前面加上const关键字,这样它就可以被称为是常量枚举了。

const enum Direction {

    up = "Up",

    down = "Down",

    right = "Right",

    left = "Left",

}

我们如果对常量枚举进行编译,会发生什么呢?



typescript 枚举

js文件会变得非常的简便,逻辑非常通顺。我们如果调用一个枚举的值,js文件会直接翻译成结果,使用常量枚举就是这样来提升性能。他会内联枚举的任何用法,并且不会编译成JavaScript中的用法。

不过要注意,只有常量值可以进行常量枚举!

好了,有关typescript的枚举就介绍到这里了,如果有什么疑问可以在评论区留言,我会在看到的第一时间进行回复的。


版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/127.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!