对于 Symbol 的理解，一直比较陌生，只知道他是 ES6 的语法规范，具体概念，可参考阮一峰老师的 Symbol 文章。这里我就自己的理解写，不讲概念，写一个容易理解的demo，介绍 Symbol 的作用。

传统obj key值的痛点

一个亿万富豪，有几个儿子和女儿，还有一私生子，如果此时，我们直接这样定义这个亿万富豪：

1
2
3
4
5
let billionaire = {
  son: ['son1', 'son2', 'son3',],
  daughter: ['daughter1', 'daughter2'],
  son: 'bastard'
}

在控制台我们会发现，私生子bastard 会直接覆盖掉前面的son，这显然是不合适的
直接覆盖掉前面的属性

于是 Symbol 作为ES里原始的数据类型的作用就出现了

利用 Symbol 添加私生子, 解决痛点

正确的做法应该如下，先定义了儿子和女儿们：

1
2
3
4
let billionaire = {
  son: ['son1', 'son2', 'son3',],
  daughter: ['daughter1', 'daughter2']
}

把私生子 son: 'bastard' 单独抽出来，用 Symbol 定义，以下有3种定义方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const son = Symbol('son')

// 1.
billionaire[son] = 'bastard'

// 2.
let billionaire = {
  son: ['son1', 'son2', 'son3',],
  daughter: ['daughter1', 'daughter2'],
  [son] : 'bastard'
}

// 3. 
Object.defineProperty(billionaire, son, { value: 'bastard' })

用Symbol生成私生子

至此，Symbol 的作用很明确了，

由于 JS 的 obj key值为字符串，为了避免 JS 的 obj 中属性名字的冲突而产生

私生子身份神秘，普通new，. 等方法对其无效，只有亿万富翁自己知道

由于 Symbol 是原始类型，没有构造函数，不能使用 new 关键字

Symbol不能用 new 关键字

也不能用 . 运算将其点出来：
Symbol用键名选择器才能将其选出来

私生子的身份确认如何得到保障？

作为亿万富豪的私生子，只有亿万富豪自己一个人知道其身份，所以，我们用普通方法是找不到这个私生子的：

普通方法找不到私生子

而私生子有独特的方法能得到确认，Symbol 为我们提供了几种方法

Object.getOwnPropertySymbols()

1
2
3
4
const querySon = Object.getOwnPropertySymbols(billionaire)

console.log(querySon)
// [Symbol(son)]

多个私生子

亿万富豪也可能有不止一个私生子，比如和 ‘知己小秘’ 生了一个私生子，和 ‘灵魂伴侣’ 又生了一个私生子，此时我们可以用 Symbol.for() 定义:

1
2
3
4
5
6
const bastard1 = Symbol.for('知己小秘')
billionaire[bastard1] = '知己小秘儿子1'
const bastard2 = Symbol.for('灵魂伴侣')
billionaire[bastard2] = '灵魂伴侣儿子1'

console.log(billionaire)
1
2
3
4
5
6
{
  son: [ 'son1', 'son2', 'son3' ],
  daughter: [ 'daughter1', 'daughter2' ],
  [Symbol(知己小秘)]: '知己小秘儿子1',
  [Symbol(灵魂伴侣)]: '灵魂伴侣儿子1'
}

Symbol key值同名时，其 value 也能被覆盖掉

如果 ‘灵魂伴侣’ 又生多了一个私生子 ‘灵魂伴侣儿子2’ ，会出现什么情况？

1
2
3
4
const bastard3 = Symbol.for('灵魂伴侣')
billionaire[bastard3] = '灵魂伴侣儿子2'

console.log(billionaire)

直接打印出来，会发现 value 值 ‘灵魂伴侣儿子2’ 覆盖掉了 ‘灵魂伴侣儿子1’

1
2
3
4
5
6
{
  son: [ 'son1', 'son2', 'son3' ],
  daughter: [ 'daughter1', 'daughter2' ],
  [Symbol(知己小秘)]: '知己小秘儿子1',
  [Symbol(灵魂伴侣)]: '灵魂伴侣儿子2'
}

bastard2 和 bastard3 都是Symbol值，它们都是由同样参数的 Symbol.for 方法生成的key，所以实际上是仍是同一个值: 

1
2
console.log(bastard2 === bastard3)
// true

查询所有儿女，包括私生子的Key值：Reflect.ownKeys()

会以一个数组返回所有 Key 值，包括 Symbol Key 

1
2
console.log(Reflect.ownKeys(billionaire))
// [ 'son', 'daughter', Symbol(知己小秘), Symbol(灵魂伴侣) ]

Symbol.for() 和 Symbol() 生成的Key值有何不同

Symbol.for() 会被登记在全局环境中供搜索，而 Symbol() 就不会，我们改动私生子为 Symbol() 生成，如：

1
2
3
4
5
6
7
8
9
10
const bastard1 = Symbol.for('知己小秘')
billionaire[bastard1] = '知己小秘儿子1'
const bastard2 = Symbol('灵魂伴侣')
billionaire[bastard2] = '灵魂伴侣儿子1'

console.log(bastard1, Symbol.keyFor(bastard1))
console.log(bastard2, Symbol.keyFor(bastard2))

// Symbol(知己小秘) 知己小秘
// Symbol(灵魂伴侣) undefined

换句话说，Symbol.for() 每次生成前，会检查全局环境中是否存在该Key；Symbol() 则不会，每次调用会每次都生成

1
2
3
4
5
console.log(Symbol.for('a') === Symbol.for('a'))
// true

console.log(Symbol('a') === Symbol('a'))
// false
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~