A brief analysis of javascript data type learning Symbol type

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

declaration methods

. Symbol values ​​are generated through the Symbol function. There are two types of attribute names of objects, 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.

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

//Symbol function can accept string as parameter, indicating the description of Symbol instance let s1=Symbol('xxx')
let s2=Symbol('hhh')
console.log(s1)
//Symbol(xxx)
console.log(s2)
//Symbol(hhh)
console.log(s1===s2)
//falseYou cannot use the new command before copying the code

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 a Symbol value with the parameter as its name. If there is, return the Symbol value, otherwise create a new Symbol value with the string as its name 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

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 the key of a registered Symbol type value.

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

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

application scenario is

used as an attribute name

. Since Symbol values ​​are not equal, this means that Symbol values ​​can be used as identifiers and used in the attribute names of objects to ensure that they will not An attribute with the same name appears. This is useful when an object is composed of multiple modules, to prevent a key from being accidentally overwritten or overwritten.

const grade={
    Zhang San:{address:'qqq',tel:'111'},
    Li Si:{address:'aaa',tel:'222'},
    Li Si:{address:'sss',tel:'333'},
}
console.log(grade)
//Zhang San: {address: "qqq", tel: "111"} Li Si: {address: "sss", tel: "333"}
//The key value of the object cannot be repeated. If there is a repeat, the subsequent value value will overwrite the previous //Use Symbol to solve, which is equivalent to a unique string 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)
//John Doe: {address:'sss',tel:'222'} John Doe: {address:'sss',tel:'333'}
console.log(grade[stu1])
//Li Si: {address:'sss',tel:'222'}
console.log(grade[stu2])
//Li Si: {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')

//The for in method cannot traverse to the Symbol attribute as it is hidden for(let key in user){
    console.log(key)//name 
}

//Object.keys(obj) method cannot traverse to Symbol property for(let key of Object.keys(user)){
    console.log(key)//name 
}

//Object.getOwnPropertySymbols(obj) can only get the Symbol property for(let key of Object.getOwnPropertySymbols(user)){
    console.log(key)//Symbol(imooc) 
}

//Reflect.ownKeys(obj) object properties can be obtained for(let key of Reflect.ownKeys(user)){
    console.log(key)
    //name 
    //Symbol(imooc) 
}

Eliminate magic strings

Magic strings refer to a specific string or value that appears multiple times in the code and forms a 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 and Circle are magic strings. It appears many times, forming a "strong coupling" with the code, which is not conducive to subsequent modification and maintenance.

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 error in the article, please give me some advice and discussion!

[Related video tutorial recommendation: web front-end]

The above is the detailed content of the JavaScript data type learning and a brief analysis of the Symbol type. For more information, please pay attention to other related articles on the PHP Chinese website!