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 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
微信小程序 video组件详解
Oct 25 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
js实现列表按字母排序
Aug 11 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
多个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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP常用处理静态操作类
2015/04/03 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
Python实现的简单模板引擎功能示例
2017/09/02 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Python面试题集
2012/03/08 面试题
公司年终奖分配方案
2014/06/16 职场文书
会计学专业自荐信
2014/06/25 职场文书
2014年招商工作总结
2014/11/22 职场文书
2015入党自荐书范文
2015/03/05 职场文书
重阳节主题班会
2015/08/17 职场文书