说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【探秘ES6】系列专栏(八):JS的第七种基本类型Symbols

HTML文档下载 WORD文档下载 PDF文档下载
新一代JavaScript标准ES6正式发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第七篇,带你了解ES6的Symbols。

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,组织成【探秘ES6】系列专栏,供大家学习借鉴。本文为该系列的第八篇。 

本期我们要讨论的symbols是个什么东西呢?

这里的Symbols不是指的徽标。

也不是能在代码中使用的小图片。


它也不是代表其它任何东西的一个别名。

当然咯,Symbols和Cymbals(铜钹)完全是两回事。


(在编程过程中使用铜钹可不是一个好主意,吵到你炸!)

言归正传,什么是Symbols呢?

它是Javascript的第七种基本类型

自1997年Javascript被标准化以来,它定义了六种基本类型。直到ES6,JS程序中任何一个值都属于以下几种类型之一。

  • Undefined
  • Null
  • Boolean
  • Number
  • String
  • Object

每种类型都是一系列值的集。前五个都是有限集。当然,Boolean类型只有true和false两个值,而且他们应该不会给Boolean型增加新值了。其它类型的值基本上都是数字和字符串。理论上说Numbers类型有18,437,736,874,454,810,627个值(包括了NaN,NaN是“Not a Number”的缩写)。String类型中可能的值就太多了,我算算大概有 (2144,115,188,075,855,872 − 1) ÷ 65,535个……当然,我这种算法不一定是精确的。

Object是一个无限集,每一个Object都是独一无二的。你随意打开一个Web页面就会生成一大堆新的Object。

ES6 Symbols也是一个集,但它的元素既不是字符串也不是对象。它是ES6的新成员:第七种基本类型。

让我们来谈谈它的应用场景。

以一个简单的布尔型来举例

在JavaScript中,有时候将一个对象中的数据扩展到其它某个对象中是十分方便的。

例如,假设你正在写一个JS库,目的是使用CSS过渡让DOM元素在屏幕上移动。你应该知道同时使用多个CSS过渡在同一个div上是行不通的。这会引起div不规律跳跃。你打算解决这个问题,不过首先你得想法知道这个元素是否正处在一个过渡中。

怎样来解决这个问题呢?

其中一种方式是使用CSS APIs让浏览器来告诉你元素是否在位移过程中。但这未免有点杀鸡用牛刀了。你的库应该存储了移动状态:代码中触发过渡的时候就应该记录了!

你真正需要的是一种方法来跟踪记录哪些元素在过渡。你可以把过渡中的元素存在一个数组中。每当你的库触发一个元素的过渡之前,先检测那个元素是否在数组中。

遗憾的是,如果数组很大的话,遍历起来会很耗时。

在你看来最简单的方法其实是为元素设置一个标识:

if (element.isMoving) {  smoothAnimations(element);}element.isMoving = true;

这样也会有一些潜在的问题。无法避免的事实是代码中会用到这个DOM的地方不止这一处。

  1. 其它代码中如果使用了for-in 或者 Object.keys()会遍历DOM的所有属性(会造成额外性能消耗)。
  2. 一些思维灵活的库作者会从技术方面考虑——你的库与其它库兼容性会很差。
  3. 一些思维灵活的库作者也会考虑扩展性——你的库扩展性也会很差。
  4. JS标准委员会将来也许会为所有元素提供一个.isMoving()的方法,那么你需要重构你的代码,那时候你就傻眼了。

当然,你可以用一个冗长或傻瓜式的字符串来作为属性名,只需确保不会和别的属性重名。

if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) {  smoothAnimations(element);}element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true;

代码写成这样也太虐待自己的眼睛了。

使用加密方法你可以生成一个理论上唯一的属性名:

// get 1024 Unicode characters of gibberishvar isMoving = SecureRandom.generateName();...if (element[isMoving]) {  smoothAnimations(element);}element[isMoving] = true;

object[name]语法使你可以使用任何字符串作为属性名。所以这样是可行的:不会有命名冲突,看起来还清爽!

但是,这样会导致调试体验糟透了?当你使用console.log()来打印元素的这个属性时,你会看到一大段字符串的垃圾数据。并且,这样的属性不止一个吧?你将如何保持连续性?每次重新加载的时候它们都生成不同的属性名。

为什么要搞得这么复杂?我们要得仅仅是一个简单的布尔值而已!

Symbols可以解决这个问题

Symbols集中的值可以由程序创建和并作为属性的键来使用,也不用担心名称冲突。

var mySymbol = Symbol();

调用Symbol()来创建一个新的Symbol值,它不会等同于其他值。

与字符串和数字一样,你可以使用symbol来作为属性值。因为它不等同于其它任何字符串,这个symbol-keyed属性可以确保不会与其它任何属性冲突。

obj[mySymbol] = "ok!";  // guaranteed not to collideconsole.log(obj[mySymbol]);  // ok!

接下来这方法就可以解决上面我们所讨论的那种情况:

// create a unique symbolvar isMoving = Symbol("isMoving");...if (element[isMoving]) {  smoothAnimations(element);}element[isMoving] = true;

关于这段代码的几个说明:

  • Symbol(“isMoving”)中的“isMoving”被称作描述。它对调试很有用。当你使用console.log()就可以打印出对应的symbol值,如果你想把它转换为字符串(比如说在打印错误信息的时候)可以使用.toString()。
  • element[isMoving]被称作symbol-keyed属性(使用symbol作为键的属性)。从字面意思就可以说明它就是使用symbol作为属性名而不是使用字符串。除去这一点,它和其它属性并没什么区别。
  • 和数组元素一样,symbol-keyed属性不能通过圆点符号来获取值(obj.name 这样是不行的)。它的值必须通过方括号来获取。
  • 通过symbol的值获取symbol-keyed属性值就很容易了。上面的例子展示了如何获取和设置element[isMoving],我们可以判断元素的isMoving状态了,如果有必要的话甚至可以删除isMoving状态。
  • 另一方面,以上的前提是isMoving在当前作用域中。这体现了symbols的弱封装机制:一个模块可以创建几个symbols在对象中任意使用而不用担心与其它模块的属性冲突。

因为symbol键值是被设计来避免冲突的,所以JavaScript最基本的对象检测特性是会忽略symbol键值的。以for-in循环为例,循环只会遍历对象的字符串类型的键。Symbol键直接被忽略过了。Object.key(obj)和 Object.getOwnPropertyNames(obj) 也是这样运作的。但是sysmbols并不完全是私有的:可以使用新API——Object.getOwnPropertySymbols(obj)将所对象的所有symbol键;另一个新API—— Reflect.ownKeys(obj),将会同时返回string和symbol类型的键。(在以后的文章中我们将完整地探讨Reflect API。)

在库和框架中symbols将会有很多用途,不久我们会看到,JS语言本身对它也会有广泛的使用。

symbols确切定义是什么呢?

> typeof Symbol()"symbol"

Symbols和其它基本类型大不一样。

从创建开始就是不可变的。你不能为它设置属性(如果你在严谨模式下尝试,会报类型错误)。它可以作为属性名。这是它的类字符串性质。

另一方面,每一个symbol都是唯一的。与其他的不同(就算他们的描述是一样的)你可以很容易地新创建一个。这是它的类对象性质。

ES6 symbols与Lisp和Ruby中的更传统的symbols很类似,但是没有如此紧密地集成到语言中。在Lisp中,所有的标识符都是symbols。在JS中,标识符和大多数属性的键值的首先仍是字符串,Symbols只是为开发人员提供了一个额外选择。

关于symbols的一个忠告:与JS中的其它类型不同,它不能被自动转换为字符串。试图拼接symbol与字符串将会引起类型错误。

> var sym = Symbol("<3");> "your symbol is " + sym// TypeError: can't convert symbol to string> `your symbol is ${sym}`// TypeError: can't convert symbol to string

你可以通过显示地将symbol转换为一个字符串来避免这个问题,通过String(sym)或者sym.toString()。

symbols的三种形式

有三种方法来获取symbol。

  • Call Symbol()。我们已经讨论过这种方法了,每一次调用它都将返回一个唯一的symbol。
  • Call Symbol.for(string)。这种方法访问一组已经存在的symbol注册表。与通过Symbol()来定一个唯一值不同的是,symbol注册表中的symbols是共享的。如果你调用Symbol.for(“cat”)三十次,每一次返回都将是同一个symbol。在多页面或者单页面的多模块需要共享symbol时,这是很有效的方法。
  • 使用标准中定义的Symbol.iterator。标准委员会自己定义了几种symbols。每一种都有它的特殊意义。

如果你仍然不确定symbols是否对你有帮助,这最后一个章节会很有趣,因为证实了在实践中symbols是很有用的。

ES6的文档中对通用symbols的使用是如何介绍的?

我们已经看过了ES6是如何使用symbol来避免与已有代码命名冲突的。几周前,在关于迭代器的文章中,我们了解了循环(var item of myArray)是从调用myArray[Symbol.iterator]()开始的。我提到这个方法以前的写法是myArray.iterator(),但是加了symbol以后向后兼容性会更好。

现在我们知道了symbols的用法和作用。那么就很容易理解为什么这样做和这样做的意义是什么。

这里还有其它几个ES6使用通用symbols的场景。(这些特性在Firefox中还没实现。)

  • 使instanceof可扩展。在ES6中,表达式object instanceof constructor被指定为构造函数的一个方法:constructor[Symbol.hasInstance](Object)。这表明它是可扩展的。
  • 消除新特性和旧代码之间的冲突。这比较难理解,但我们发现一些ES6的数组方法将会破坏旧网站的稳定性。其它的Web标准也会有类似的问题:仅仅是添加新方法到浏览器中,已存在的网站就会受到影响。无论如何,造成这些不稳定性的主要原因主要是由动态作用域引起的。所以ES6引入了一个特殊的symbol——Symbol.unscopables,这个Web标准可以用来防止某些方法被牵连到动态域中。
  • 支持新的字符串匹配。在ES5中,str.match(myObject)尝试将myObject转换为正则表达式对象。在ES6中,首先检查myObject是否有myObject[Symbol.match](str)方法。现在库就可以给任何有正则表达式对象的地方提供通用的解析类。

所讲到的这几个symbol的应用都不常见,很难看到这些特性本身对我们的日常代码有任何影响。从长远看就比较有意义了。通用symbols是JavaScript对于PHP和Python中的__doubleUnderscores的改进。标准委员会将来会添加新的hooks到JS中,而不会有影响已有代码的风险。

我什么时候可以开始使用ES6 symbols?

Firefox 36和Chrome 38已经支持Symbols了。我自己也在Firefox中试过了,如果你运行的时候有问题,你该知道问谁吧——找我!

为了让那些本身还不支持ES6 symbols的浏览器支持它,你可以使用pollyfill(一段代码或插件,提供了那些开发者们希望浏览器原生提供支持的功能),比如core.js。因为Symbols还比较新,所以它的pollyfill还不是那么完善,详细了解请看使用说明。

接下来的两篇博客,首先会讨论一些我们期待已久的特性终于被ES6支持了,我实在忍不住抱怨它们的姗姗来迟。我们将从两个很古老的特性作为开始(老到几乎可以追溯到编程历史的起源),紧接着讨论两个与之非常相似的特性,由ephemerons提供技术支持。下次还将深入讨论collections(集合)。

原文链接:ES6 In Depth: Symbols

本译文遵循Creative Commons Attribution Share-Alike License v3.0 

相关阅读:

【探秘ES6】系列专栏(一):ES6简介

【探秘ES6】系列专栏(二):迭代器和for-of循环

【探秘ES6】系列专栏(三):生成器

【探秘ES6】系列专栏(四):模版字符串

【探秘ES6】系列专栏(五):剩余参数和默认参数

【探秘ES6】系列专栏(六):解构赋值

【探秘ES6】系列专栏(七):箭头函数

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。  

选择Go语言的12个理由 动鱼数码携三款大作参战Unity游戏及应用大赛 从Google、Apple、Dropbox、Twitter和Square学到的管理哲学 软件开发就像炒股,关键看你怎么选股票! iOS 7.1正式版:新增CarPlay连接功能、完美支持iPhone 4 【OSTC讲师专访】马全一:Docker,Hadoop的竞争者来了! 福布斯:全球那些富可敌国的科技大佬们 抢工作、争资源,如此聪明的AI你拿什么阻止? iUI:移动Web应用开发必备的开源框架 支持iOS 7.1!苹果发布Xcode 5.1更新 视频云将成为2014年乐视新的发力点 3月12日:万维网迎来理念诞生25周年 《近匠》云适配CEO陈本峰:跨屏移动,曲线一样救国 Intel陈荣坤:赢取移动市场的几个先决条件 而立之年,开发者在害怕什么? 首席工程师揭秘:LinkedIn大数据后台是如何运作的 年交易额1800亿美元,揭秘PayPal成功背后的三大热门技术 微软妥协Android?向该平台推开源Office 365 SDK 中国云计算大会PPT集萃(一):众多名家分享技术挑战与行业趋势 速度是现在的10000倍,出自物理学家之手的新型电脑 逗你玩?淘宝开放平台从4月1起开始全面收费 出现编程疲劳?千万别纠结 “编程竞赛界王子”教你更好的招聘程序员 SA:三星全球智能电视市场份额达26% Cocos2d-x 3.0分语言包发布 最新进展即将披露 友盟:社会化分享成为APP开发“标准配置” 从“简单”的封面设计剖析Netflix背后的数据哲学 与Linus Torvalds“并列”,虚拟化天才程序员法布里斯贝拉 让超级计算机和数据中心“飞”,Intel推800Gbps神器MXC 【OSTC讲师专访】Debian开发者李道兵:平静地理解开源 红帽推出开源业务流程管理套件:JBoss BPM Suite 6 我不要活了。。。 菜鸟:一个小问题 基于对话框的程序中,使用了Tree Control和Edit box,如何在Edit box中显示TreeControl中选中的文本文件的内容。希望提供类似的例子。 ★★★★★★★紧急求救★★★★★★★★ 寻找丢失的分区表!!! windows2000进入“等待”后,唤不醒是怎么回事,请指点! jsp数据库中的Date类型? 在vb中如何进行时间比较?例如1 / 7 / 17 10:00:00 - 1 / 7 / 17 00:00:00 得到一个值?? 请问如何获得其他机器的网卡MAC地址?非常感谢!!! 别了,最爱的BCB! 如何判断一个指向窗口的指针可用? 请教高手:怎么样破windows2000的登陆密码?其密文存放在什么地方? 急:哪里有电子文档 找到找到 网络编程、大虾有请!如何获得当前每秒的字节数? 各位高手,有人喜欢用mysql吗?谈谈这个东东吧 大富翁怎么连不上了? 各位武汉的大虾,请教武汉程序员、高级程序员、系统管理员(正规的大公司)、以及用JAVA做开发的工资一般为多少。希望大家给予帮助!!前途问题!! 网络编程大虾有请!如何获得当前每秒的字节数? 怎样在treeview中设置背景图片 to 版主:精华区太乱了,请给予分类。谢了 听说VB可以写PAD的程序,TRUE? JLabel中文本换行问题 马上要开始学BCB,请问BCB有那种类似于VC的创建类的向导吗,看到BCB的界面我就想到DELPHI中创建类的难度 我的游戏引擎BATTLEFIELD作好了,欢迎下载(这次是真的) 一个pop_up menu的问题 那位高手知道在SDK中使用ADO的方法 为普天之下正直而上进的程序员找一个温馨的家 为什么不能把JMF包打进去??? 内存泄露是指例如“为对象分配一个内存区后,未删除内存区,但删除了对象”是吗? 装pws时遇到的麻烦! to freezwy(网络自由人) 有没有限制上传图片大小的asp代码??(不是组件) 还是没有解决!!! 有关VC中数据库绑定的问题! 扔个骨头……下个“圈套”,呵呵? ^_^ 紧急情况!如何改变DataGrid控件中个别行的颜色?? 如果实现断开共享目录的连接 acces 表 SQL语句中如何转换字符型字段为整型? First-chance exception 请教directx的一个入门问题? 诚征MM中…… 多线程问题?? 请问sybase中real类型的最大值是多少?999999999 自杀的N个理由 如何根据日期计算出一年中的第几天? 情况不对,撤丫~~~~~~~~~ 如何在JBuilder4.0编译环境下打包\编译??????? 关于对话框的一个简单问题 如何把几个chm(已编译的 html 文件)文件合成一个chm文件 ado参数问题 请问sevrlet怎么结合HTML模板工作呢?谢谢 芭比英语怎么读?最好把拼写也写一下!注意是英文! 工程队13天完成一项工程,平均每天完成这项工程的几分之几?每天可完成这项工程的几分之几? 一项工程,甲工程队单独做40天可以完成,乙工程队单独做80天可以完成,现由甲先单独做10天,然后与乙共同完 芭比娃娃英文介绍芭比娃娃的英文介绍! 工程队做一项工程,计划8天完成,平均每天完成这项工程的几分之几,3天完成这项工程的几分之几? 一项工程甲队单独做要10天完成乙队单独做要12天完成现在两队合做4天剩下的由乙队单独完成需要多少天?有助于回答者给出准确的答案 芭比娃娃的具体英文介绍介绍芭比的原型 发展史 流行程度 以及发展趋势 工程队12天完成一项工程,平均每天完成这项工程的几分之几?3天完成这项工程的几分之几? 一项工程甲单独做要10天完成,乙单独做15天完成.现在甲做4天,乙做3天,分别完成这项工程的几分之几? 芭比娃娃用英语怎么说?芭比娃娃和奥特曼的英语说法 一条路,甲工程队单独挖15天完成这条路的1/5,甲每小时完成这条路的几分之几 一项工程,甲独做10天完成,乙独做15天完成,现在甲做4天,乙做3天,分别完成这项工程的几分之几? “芭比娃娃”用英文怎么说? 工程队要在10天内抢修一条长2千米的公路,平均每天要修完这条路的几分之几?平均每天要修多少千米?要有列式 和理由~ 做一项工作,甲用5天完成,乙用4天完成,甲每天可完成这项工作的几分只几?乙每天可完成这项工作的几分只 求写一篇500字左右的英语短文 关于芭比娃娃的RT急需在线等 工程队原计划用25天修完一条长1200米的路,实际提前五天完成,实际每天修这条路的几分之几 单独完成一项工程,甲要5天,乙要8天,甲的工作效率是乙的几分之几? 哪个是暗影芭比真正的文章啊这么多个都是莎拉的,擦,谁给个准确的~ 工程队原计划用25天修路1200米,实际提前5天完成任务,实际每天修这条路的几分之几? 做一项工程,甲用5天可以完成,乙用4天可以完成,甲每天可以完成这项工作的几分之几?乙每天可以完成这项工作的几分之几?乙的效率比甲高百分之几? 芭比娃娃的销售策略用的什么策略. 工程队修一条3千米长的路,20天修完.平均每天修多少千米?平均每天修这条路的几分之几? 一件工作 ,甲单独做15天完成,乙单独做12完成.两个合做4天可以完成这项工作的几分之几? 玩芭比娃娃的写怎么玩这个玩具150字作文 工程队修一条3/5千米的路,已修了3/10,剩下的要三天修完,平均每天修这条路的几分之几?求大神帮忙~~~~拜托啦. 甲 乙两人合干一项工作,原计划12小时完成,现在甲先干了5小时,甲,乙又合干了10小时才完成.求乙的工作效率是假的几分之几 关于我的芭比娃娃的英文文章不要太长,也不要太短 1条公路25天修好平均每天修这条公路的几分之几?7天修几分之修这条公路几?请在10分钟内回答, 一件工作 甲单独做需要10小时完工,乙单独干需15小时完工,现甲乙合干几小时完工? Barbie娃娃英文介绍希望有能力的朋友帮本人写一篇关于芭比娃娃和韩国迷糊娃娃的英文介绍!急用! 一段路30天修完,平均每天修这段路的几分之几,15天能够修完这段路的几分之几. 一项工程,甲乙合干10小时完成,家单独干18小时完成,乙单独干1小时能完成这项工程的几分之几? 单词bob 的起源演变和发展(我只知道来自于条顿语bob 辉煌的荣耀)具体点要1000来个字 最好附上参考文献或链接 一条公路,由甲队独修,需要8天,由乙队单独修,需要12天完成.两队和修3天后,完成了这条路的几分之几, 一件工作,甲单独完成要10小时,乙单独完成要11小时,甲和乙个做了7小时,甲完成了这件工作的几分之几?乙完成了这件工作的几分之几?哪个做得快些? 美国文化"芭比娃娃"有什么历史背景? 一项工程,甲单独做8天完成,乙单独做6天完成,两队合作3天后还剩这项工程的几分之几?怎么列式? "每年人均食品支出占人均支出的几分之几?",是人均支出分之人均食品支出吗 Bob是什么意思 一项工程,甲独做8天完成,独做12天完成.两队合作3天后,还剩几分之几? ①的三角形的面积是②面积的几分之几,帮忙把式子也列出来,把原因也说说 请问一下“爱情的bob”是什么意思… 一项工程,由甲队修建要30天完成,由乙对修建要20天完成,两队同时修建8天后,还剩这项工程的几分之几?算式 数学题给下算式不要分部 70人相当于80人的几分之几 推荐Bob Dylan的歌?不用说Knockin' On Heaven's Door,我找了很多,只是觉得这一首好听. 一项工程需要9天完成,已经干了5天,完成了这项工程的几分之几 已知一项工程,由甲队单独做30天完成,由乙队单独做20天完成.两队合作10天,还剩下工程的几分之几 求英语爱好者翻译Bob Dylan的Things Have Changed单词基本认识,整篇却云里雾里. Things Have Changed__Bob Dylan A worried man with a worried mind No one in front of me and nothing behind There's a woman on my lap and she's dri 一项工程原计划9天完成,实际上只用7天就完成了.实际每天比原计划多完成工程的几分之几. 一项工程,由甲队做30天完成,由乙队做20天完成.两队合作五天可以完成工程的几分之几? Bob Dylan的Like a rolling stone谁有中文歌词翻译?这首歌的歌词中文翻译谁有?帮忙呀!谢了! 7天是9天的几分之几 一项工程甲单队独做要20天完成乙队单独做要15天完成两队合作5天后还剩几分之几没修 芭比娃娃英语怎么说 一项工程原计划9天完成,实际上只用7天就完成了.实际每天比原计划多完成工程的几分之几. 一项工程,甲工程队单独做要12天完成,乙工程队单独做要10天完成,现在两个工程队合作做了4天,共完成这项... 芭比的英文怎么拼写 修一条4千米长的公路,7天修完,平均每天修几分之几千米?每天修了这条公路的几分之几?平均每天修了1千米的几分之几? 一项工程,甲工程队单独做40天完成,乙工程队单独做60天可以完成,现在由甲单独做10天,然后与乙共同完成余下的工程,甲工程队共做多少天?(列方程解答)
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn