最近大部分时间再写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实现枚举的更多相关文章

  1. 用vue.js学习es6(一):基本工具及配置

    一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...

  2. 用vue.js学习es6(六):Iterator和for...of循环

    一.Iterator (遍历器)的概念: 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只 要部署Iterator接口,就可以完成遍历操 ...

  3. 用vue.js学习es6(五):set和map的使用

    一:Set用法: ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. (1).打印:console.log var data = new Set([1,2,3]); ...

  4. 用vue.js学习es6(四):Symbol类型

    一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...

  5. 用vue.js学习es6(二):let和const使用

    一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...

  6. 用vue.js学习es6(三):数组、对象和函数的解构

    一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...

  7. JS学习- ES6 async await使用

    async 函数是什么?一句话,它就是 Generator 函数的语法糖. 使用场景常常会遇到,请求完一个接口,拿完值再去请求另外一个接口,我们之前回调callback函数处理,如果很多的情况下,看起 ...

  8. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  9. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

随机推荐

  1. TVM优化Deep Learning GPU算子

    TVM优化Deep Learning GPU算子 高效的深度学习算子是深度学习系统的核心.通常,这些算子很难优化,需要HPC专家付出巨大的努力. 端到端张量IR / DSL堆栈TVM使这一过程变得更加 ...

  2. 关于Numba的线程实现的说明

    关于Numba的线程实现的说明 由Numbaparallel目标执行的工作由Numba线程层执行.实际上,"线程层"是Numba内置库,可以执行所需的并发执行.在撰写本文时,有三个 ...

  3. NVIDIA FFmpeg 转码技术分析

    NVIDIA FFmpeg 转码技术分析 所有从 Kepler 一代开始的 NVIDIA GPUs 都支持完全加速的硬件视频编码,而从费米一代开始的所有 GPUs 都支持完全加速的硬件视频解码.截至 ...

  4. 【译】.NET 5 中的诊断改进

    基于我们在 .NET Core 3.0 中引入的诊断改进,我们一直在努力进一步改进这个领域.我很高兴介绍下一波诊断改进. 诊断工具不再需要 .NET SDK 直到最近,.NET 诊断工具套件还只能作为 ...

  5. Hash源码注释解析

    部分代码注释解析: 1 import java.io.IOException; 2 import java.io.InvalidObjectException; 3 import java.io.Se ...

  6. 狂神说Mybatis笔记

    环境说明: jdk 8 + MySQL 5.7.19 maven-3.6.1 IDEA 学习前需要掌握: JDBC MySQL Java 基础 Maven Junit 第一节:入门 什么是MyBati ...

  7. Java线程池底层源码分享和相关面试题(持续更新)

    线程池各个参数讲解 public ThreadPoolExecutor(int corePoolSize, //线程池核心工作线程数量,比如newFixedThreadPool中可以自定义的线程数量就 ...

  8. Spring Cloud Data Flow整合UAA之使用LDAP进行账号管理

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 前言 Spring Cloud Data Flow整合UAA的文章已经写了两篇,之前的方案是把用户信息保存在数据库中: ...

  9. C#WebApi的创建与发布

    VS中新建项目-Web-ASP.NET Web应用程序 然后确定,选择空模版就可以了,勾上Webapi(也可以选择webapi模板,这样生成的文件比较多) 添加好之后Controllers和Model ...

  10. 玩转html2canvas以及常见问题解决

    前端小伙伴经常会遇到页面截图或者把网页中指定的区域(某个大div)的内容转换成png的图片.这个时候常常会用到html2canvas库来实现,js真的很强大. 我最近也遇到了一个需求,需要把输入的文本 ...