今天小编和大家来聊一聊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.co// 通过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) }
应用三:消除魔法字符串(比较长或者难以辨认,容易出错的字符串)
// 函数实现基本功能,函数中【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