前言
ES6 更新了第 7 种基础数据类型 symbol，又称符号类型，用于作为全局唯一的表示符。并且以 Symbol 静态属性的方式向前端开发者暴露了可以修改 JS 内部语言行为的方法，用于更深层次操作对象。
声明方式
可以通过调用全局的 Symbol 函数来得到一个符号类型的变量，并且可以传递一个字符串类型的参数，用于表示对此符号的描述，可以通过 description 属性访问，但是两个描述相同的符号，并不相等。
const sy = Symbol('符号的描述')
console.log(sy) // Symbol(符号的描述)
console.log(sy.description) // '符号的描述'
const sy2 = Symbol('符号的描述')
console.log(sy2 === sy) // false
console.log(sy2.description === sy.description) // true符号描述的意义只在于方便开发者调试，是没办法通过描述获取它对应的符号的。
Symbol作为构造函数来说并不完整，所以它不支持语法：new Symbol()全局符号注册表
Symbol 有两个静态方法，用以维护一个全局符号注册表(可以视为一个 Map)，实现了 symbol 与 description 间相互转换。
Symbol.for同样可以创建一个符号，也接受一个字符串作为符号的描述。并将此符号加入全局注册表，如果下次通过此方法创建相同描述的符号，会直接返回已创建的符号。Symbol.keyFor检测一个符号是否在全局注册表中注册过，如果有，返回它的描述。
说实话，在实际开发中根本用不到这两个方法，不会存在符号与描述相互转换的需求，但为了内容的完整性，还是简单介绍了一下。
Symbol 的静态属性
Symbol 有许多静态属性，开发者可以通过配置它们改变 JS 的内部语言行为。在这里介绍其中较为常用的三个。
Symbol.iterator，用于为对象定义迭代器，其值应是一个生成器函数。在下文中的扩展遍历章节，会使用此属性极大扩展for of的功能。Symbol.toStringTag，用于修改对象的字符串标签，其值应是一个函数，函数的返回值为字符串，一般用于区分类的实例。Symbol.toPrimitive，用于为对象定义转换为原始值时的行为，接受一个参数表示转换倾向。详情可看 引用数据类型的转换规则
Symbol 还有许多静态方法，在平常开发中几乎用不到，这里不做介绍。
使用场景
Symbol 一般用于以下场景
定义类标签
可以在为类配置 Symbol.toStringTag 属性，很容易得到对象所属的类标签，使用 switch 进行匹配，比使用 instanceof 一次次比较尝试更方便。
class Pattern {
get [Symbol.toStringTag]() {
return 'Pattern'
}
}
class Envelope {
get [Symbol.toStringTag]() {
return 'Envelope'
}
}
const pattern = new Pattern()
const envelope = new Envelope()
console.log(Object.prototype.toString.call(pattern)) // '[object Pattern]'
console.log(Object.prototype.toString.call(envelope)) // '[object Envelope]'当然，你也可以不依赖 Object.prototype.toString 方法，直接在类中通过其他属性定义它的类型。
class Pattern {
get classType() {
return 'Pattern'
}
}
class Envelope {
get classType() {
return 'Envelope'
}
}
const pattern = new Pattern()
const envelope = new Envelope()
console.log(pattern['classType']) // 'Pattern'
console.log(envelope['classType']) // 'Envelope'消除魔术字符串
魔术字符串指的是在代码之中多次出现、与代码形成强耦合的某一个具体的字符串。风格良好的代码中应该尽量消除魔术字符串。
以下实例中，classType、Envelope、Pattern 就是魔术字符串，它多次出现，与代码形成“强耦合”，不利于将来的修改和维护。
class Pattern {
get classType() {
return 'Pattern'
}
}
class Envelope {
get classType() {
return 'Envelope'
}
}
function drawItem(item) {
const type = item['classType']
switch (type) {
case 'Pattern':
break
case 'Envelope':
break
}
}
function deleteItem(item) {
const type = item['classType']
switch (type) {
case 'Pattern':
break
case 'Envelope':
break
}
}常用的消除魔术字符串的方法就是把它写成一个变量。
我们并不关心这个变量的值是什么，只需要它全局唯一，这里使用 symbol 类型再合适不过。
const CLASS_TYPE = Symbol('classType')
const PATTERN = Symbol('Pattern')
const ENVELOPE = Symbol('Envelope')
class Pattern {
get [CLASS_TYPE]() {
return PATTERN
}
}
class Envelope {
get [CLASS_TYPE]() {
return ENVELOPE
}
}
function drawItem(item) {
const type = item[CLASS_TYPE]
switch (type) {
case PATTERN:
break
case ENVELOPE:
break
}
}
function deleteItem(item) {
const type = item[CLASS_TYPE]
switch (type) {
case PATTERN:
break
case ENVELOPE:
break
}
}当项目大起来后，想要修改一个魔法字符串是真的痛苦，你需要在所有文件中搜索搜索这个字符串，逐个地修改。
如果你是通过变量来使用的话，虽然在使用中需要先导入这个变量，但在你需要修改的时候，只需要通过编辑器重命名符号的功能，便可轻松完成全局修改。
作者目前正在学习 Vue3，在其源码中，存在着大量 const XXX = Symbol('xxx') 的语句。
定义私有属性
symbol 可以用来定义真正意义上的私有属性。
在下面这个例子中，只要 Pattern.js 不导出符号变量，从外部无论如何也访问不到实例的私有属性。
// 类的定义文件 Pattern.js
const PRIVATE_VALUE = Symbol('privateValue')
export class Pattern {
get [PRIVATE_VALUE]() {
return '私有属性，你们访问不到'
}
fun() {
console.log(this[PRIVATE_VALUE])
}
}
// 在其他文件
import { Pattern } from 'Pattern.js'
const pattern = new Pattern()
console.log(pattern) // Pattern {}
console.log(Object.getOwnPropertySymbols(pattern)) // []
console.log(Object.keys(pattern)) // []
pattern.fun() // '私有属性，你们访问不到'扩展遍历
ES6 新推出的 for of 遍历非常方便，但就是不能直接遍历对象，需要先调用 Object.keys 方法获取属性列表，才能遍历。
我们可以通过 Symbol.iterator 配合生成器，将 Object.keys 操纵提前进行，方便我们遍历对象。
Object.prototype[Symbol.iterator] = function* () {
let keys = Object.keys(this)
for (let i = 0; i < keys.length; i++) {
// yield [keys[i], this[keys[i]]]
yield keys[i]
}
}
const obj = { a: 1, b: 2, c: 3 }
for (const key of obj) {
console.log(key) // 'a' 'b' 'c'
}
// for (const [key, value] of obj) {
// console.log(key, value)
// }
console.log([...obj]) // ['a', 'b', 'c']
console.log({ ...obj }) // {a: 1, b: 2, c: 3}如果你想更简便一点，可以使用上面被注释掉的代码，一次性获取对象的键与值。
我们还可以扩展数字，替代手写传统的 for 循环。
Number.prototype[Symbol.iterator] = function* () {
for (let i = 0; i < this.valueOf(); i++) {
yield i
}
}
const arr = [...5]
console.log(arr) // [0, 1, 2, 3, 4]
for (const i of arr.length) {
console.log(arr[i]) // 0 1 2 3 4
}禁止对象的类型转换
当你的代码中出现对象向基础数据类型转换时，这往往都是一个错误，而且也不利于代码的阅读与维护。
可以通过配置 Symbol.toPrimitive 属性让代码直接报错。
const obj = {}
console.log(obj == '[object Object]') // true
Object.prototype[Symbol.toPrimitive] = () => {
throw Error('不允许对象向基础数据类型转换')
}
console.log(obj == '[object Object]') // Error: 不允许对象向基础数据类型转换兼容性
除了 IE 浏览器这个前端大毒瘤，其他主流浏览器都已经实现了 symbol 的全部功能。
如果你的项目不需要兼容 IE，大胆的使用 symbol 方便你的开发吧。
结语
如果文中有错误或不严谨的地方，请务必给予指正，十分感谢。
内容整理不易，如果喜欢或者有所启发，希望能点赞关注，鼓励一下作者。
