A brief analysis of javascript data type learning Symbol type

This article will take you through the new data type of ES6: Symbol, and talk about the declaration and usage of the Symbol type. I hope it will be helpful to everyone!

Symbol is a new primitive data type that represents uniqueness. It is the seventh data type in JavaScript. The other six are: undefined, null, String, Number, Object

Declaration method

Symbol value is generated through the Symbol function. The attribute name of an object can have two types, one is the original string, and the other is the new Symbol type. Attribute names are of the Symbol type and are unique, ensuring that they will not conflict with other attribute names. [Related recommendations: javascript learning tutorial]

let s1=Symbol()
let s2=Symbol()
console.log(s1)
//Symbol()
console.log(s2)
//Symbol()
console.log(s1===s2)
//false

//Symbol函数能接受字符串作为参数，表示对Symbol实例的描述
let s1=Symbol('xxx')
let s2=Symbol('hhh')
console.log(s1)
//Symbol(xxx)
console.log(s2)
//Symbol(hhh)
console.log(s1===s2)
//false复制代码

You cannot use the new command before the Symbol function, and an error will be reported. This is because the generated Symbol is a primitive type value, not an object. That is, since Symbol values ​​are not objects, properties cannot be added. Equivalent to a special string.

Symbol.for() Global definition of Symbol

Symbol.for() accepts a string as a parameter, and then searches for whether the parameter is used as a name Symbol value. If there is, return this Symbol value, otherwise create a new Symbol value named with this string and register it globally.

let s1 = Symbol.for('xxx')
let s2 = Symbol.for('xxx')
console.log(s1 === s2) // true


function foo(){
    return Symbol.for('hello')
}
const x=foo()
const y=Symbol.for('hello')
console.log(x === y)//true

The two writing methods of Symbol.for() and Symbol() will generate new Symbol. The difference is that the former will be registered in the global environment for search, while the latter will not. Symbol.for() will not return a new Symbol type value every time it is called. Instead, it will first check whether the given key already exists, and then create a new value if it does not exist.

Symbol.keyFor()

The Symbol.keyFor() method returns a registered Symbol type value key.

const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefined

const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s2)) // foo

Application scenario

As an attribute name

Since the Symbol values ​​are not equal, this means ## The #Symbol value can be used as an identifier and used in the object's attribute name to ensure that attributes with the same name will not appear. This is useful when an object is composed of multiple modules, to prevent a key from being accidentally overwritten or overwritten.

const grade={
    张三:{address:'qqq',tel:'111'},
    李四:{address:'aaa',tel:'222'},
    李四:{address:'sss',tel:'333'},
}
console.log(grade)
//张三: {address: "qqq", tel: "111"} 李四: {address: "sss", tel: "333"}
//对象的key值不能重复 如果有重复 后面的value值就会覆盖前面的


//使用Symbol解决，相当于一个独一无二的字符串
const stu1=Symbol('李四'）
const stu2=Symbol('李四')
console.log(stu1===stu2)
//false
const grade={
    [stu1]:{address:'aaa',tel:'222'},
    [stu2]:{address:'sss',tel:'333'},
}
console.log(grade)
//李四：{address:'sss',tel:'222'} 李四：{address:'sss',tel:'333'}
console.log(grade[stu1])
//李四：{address:'sss',tel:'222'}
console.log(grade[stu2])
//李四：{address:'sss',tel:'333'}

Attribute traversal

const sym=Symbol('imooc')
class User{
    constructor(name){
        this.name=name
        this[sym]='imooc.com'
    }
    getName(){
        return this.name+this[sym]
    }
}
const user=new User('www')

//for in的方法不能遍历到Symbol属性 像被隐藏了
for(let key in user){
    console.log(key)//name 
}

//Object.keys(obj)方法也不能遍历到Symbol属性
for(let key of Object.keys(user)){
    console.log(key)//name 
}

//Object.getOwnPropertySymbols(obj)只能获取到Symbol属性
for(let key of Object.getOwnPropertySymbols(user)){
    console.log(key)//Symbol(imooc) 
}

//Reflect.ownKeys(obj)对象的属性都能获取到
for(let key of Reflect.ownKeys(user)){
    console.log(key)
    //name 
    //Symbol(imooc) 
}

Eliminate magic string

Magic string refers to, multiple times in the code A specific string or value that appears and forms

strong coupling with the code. Code with good style should try to eliminate magic strings and replace them with variables with clear meanings.

function getArea(shape) {
    let area = 0
    switch (shape) {
        case 'Triangle':
            area = 1
            break
        case 'Circle':
            area = 2
            break
    }
    return area
}
console.log(getArea('Triangle'))
//Triangle和Circle就是魔术字符串。多次出现，与代码形成了“强耦合”，不利于后面的修改和维护。

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))

I am a front-end novice. If there is any wrong content in the article, please give me some advice and discussion!

[Related video tutorial recommendations:

web front-end]

The above is the detailed content of A brief analysis of javascript data type learning Symbol type. For more information, please follow other related articles on the PHP Chinese website!