关于javascript: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)
}

利用三：打消魔法字符串（比拟长或者难以辨认，容易出错的字符串）

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