Eine kurze Analyse des Symboltyps zum Erlernen von Javascript-Datentypen

Dieser Artikel führt Sie durch den neuen Datentyp von ES6: Symbol. Lassen Sie uns über die Deklarationsmethode und die Verwendung des Symboltyps sprechen.

Symbol ist ein neuer primitiver Datentyp, der Einzigartigkeit darstellt. Es ist der siebte Datentyp in JavaScript. Die anderen sechs sind: undefiniert, null, String, Zahl, Objekt

Deklarationsmethode

Der Symbolwert wird über die Symbolfunktion generiert. Der Attributname eines Objekts kann zwei Typen haben, einer ist die ursprüngliche Zeichenfolge und der andere ist der neue Symboltyp. Attributnamen sind vom Typ Symbol und eindeutig, sodass sie nicht mit anderen Attributnamen in Konflikt geraten. [Verwandte Empfehlungen: Javascript-Lerntutorial]

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复制代码

Sie können den neuen Befehl nicht vor der Symbolfunktion verwenden und es wird ein Fehler gemeldet. Dies liegt daran, dass das generierte Symbol ein Wert eines primitiven Typs und kein Objekt ist. Das heißt, da Symbolwerte keine Objekte sind, können keine Eigenschaften hinzugefügt werden. Entspricht einer speziellen Zeichenfolge.

Symbol.for() definiert Symbol global

Symbol.for() akzeptiert eine Zeichenfolge als Parameter und sucht dann nach einem Symbolwert mit diesem Parameter als Namen. Wenn dies der Fall ist, geben Sie diesen Symbolwert zurück. Andernfalls erstellen Sie einen neuen Symbolwert mit dem Namen dieser Zeichenfolge und registrieren Sie ihn global.

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() und Symbol() generieren neue Symbole. Der Unterschied besteht darin, dass Ersteres in der globalen Umgebung für die Suche registriert wird, Letzteres jedoch nicht. Symbol.for() gibt nicht bei jedem Aufruf einen neuen Symboltypwert zurück. Stattdessen prüft es zunächst, ob der angegebene Schlüssel bereits vorhanden ist, und erstellt dann einen neuen Wert, falls er nicht vorhanden ist.

Symbol.keyFor()

Die Methode Symbol.keyFor() gibt einen registrierten Symboltyp-Wertschlüssel zurück.

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

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

Anwendungsszenarien

als Attributnamen

Da Symbolwerte nicht gleich sind, bedeutet dies, dass Symbolwerte als Bezeichner und in Objektattributnamen verwendet werden können, um sicherzustellen, dass dies der Fall ist Nicht angezeigt Eigenschaft mit demselben Namen. Dies ist nützlich, wenn ein Objekt aus mehreren Modulen besteht, um zu verhindern, dass ein Schlüssel versehentlich überschrieben oder überschrieben wird.

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'}

Attributdurchquerung

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

Eliminierung von Magic String

Magic String bezieht sich auf einen bestimmten String oder Wert, der mehrfach im Code vorkommt und eine starke Kopplung mit dem Code bildet. Code mit gutem Stil sollte versuchen, magische Zeichenfolgen zu eliminieren und sie durch Variablen mit klarer Bedeutung zu ersetzen.

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

Ich bin ein Front-End-Neuling. Wenn der Artikel falsche Inhalte enthält, geben Sie mir bitte einige Ratschläge und Diskussionen!

【Empfohlene verwandte Video-Tutorials: Web-Frontend】

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Symboltyps zum Erlernen von Javascript-Datentypen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!