告别命名冲突:ES6 Symbol实战指南

78 阅读1分钟

1.Symbol的定义:

Symbol是JavaScript语言的第七种数据类型,具有唯一性,主要用于定义对象的唯一属性名或定义不会重复的常量,以解决命名冲突的问题。

2.Symbol的特点:

  1. 每个Symbol值都是唯一的,即使传入相同的字符串参数创建Symbol,也不会得到相同的值。
  2. Symbol值不能与其他数据进行运算。
  3. Symbol定义的对象属性不能使用for...in,Object.keys()循环遍历,但可以使用Reflect.ownKeys来获取对象的所有键名。
let st1=Symbol('李四')
let st2=Symbol('李四')
console.log(st1===st2)//false

 let lv=Symbol('Level')
 let person={
  name:'Alex',
  age:18,
  [lv]:'优秀'
  
}
for(let key in person){
  console.log(key) // name , age
}
console.log(Object.keys(person)) // ['name' , 'age']

console.log(Object.getOwnPropertySymbols(person)) //[Symbol(Level)]

console.log(Reflect.ownKeys(person)) // ['name','age',Symbol(Level)]

2.Symbol的使用场景:

Symbol 的使用场景(1):对象中如果key一样,则后面的会替换前面的key。使用Symbol 则可以解决key冲突

Symbol 的使用场景(2):消除魔术字符串

//场景1:

let st1=Symbol('李四')
let st2=Symbol('李四')
console.log(st1===st2)//false
let obj2={
    [st1]:{age:18},
    [st2]:{age:19}

}
console.log(obj2)
console.log(obj2[st1])//李四
console.log(obj2[st2])//李四
//场景2:
let shapeType1={
    trignle:'',
    circle:''
}

//消除魔术字符串
let shapeType2={
    trignle:Symbol(),
    circle:Symbol()
}
function getShape(val){
    let area=0
    switch(val){
        case shapeType.trignle:
            area=1
            break
        case shapeType.circle:
            area=2
            break
    }
    return area

}

let circle1=getShape(shapeType1.circle)
let areaval1=getShape(shapeType1.trignle)
console.log('circle1=====1',circle1)//1
console.log('areaval1=====1',areaval1)//1


let circle2=getShape(shapeType2.circle)
let areaval2=getShape(shapeType2.trignle)
console.log('circle2=====1',circle2)//2
console.log('areaval2=====1',areaval2)//1