Introduction détaillée à Symbol dans ES6 (exemple de code)-js tutoriel-php.cn

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

不言

Libérer： 2019-03-13 13:34:10

avant

2649 Les gens l'ont consulté

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

Copier après la connexion

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

var sym = Symbol(&#39;foo&#39;);
typeof sym;     // "symbol"

Copier après la connexion

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

var sym2 = Symbol(&#39;foo&#39;);
var sym3 = Symbol(&#39;foo&#39;);

Copier après la connexion

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

Symbol(&#39;foo&#39;) === Symbol(&#39;foo&#39;); // false

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

. 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"});  // &#39;{}&#39;

Copier après la connexion

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

var mySymbol1 = Symbol.for(&#39;some key&#39;); 
var mySymbol2 = Symbol.for(&#39;some key&#39;);
mySymbol1 == mySymbol2 //true

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 = [&#39;Angular&#39;, &#39;React&#39;, &#39;Vue&#39;, &#39;Koa&#39;, &#39;Ionic&#39;];
    }
    [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}`);
}

Copier après la connexion

Symbol.search

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

&#39;angular&#39;.search(&#39;ng&#39;) // 4

Copier après la connexion

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

Copier après la connexion

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 ? &#39;Found&#39; : &#39;Not_Found&#39;;
    }
}
var article = new Article(&#39;Angular&#39;);
console.log(&#39;Angular7&#39;.search(article)); // Found
console.log(&#39;重温ES6&#39;.search(article)); // Not_Found

Copier après la connexion

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!