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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
浅谈js的异步执行
Oct 18 Javascript
Angular工具方法学习
Dec 26 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
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相关问题总结
2006/10/09 PHP
php正则表达式(regar expression)
2011/09/10 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
js 小数取整的函数
2010/05/10 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
面试常见的js算法题
2017/03/23 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python爬取微信公众号文章
2018/08/31 Python
python下载微信公众号相关文章
2019/02/26 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
部队学习十八大感言
2014/01/11 职场文书
办公室主任职责范本
2014/03/07 职场文书
感恩之星事迹材料
2014/05/03 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
如何书写邀请函?
2019/06/24 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
SpringBoot快速入门详解
2021/07/21 Java/Android