js学习-es6实现枚举
最近大部分时间再写dart,突然用到js,发现js不能直接声明一个枚举。搜索发现还是有实现的方式,于是总结一下。
目录
枚举特点
- 枚举值不能重复
- 不能被修改
- switch case可以直接判断
Object.freeze()
Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。(来自MDN)
总结:让被冻结的对象,不能再修改。
Symbol
ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。(来自ECMAScript 6 入门-阮一峰)
总结:凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。
实现
体现不可更改
const EnumSex = Object.freeze({
man: Symbol('男'),
woman: Symbol('女')
})
EnumSex.man = 1;
console.log(EnumSex.man); // Symbol(男)
体现值的唯一性
const EnumSex = Object.freeze({
man: Symbol('男'),
woman: Symbol('男')
})
console.log(EnumSex.man === EnumSex.woman); // false
需要注意的地方
开始实现体现值的唯一性的时候,看到man和woman都是Symbol('男'),感觉执行的时候应该会报错,结果没有报错,还有点怀疑Symbol的唯一性。最后一对比发现是不同的。
Symbol中的参数只是对Symbol的一个描述,为了我们好区分它。
js学习-es6实现枚举的更多相关文章
- 用vue.js学习es6(一):基本工具及配置
一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...
- 用vue.js学习es6(六):Iterator和for...of循环
一.Iterator (遍历器)的概念: 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只 要部署Iterator接口,就可以完成遍历操 ...
- 用vue.js学习es6(五):set和map的使用
一:Set用法: ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. (1).打印:console.log var data = new Set([1,2,3]); ...
- 用vue.js学习es6(四):Symbol类型
一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...
- 用vue.js学习es6(二):let和const使用
一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...
- 用vue.js学习es6(三):数组、对象和函数的解构
一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...
- JS学习- ES6 async await使用
async 函数是什么?一句话,它就是 Generator 函数的语法糖. 使用场景常常会遇到,请求完一个接口,拿完值再去请求另外一个接口,我们之前回调callback函数处理,如果很多的情况下,看起 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
随机推荐
- CUDA运行时 Runtime(四)
CUDA运行时 Runtime(四) 一. 图 图为CUDA中的工作提交提供了一种新的模型.图是一系列操作,如内核启动,由依赖项连接,依赖项与执行分开定义.这允许定义一次图形,然后重复启动.将 ...
- Win10 下python_appium的Android手机自动化环境搭建
前提: 已经安装好了Java环境,且配置了环境变量 已经安装python3.8.2,已经安装pycham. 一.安装appium_client ,pycham中也需要安装 二.安装node.js(需要 ...
- HashMap源码解析和设计解读
HashMap源码解析 想要理解HashMap底层数据的存储形式,底层原理,最好的形式就是读它的源码,但是说实话,源码的注释说明全是英文,英文不是非常好的朋友读起来真的非常吃力,我基本上看了差不多 ...
- SpringBoot数据访问(一) SpringBoot整合Mybatis
前言 SpringData是Spring提供的一个用于简化数据库访问.支持云服务的开源框架.它是一个伞形项目,包含了大量关系型数据库及非关系型数据库的数据访问解决方案,其设计目的是为了使我们可以快速且 ...
- 【NX二次开发】Block UI 选择单元
属性说明 属性 类型 描述 常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
- 浅谈lambda表达式<最通俗易懂的讲解
Java8发布已经有一段时间了,这次发布的改动比较大,很多人将这次改动与Java5的升级相提并论.Java8其中一个很重要的新特性就是lambda表达式,允许我们将行为传到函数中.想想看,在Java8 ...
- Django(69)最好用的过滤器插件Django-filter
前言 如果需要满足前端各种筛选条件查询,我们使用drf自带的会比较麻烦,比如查询书名中包含"国"字,日期大于"2020-1-1"等等诸如此类的请求,Djan ...
- SpringBoot_登录注册
学习SpringBoot需要的前期基础 Spring(Bean容器 IOC set 构造方法 AOP) SpringMVC(GET POST Restful) 对于SpringBoot,约定大于配置 ...
- VueJs(16)---Nuxt引入mavon-editor插件实现markdown功能
Vue引入mavon-editor插件实现markdown功能 说明 mavon-editor是一款基于Vue的markdown编辑器,因为当前项目是采用Nuxt,所以这里所展示的教程是针对Nuxt引 ...
- MaterialDesignInXamlToolkit“无法绑定到目标方法,因其签名或安全透明度与委托类型的签名或安全透明度不兼容”异常的解决思路
前言: 最初是想解答园友"小代码大世界 "的问题,后来想举一反三,将这个问题简单剖析下,做到知其所以然. MaterialDesignInXAML 控件库高度封装,有一些控件在使用 ...