Javascript Symbol原理及使用方法解析


Posted in Javascript onOctober 22, 2020

Symbol是ES6中新引入的一种基本数据类型,在此之前JavaScript中已有几种基本数据类型:

  • Numberg
  • String
  • Boolean
  • Null
  • Undefined
  • Object

不同于其他基本类型的通俗易懂,Symbol 是什么和有什么用一直有些让人困惑。

什么是Symbol

JavaScript标准中规定对象的key只能是 String 或 Symbol 类型,区别在于 String 类型的key可以重复而 Symbol 类型的key是唯一的。Symbol 的本质是表示一个唯一标识。每次创建一个Symbol,它所代表的值都不可能重复,该值的内部实现可以视为一段数字(类似:3423498431987719455..)。所以理论上 Symbol 的存在只有一个意义:用于必须使用唯一值的场景。

创建Symbol

创建 Number、String等基本类型的实例有两种方法:通过构造函数(或者叫工厂函数)和文字语法糖。比如:

// 构造函数
const num = Number(3);
const str = String('hi');

// 语法糖
const num = 3;
const str = 'hi';

显然使用语法糖更加简洁。但是 Symbol 只能通过构造函数 Symbol() 进行创建:

const sym = Symbol();

或者,我们可以传入一个字符串参数(descriptor)用于描述该Symbol:

const sym = Symbol('cat');

注意:传入的参数对 Symbol 值的产生并无影响,因为就算每次传入的参数都一样,生成的Symbol值也是不等的。该参数的作用仅用于描述被创建的Symbol,以便debug时可以识别出Symbol的含义。 所以,下列等式结果为 false:

Symbol('cat') === Symbol('cat') // false
Symbol.for(key)

和 Symbol() 类似,Symbol.for(key) 也可以创建一个Symbol,不一样的是:创建的 Symbol 是全局的(在全局Symbol表中注册),而如果全局已经存在相同 key 的Symbol,则直接返回该Symbol。所以,下列等式结果为 true:

Symbol.for('cat') === Symbol.for('cat') // true

如何使用Symbol

其实 Symbol 本身很简单,但是如何把它用好、且用的恰到好处却使人困惑,因为在平常工作中并没有多少非Symbol不用的场景。但是用对了Symbol会对你的代码质量有不少提升。来看下面几种案例:

1. 用作对象的key,防止命名冲突

使用Symbol作为Object的key,可以保证和其他key都不重复。因此,Symbol非常适合用于对对象的属性进行拓展。

比如,当使用 String 作为对象的key时,一旦出现重复的key则后面的属性会覆盖前面的:

const persons = {
 'bruce': 'wayne',
 'bruce': 'banner'
}

console.log(persons.bruce); // 'wayne'
使用Symbol作为Key可以避免这种情况:

const bruce1 = Symbol('bruce');
const bruce2 = Symbol('bruce');

const persons = {
 [bruce1]: 'wayne',
 [bruce2]: 'banner'
}

console.log(persons[bruce1]); // 'wayne'
console.log(persons[bruce2]); // 'banner'

js很多内建的方法都是通过 Symbol 进行指定的,比如:Symobol.iterator 指定了一个iterable对象的迭代器方法;Symbol.replace 指定了对象字符串替换的方法,这类 Symbol 被称为 Well-know Symbols,代表了js语言的内部行为。

2. 使用Symbol定义枚举

由于Javascript并不自带枚举类型,通常情况下我们会使用一个freezed的Object来模拟枚举类型,比如定义一个日期的枚举:

const DAYS = Object.freeze({
monday: 1,
tuesday: 2,
wednesday: 3
});

此时有一个方法,接收 DAYS 的枚举值来返回当天要做的事:

function getTodo(day) {
 switch (day) {
  case DAYS.monday:
   return "看电影";
  case DAYS.tuesday:
   return "购物";
  case DAYS.wednesday:
   return "健身";
  default:
   return "日期错误";
 }
}

我们希望代码逻辑足够严谨,传入的参数严格按照 DAYS.monday 的形式,否则就返回日期错误,但是该枚举类型的实现却做不到。比如:getTodo(1) 依然能得到 “看电影” 这个结果。

但是使用Symbol却可以解决这一问题,DAYS 枚举类型可以重新定义为:

const DAYS = Object.freeze({
monday: Symbol('monday'),
tuesday: Symbol('tuesday'),
wednesday: Symbol('wednesday')
});

此时 getTodo 方法必须接收 DAYS.monday 这样的枚举值作为参数,否则就返回 “日期错误”,因为世界上再没有任何一个值和 DAYS.monday 相等了。

这样定义枚举显然更严谨了。

3. 使用Symbol存储元数据

Key为Symbol类型的属性是不能被枚举的,这是 Symbol 除了唯一性外的第二大特性,因此使用for...in,Object.keys()、Object.hasOwnProperty()等方法不能识别Symbol属性,简而言之Symbol属性对用户是“隐藏”的(但并不是private的,因为有其他途径可以获取Symbol属性),例如:

Javascript Symbol原理及使用方法解析

因此Symbol作为“隐藏”属性可以用来存储对象的元数据。比如,有一个 TodoList:

class TodoList {
 constructor() {
  // todo数量
  this.count = 0;
 }

 // 增加todo
 add(id, content) {
  this[id] = content;
  this.count++;
 }
}

const list = new TodoList();

我们使用 add() 方法向其中增加几个todo:

list.add('a', '看电影');
list.add('b', '购物');
list.add('c', '健身');

当我们想使用 for...in 查看里面所有的todo时,会把 count 属性也带出来:

Javascript Symbol原理及使用方法解析

为了隐藏count属性,更方便的对todo进行操作,我们可以使用Symbol来存储它,TodoList 类修改为:

const count = Symbol('count');
class TodoList {
constructor() {
this[count] = 0;
}

add(id, content) {
this[id] = content;
this[count]++;
}
}

当我们再遍历 TodoList 的时候,count就隐藏了:

Javascript Symbol原理及使用方法解析

当我们想获取存储在Symbol中的原数据时,可以使用 Object.getOwnPropertySymbols() 方法:

Javascript Symbol原理及使用方法解析

以上是我能想到的 Symbol 的用途,如果大家有其他心得体会欢迎补充。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 #Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 #Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 #Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 #Javascript
记一次vue跨域的解决
Oct 21 #Javascript
解决Vue项目中tff报错的问题
Oct 21 #Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 #Javascript
You might like
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php如何获取文件的扩展名
2015/10/28 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
实践Vim配置python开发环境
2018/07/02 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python中什么是面向对象
2020/06/11 Python
Python自带的IDE在哪里
2020/07/01 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
初中学校军训方案
2014/05/09 职场文书
房屋出售授权委托书
2014/10/12 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
golang中的空slice案例
2021/04/27 Golang