牛刀博客-系列专栏（八）：JS的第七种基本类型Symbols

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

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

这里的不是指的徽标。

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

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

当然咯，和（铜钹）完全是两回事。

（在编程过程中使用铜钹可不是一个好主意，吵到你炸！）

言归正传牛刀博客，什么是呢？

它是的第七种基本类型

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

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

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

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

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

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

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

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

怎样来解决这个问题呢？

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

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

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

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

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

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

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

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

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 gibberish
var isMoving = SecureRandom.generateName;
...
if (element[isMoving]) {
  smoothAnimations(element);
}
element[isMoving] = true;

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

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

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

可以解决这个问题

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

var mySymbol = Symbol;

调用来创建一个新的值，它不会等同于其他值。

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

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

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

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

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

因为键值是被设计来避免冲突的，所以最基本的对象检测特性是会忽略键值的。以for-in循环为例，循环只会遍历对象的字符串类型的键。键直接被忽略过了。.key(obj)和

.(obj) 也是这样运作的。但是并不完全是私有的：可以使用新API——

.s(obj)将所对象的所有键；另一个新API—— .(obj)，将会同时返回和类型的键。（在以后的文章中我们将完整地探讨 API。）

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

确切定义是什么呢？

> typeof Symbol
"symbol"

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

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

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

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

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

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

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

的三种形式

有三种方法来获取。

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

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

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

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

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

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

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

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

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