Introduction détaillée à Symbol dans ES6 (exemple de code)

Cet article vous apporte une introduction détaillée (exemple de code) sur Symbol dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Symbol est un nouveau type de données primitif introduit dans ES6 qui représente une valeur unique.

Caractéristiques du symbole

1. Le symbole est créé via la fonction d'usine et ne peut pas être créé par new, donc le résultat renvoyé en utilisant l'opérateur instanceof est faux

var sym = Symbol();
var sym1 = new Symbol(); // TypeError
sym instanceof Symbol // false

2. Le symbole utilise l'opérateur typeof pour renvoyer "symbole"

var sym = Symbol('foo');
typeof sym;     // "symbol"

3. La fonction d'usine de symboles peut prendre en charge un paramètre facultatif pour décrire le symbole actuel

var sym2 = Symbol('foo');
var sym3 = Symbol('foo');

4.Le symbole est le seul , Symbol("foo") == Symbol("foo") renvoie false

Symbol('foo') === Symbol('foo'); // false

5 Lorsque Symbol est utilisé avec une valeur numérique ou une chaîne, une exception sera levée

sym | 0 // TypeError
Symbol("foo") + "bar" // TypeError

6. Le symbole renvoyé par la fonction Symbol factory peut être utilisé comme nom d'attribut de l'objet pour éviter les conflits d'attributs. Il n'est pas énumérable dans l'itération for...in

var obj = {};
obj[Symbol("a")] = "a";
obj[Symbol.for("b")] = "b";
obj["c"] = "c";
obj.d = "d";
for (var i in obj) {
   console.log(i); // logs "c" and "d"
}

. 7.Symbole renvoyé par la fonction factory La valeur peut être utilisée comme nom de propriété d'objet Lors de la sérialisation à l'aide de JSON.stringify(), cette propriété sera ignorée

JSON.stringify({[Symbol("foo")]: "foo"});  // '{}'

8.Le symbole est unique, mais vous. peut utiliser Symbol.for() Partager la même valeur de symbole

var mySymbol1 = Symbol.for('some key'); 
var mySymbol2 = Symbol.for('some key');
mySymbol1 == mySymbol2 //true

Combat réel du symbole

Propriétés et méthodes privées littérales d'objet

const myPrivateMethod = Symbol("myPrivateMethod");
const myPrivateProperty = Symbol("myPrivateProperty");
const obj = {
    [myPrivateProperty]: "semlinker",
    [myPrivateMethod]() {
        return `Hello ${this[myPrivateProperty]}!!!`;
    },
    hello() {
        console.log(this[myPrivateMethod]()); 
    }
};
console.log(Object.keys(obj));
console.log(obj.hello());

En plus d'utiliser Symbol lors de la création de littéraux d'objet, il peut également être utilisé lors de la définition des propriétés privées et des méthodes d'une classe.

Propriétés et méthodes privées de la classe

const myPrivateMethod = Symbol("myPrivateMethod");
const myPrivateProperty = Symbol("myPrivateProperty");
class MyClass {
    constructor() {
        this[myPrivateProperty] = "semlinker";
    }
    [myPrivateMethod]() {
        return `Hello ${this[myPrivateProperty]}!!!`;
    }
    hello() {
        console.log(this[myPrivateMethod]()); 
    }
}
const myCls = new MyClass();
console.log(myCls.hello());

Dans ES6, certains symboles globaux sont introduits, tels que : Symbol.match, Symbol.replace, Symbol.search, Symbol.iterator et Symbole.split. Nous présentons ici brièvement Symbol.search et Symbol.iterator.

Symbol.iterator

class Skill {
    constructor() {
        this.skills = ['Angular', 'React', 'Vue', 'Koa', 'Ionic'];
    }
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                const value = this.skills[index++];
                const done = index === this.skills.length + 1;
                return {
                    value,
                    done
                };
            }
        }
    }
}
const mySkills = new Skill();
console.log([...mySkills]);
for (let skill of mySkills) {
    console.log(`My skill is ${skill}`);
}

Symbol.search

Jetons un bref coup d'œil à un exemple :

'angular'.search('ng') // 4

Le processus d'exécution de ceci exemple :

Analyser 'angular'.search('ng')

Convertir 'angular' en un objet chaîne new String('angular')

Convertir 'ng' to Regular object new Regexp('ng')

Appelle la méthode de recherche de l'objet chaîne 'angulaire', qui appellera automatiquement la méthode Symbol.search de l'objet régulier ng

Pour plus de détails, veuillez reportez-vous au pseudocode suivant :

// pseudo code for String class
class String {
    constructor(value) {
        this.value = value;
    }
    search(obj) {
        obj[Symbol.search](this.value);
    }
}
class RegExp {
    constructor(value) {
        this.value = value;
    }
    [Symbol.search](string) {
        return string.indexOf(this.value);
    }
}

De plus, en utilisant Symbol.search, nous pouvons également laisser la méthode String.prototype.search() appeler la méthode Symbol.search() à l'intérieur de notre objet personnalisé pour implémenter une personnalisation logique de recherche :

class Article {
    constructor(tag) {
        this.tag = tag;
    }
    [Symbol.search](string) {
        return string.indexOf(this.tag) >= 0 ? 'Found' : 'Not_Found';
    }
}
var article = new Article('Angular');
console.log('Angular7'.search(article)); // Found
console.log('重温ES6'.search(article)); // Not_Found

Le flux d'exécution de l'exemple ci-dessus :

Analyser l'instruction 'Angular7'.search(article)

Convertir 'Angular7' en chaîne object new String(" Angular7")

Puisque l'article est un objet, aucune conversion n'est requise ici

Appelez la méthode de recherche de l'objet chaîne 'Angular7', qui appellera automatiquement le symbole. méthode de recherche à l'intérieur de l'objet article. Par exemple article[Symbol.search]('Angular7')

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!