重学ES6之Symbol

2021-11-15 15:44:44 浏览数 (2)

新的基本数据类型Symbol

  • 声明方法。
代码语言:javascript复制
let s1 = Symbol()
let s2 = Symbol("desc")
s2.desctipion

let s3 = Symbol.for('xx')
s3.keyFor(s3) // 返回xx 寻找全局声明s3的描述 存在就返回,不存在返回undefined


api 
symbol.description // 实例属性,获得描述

// 注意symbol并不是对象
// 而且symbol声明是独一无二的
// 但是Symbol.for()声明是全局范围的,全局环境内如果已经存在相同描述的那么就会覆盖。
// Symbol.for() 就相当于首先去全局找是否有全局for声明过的,如果有就覆盖之前的,如果没有就全局声明一个。

复制代码
  • 常用场景
  1. 当对象名称重复的时候使用symbol声明
代码语言:javascript复制
let a = {
    "张三":{ tel:133 },
    "张三":{ tel:666 }
}
// 对象中声明需要保证key的唯一,否则就会覆盖
console.log(a) // { "张三":{ tel:666 } }

// 使用symbol解决
const str = Symbol("张三")
const str2 = Symbol("张三")
let a = {
    [str]:{ tel:333 },
    [str2]: { tel:666 }
}
// 这个时候就不会覆盖了
console.log(a) // { Symbol(张三):{ tel:333 }, Symbol(张三): { tel:666 } }
// 获取的时候使用定义的str和str2变量获取就可以了
a[str]  // 获取第一个李四
a[str2] // 获取第二个李四
复制代码
  1. 消除魔幻字符串
代码语言:javascript复制
const types = {
// 我并不关心对象内部是什么
// 我只需要保证他们不重复就OK
    circle:Symbol(),
    react:Symbol()
}
function get area(shape) {
    switch(type) {
        case shape.circle:
        return 1
        case shape.react:
        return 2
        default:
        return 3
    }
}
area(types.circle)


复制代码
  1. 隐藏属性

Tips:

类上的symbol定义的属性无法通过for in获取。 Object.keys()也无法获取。 Object.getOwnPropertySymbol()可以获取,但是只能获取到symbol定义的属性。 Reflect.ownKeys()可以获取普通属性和symbol。 所以在class定义中,symbol可以mock成一种隐藏属性。(常规方式无法获得)

代码语言:javascript复制
const name = Symbol('wanghaoyu')
class People {
    constructor() {
        this[name] = 'wanghaoyu'
    }
}
复制代码

0 人点赞