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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
jQuery参数列表集合
Apr 06 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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
php邮件发送,php发送邮件的类
2011/03/24 PHP
解析yii数据库的增删查改
2013/06/20 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
python 计算文件的md5值实例
2017/01/13 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
初一英语教学反思
2014/01/11 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
个人年度总结报告
2015/03/09 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android