ES6中的新数据类型——Symbol
今天小编和大家来聊一聊es6中新增的一个原始数据类型Symbol。在es5中原始数据类型（基本数据类型）有以下六种：Undefind、Null、Bool、 String、Number、Object。今天结合实例和大家一起探讨一下这个神奇的Symbol。大家也可以关注我的微信公众号，蜗牛全栈。
一、基本声明方式
1、方式一
let s1 = Symbol()
let s2 = Symbol()
console.log(s1) // Symbol{}
console.log(s2) // Symbol{}
console.log(s1 === s2) // false 说明每一个Symbol用这种方式声明都是与众不同的。后续会有应用2、方式二
let s1 = Symbol('foo')
let s2 = Symbol('bar')console.log(s1) // Symbol(foo)
console.log(s2) // Symbol(bar)
console.log(s1 === s2) // false
const obj = {
name:"lilei",
toString(){
return this.name
}
}
let s = Symbol(obj) // 如果参数是Object的时候，会自动调用该对象的toString方法
console.log(s) // Symbol(lilei)3、关于description
let s = Symbol()
s.name = "lilei"
console.log(s) // Symbol{} // Symbol不是对象，不能用对待对象的方式对待Symbol
console.log(s.description) // undefind
console.log(s.name) // undefind
let s = Symbol('foo')
console.log(s.description) // foo二、Symbol.for：通过Symbol.for相当于定义在全局的变量，如果之前声明过，后面再通过Symbol.for的时候，会在全局找，如果描述一样的话，会和上一个一样。可以简单理解为对象指向同一个堆内存地址。
let s1 = Symbol.for('foo')
let s2 = Symbol.for('foo')
console.log(s1) // Symbol(foo)
console.log(s1 === s2) // true
// 即使是在函数定义域内，通过Symbol.for也会将该Symbol注册在全局
function foo(){
return Symbol.for('foo')
}const x = foo()
const y = Symbol.for('foo')
console.log(x === y) // true三、Symbol.keyFor：查看是否在全局登记Symbol里面的描述。与上面的Symbol.for对应。
const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefind
const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s1)) // foo四、实际应用：
应用一：解决对象中key重复但是表示不同信息的情况
// 对象对于相同的key的信息会进行覆盖
const grade = {
zhangsan:{
address:"xxx",tel:"111"
},
lisi:{
address:"yyy",tel:"222"
},
lisi:{
address:"zzz",tel:"333"
},
}console.log(grade) // {zhangsan:{address:"xxx",tel:"111"},lisi:{address:"zzz",tel:"333"}}
// 通过变量构建对象
const stu1 = "lisi"
const stu2 = "lisi"
const grade = {
[stu1]:{
address:"yyy",tel:"222"
},
[stu2]:{
address:"zzz",tel:"333"
},
}
console.log(grade) // {lisi:{address:"zzz",tel:"333"}}
// es6通过Symbol解决key相同，信息不同情况
const stu1 = Symbol("lisi")
const stu2 = Symbol("lisi")
const grade = {
[stu1]:{
address:"yyy",tel:"222"
},
[stu2]:{
address:"zzz",tel:"333"
},
}
console.log(grade) // {Symbol(lisi):{address:"yyy",tel:"222"},Symbol(lisi):{address:"zzz",tel:"333"}}
console.log(grade[stu1]) // {address:"yyy",tel:"222"}应用二：保护类中的部分属性
// 定义基本类和类中方法调用
class User{
constructor(name){
this.name = name
}
getName(){
return this.name
}
}const user = new User("lilei")
console.log(user.getName()) // lilei
// 不同循环遍历方式获取类内部属性，根据是否可以获取Symbol作为key的情况
const sym = Symbol("AILI")
class User{
constructor(name){
this.name = name
this[sym] = "AILI.com"
}
getName(){
return this.name + this[sym]
}
}const user = new User("lilei")
console.log(user.getName()) // lileiAILI.com// 通过for...in 无法遍历到Symbol属性
for(let key in user){
console.log(key) // name
}// 同样不能获取到Symbol属性
for(let key of Object.keys(user)){
console.log(key) // name
}
// 只能取到Symbol属性
for(let key of Object.getOwnPropertySymbols(user)){
console.log(key) // Symbol(AILI)
}// 即能获取到普通属性，又能获取到Symbol属性
for(let key of Reflect.ownKeys(user)){
console.log(key) // name Symbol(AILI)
}【ES6中的新数据类型——Symbol】应用三：消除魔法字符串（比较长或者难以辨认，容易出错的字符串）
// 函数实现基本功能，函数中【Triangle】和【Circle】比较容易出错
function getArea(shape){
let area = 0
switch(shape){
case "Triangle":
area = 1
break
case "Circle":
area = 2
break
}
return area
}
console.log(getArea("Triangle")) // 1// 通过对象，将魔法字符串初步隐藏
const shapeType = {
triangle:"Triangle",
circle:"Circle"
}
function getArea(shape){
let area = 0
switch(shape){
case shapeType.triangle:
area = 1
break
case shapeType.circle:
area = 2
break
}
return area
}
console.log(getArea(shapeType.triangle)) // 1// 在这个函数中，【Triangle】和【Circle】已经不重要，只要区分开即可，利用Symbol不一致性
const shapeType = {
triangle:Symbol(),
circle:Symbol()
}
function getArea(shape){
let area = 0
switch(shape){
case shapeType.triangle:
area = 1
break
case shapeType.circle:
area = 2
break
}
return area
}
console.log(getArea(shapeType.triangle)) // 1推荐阅读
- 热闹中的孤独
- JS中的各种宽高度定义及其应用
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- Android中的AES加密-下
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 六步搭建ES6语法环境
- 放下心中的偶像包袱吧
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解