Heim > Artikel > Web-Frontend > 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!