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函數(shù)能接受字符串作為參數(shù)，表示對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就是魔術(shù)字符串。多次出現(xiàn)，與代碼形成了“強耦合”，不利于后面的修改和維護。

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!