Es6中的Symbol到底是个啥

253 阅读2分钟

Symbol基础:

Symbol是唯一的数据结构, 只要你声明了Symbol, 那么就是唯一的了. 是ES6 中引入的一种新的原始数据类型Symbol,它是 JavaScript 语言的第七种数据类型,前六种是:nullundefinedbooleanstringnumberobject

创建/访问方法:

  1. 直接声明:
   let ck = Symbol('ck') // 后面的‘ck’不是Symbol存储的值, 只是为了区别不同的Symbol的描述. 
   let kb = Symbol('kb')
   console.log(ck);
   console.log(kb);
   console.log(ck === kb) // false

   // 即使后面的描述是一样的, 两个返回的也是false
   let ck2  = Symbol('ck2')
   let ck3 = Symbol('ck2')
   console.log(ck2 === ck3) // false

2.通过for声明

 let ck1 = Symbol.for('ck1')
 let kb1 = Symbol.for('kb1')
 console.log(Symbol.keyFor(ck1));
 console.log(Symbol.keyFor(kb1));

通过for声明的Symbol, 要使用keyFor()来进行访问.

3.使用了Symbol声明的对象, 遍历的几种方式.

    const symbol = Symbol('this is the Symbol')
    const User = {
      name:'ck',
      [symbol]: 'ck is not a student any more'
    }

    // 只能遍历到普通属性
    for(let item in User) {
      console.log(item);
    }
    // name

    // 只能遍历到普通属性
    for(let item of Object.keys(User)){
      console.log(item);
    }
    // name

    // 遍历Symbol属性
    for(let item of Object.getOwnPropertySymbols(User)){
      console.log(item);
    }
    // symbol

    // 遍历到普通属性、Symbol属性
    for(const item of Reflect.ownKeys(User)){
      console.log(item);
    }
    // name symbol

4.对象要隐藏一些不想别人访问到的属性

    let symbol = Symbol('thi is a Symnol')

    class User{
            constructor(name, value){
                    this.name = name
                    this[symbol] = value
            }
    getName() {
            return `${this.name}${this[symbol]}`
            }
    }

    const user = new User('bob', 'is a cookie')

    for(const item in user){
            console.log(item) // name 没有value, 因为访问不到
    }

    for(const item in Reflect.ownKeys(user)){
            console.log(item) // name、symbol
    }

Symbol到底用来干啥的

  • Symbol不是直接存储数据的, 而是, 作为一个独一无二的key, 放置数据的, 防止数据因为重复, 无法存进数据对象中, 例如: obj中,存入key为1和‘1’的值, 后面的会把前面的覆盖掉.
class Cache{
    static data = {}
    static set(name, value) {
        this.data[name] = value
    }
    static get(name){
        console.log(this.data[name])
        return this.data[name]
    }
}

let user = {
    name:'用户信息',
    key:Symbol('用户信息')
}

let cart = {
    name: '购物车信息',
    key: Symbol('购物车信息')
}

Cache.set(cart.key, '这是购物车存储的信息')
Cache.set(user.key, '这是用户存储的信息')
Cache.get(user.key) // 这是用户存储的信息
Cache.get(cart.key) // 这里购物车存储的信息
console.log(Cache.data) // { [Symbol(购物车信息)]: '这是购物车存储的信息', [Symbol(用户信息)]: '这是用户存储的信息' }

前端小白,有错误和不当之处, 忘各位大神指出, 如果感觉小弟码字不易, 麻烦给个👍, 谢谢!