明天小编和大家来聊一聊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) // falseconst 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不是对象,不能用看待对象的形式看待Symbolconsole.log(s.description) // undefindconsole.log(s.name) // undefindlet 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)) // undefindconst 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)}

利用三:打消魔法字符串(比拟长或者难以辨认,容易出错的字符串)

// 函数实现基本功能,函数中【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