Une brève analyse de l'apprentissage des types de données JavascriptType de symbole

Cet article vous présentera le nouveau type de données d'ES6 : Symbol Parlons de la méthode de déclaration et de l'utilisation du type Symbol. J'espère que cela sera utile à tout le monde !

Symbol est un nouveau type de données primitif qui représente l'unicité. Il s'agit du septième type de données en JavaScript. Les six autres sont : undefined, null, String, Number, Object

Méthode de déclaration

La valeur du symbole est générée via la fonction Symbol. Le nom d'attribut d'un objet peut avoir deux types, l'un est la chaîne d'origine et l'autre est le nouveau type de symbole. Les noms d'attribut sont du type Symbole et sont uniques, garantissant qu'ils n'entreront pas en conflit avec d'autres noms d'attribut. [Recommandations associées : Tutoriel d'apprentissage Javascript]

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

Vous ne pouvez pas utiliser la nouvelle commande avant la fonction Symbol, et une erreur sera signalée. En effet, le symbole généré est une valeur de type primitif, pas un objet. Autrement dit, puisque les valeurs des symboles ne sont pas des objets, les propriétés ne peuvent pas être ajoutées. Équivalent à une chaîne spéciale.

Symbol.for() définit Symbol globalement

Symbol.for() accepte une chaîne comme paramètre, puis recherche une valeur Symbol avec ce paramètre comme nom. Si tel est le cas, renvoyez cette valeur de symbole, sinon créez une nouvelle valeur de symbole nommée avec cette chaîne et enregistrez-la globalement.

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() et Symbol(), les deux méthodes d'écriture généreront un nouveau symbole. La différence est que les premiers seront enregistrés dans l’environnement mondial pour la recherche, tandis que les seconds ne le seront pas. Symbol.for() ne renverra pas une nouvelle valeur de type Symbol à chaque fois qu'il est appelé, il vérifiera d'abord si la clé donnée existe déjà, puis créera une nouvelle valeur si elle n'existe pas. La méthode

Symbol.keyFor()

Symbol.keyFor() renvoie une clé de valeur de type Symbol enregistrée.

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

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

Scénarios d'application

comme noms d'attributs

Étant donné que les valeurs des symboles ne sont pas égales, cela signifie que Les valeurs des symboles peuvent être utilisées comme identifiants et utilisées dans les noms d'attributs d'objet pour garantir qu'elles le seront n'apparaît pas Propriété portant le même nom. Ceci est utile lorsqu'un objet est composé de plusieurs modules, pour éviter qu'une clé ne soit accidentellement écrasée ou écrasée.

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

Traversée d'attributs

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

Élimination de la chaîne magique

La chaîne magique fait référence à une chaîne ou une valeur spécifique qui apparaît plusieurs fois dans le code et forme un couplage fort avec le code. Un code avec un bon style devrait essayer d'éliminer les chaînes magiques et de les remplacer par des variables ayant des significations claires.

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

Je suis un novice du front-end. S'il y a un mauvais contenu dans l'article, donnez-moi quelques conseils et discutez-en !

【Recommandation de didacticiel vidéo connexe : front-end Web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!