Detaillierte Einführung in Symbol in ES6 (Codebeispiel)

Der Inhalt dieses Artikels ist eine detaillierte Einführung (Codebeispiel) über Symbol in ES6. Ich hoffe, dass er für Freunde hilfreich ist.

Symbol ist ein neuer primitiver Datentyp, der in ES6 eingeführt wurde und einen eindeutigen Wert darstellt.

Symboleigenschaften

1. Das Symbol wird durch die Factory-Funktion erstellt und kann nicht mit „new“ erstellt werden, daher ist das durch die Verwendung des Operators „instanceof“ zurückgegebene Ergebnis falsch.

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

2.Symbolverwendung Der Typ des Operators gibt „Symbol“ zurück

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

3. Die Symbol-Factory-Funktion kann einen optionalen Parameter zur Beschreibung des aktuellen Symbols unterstützen

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

4. Symbol ist eindeutig, Symbol(" foo") == Symbol("foo") gibt false zurück

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

5. Symbol löst eine Ausnahme aus, wenn es mit einem numerischen Wert oder einer Zeichenfolge bedient wird

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

6.Symbol, das von der Factory-Funktion zurückgegeben wird, kann als Attributname des Objekts verwendet werden, wodurch Attributkonflikte vermieden werden können. Er ist in der for...in-Iteration nicht aufzählbar.

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 Der von der Symbol-Factory-Funktion zurückgegebene Wert kann als verwendet werden Objektattributname, bei Verwendung von JSON .stringify() Bei der Serialisierung wird dieses Attribut ignoriert

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

8.Symbol ist eindeutig, aber Sie können Symbol.for() verwenden, um denselben Symbolwert zu teilen

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

Symbol tatsächlicher Kampf

Private Eigenschaften und Methoden von Objektliteralen

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

Zusätzlich zur Verwendung von Symbol beim Erstellen von Objektliteralen können Sie es auch beim Definieren privater Eigenschaften und Methoden von Klassen verwenden.

Private Eigenschaften und Methoden der Klasse

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

In ES6 werden einige globale Symbole eingeführt, wie zum Beispiel: Symbol.match, Symbol.replace, Symbol.search, Symbol.iterator und Symbol. Teilt. Hier stellen wir Symbol.search und Symbol.iterator kurz vor.

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

Werfen wir einen kurzen Blick auf ein Beispiel:

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

Der Ausführungsprozess dieses Beispiels:

Parse 'angular'.search('ng')

Konvertieren Sie 'angular' in ein String-Objekt. new String('angular')

Konvertieren Sie 'ng' in ein reguläres Objekt neuer Regexp ('ng')

Rufen Sie die Suchmethode des 'angular'-String-Objekts auf, die automatisch die Symbol.search-Methode des regulären ng-Objekts aufruft

Einzelheiten finden Sie unter zum folgenden Pseudocode:

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

Darüber hinaus können wir mit Symbol.search auch die Methode String.prototype.search() die Methode Symbol.search() in unserem benutzerdefinierten Objekt aufrufen lassen, um benutzerdefinierte Suchlogik zu implementieren :

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

Ausführungsablauf des obigen Beispiels:

Parsen Sie die 'Angular7'.search(article)-Anweisung

Konvertieren Sie 'Angular7' in ein String-Objekt new String(" Angular7")

Da Artikel ein Objekt ist, ist hier keine Konvertierung erforderlich

Rufen Sie die Suchmethode des Zeichenfolgenobjekts „Angular7“ auf, die automatisch die Methode Symbol.search innerhalb des Artikels aufruft Objekt, wie zum Beispiel Artikel[Symbol.search]( 'Angular7')

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Symbol in ES6 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!