Heim > Artikel > Web-Frontend > Umfassendes Verständnis für die Verwendung von Symbolen in JavaScript_Grundkenntnisse
Was ist ein Symbol?
Symbole sind keine Symbole und bedeuten auch nicht, dass kleine Bilder im Code verwendet werden können:
ist auch keine Syntax, um auf etwas anderes zu verweisen. Was genau ist Symbol?
Sieben Datentypen
Als JavaScript 1997 standardisiert wurde, gab es 6 Datentypen. Bis zur Einführung von ES6 müssen Variablen im Programm einer der folgenden 6 Datentypen sein:
Undefiniert
Null
Boolescher Wert
Nummer
Zeichenfolge
Objekt
Jeder Datentyp ist eine Kombination aus einer Reihe von Werten, und die Anzahl der Werte der ersten fünf Datentypen ist begrenzt. Der Typ Boolean hat nur zwei Werte: true und false. Beim Zuweisen eines Werts zu einer Variablen vom Typ Boolean wird kein neuer Wert generiert (die beiden Werte true und false werden gemeinsam genutzt). Für Number und String sind ihre Werte viel größer. Die Standardaussage lautet, dass es 18.437.736.874.454.810.627 Werte vom Typ Number gibt (einschließlich NAN). Die Anzahl der String-Typen ist schwer zu zählen. Ich dachte ursprünglich, sie sei (2144.115.188.075.855.872 ? 1) ÷ 65.535 ... aber vielleicht habe ich mich geirrt.
Die Anzahl der Objektwerte ist unbegrenzt und jedes Objekt ist einzigartig. Jedes Mal, wenn eine Webseite geöffnet wird, wird eine Reihe von Objekten erstellt.
Symbol in ES6 ist ebenfalls ein Datentyp, aber es ist keine Zeichenfolge oder ein Objekt, sondern ein neuer Datentyp: der siebte Datentyp.
Sehen wir uns ein Szenario an, in dem Symbol nützlich sein könnte.
Eine Frage, die durch einen booleschen Wert aufgeworfen wird
Manchmal ist es sehr praktisch, einige Daten, die zu anderen Objekten gehören, vorübergehend in einem anderen Objekt zu speichern. Angenommen, Sie schreiben eine JS-Bibliothek, die Übergänge in CSS verwendet, um ein DOM-Element über den Bildschirm fliegen zu lassen. Sie wissen bereits, dass Sie nicht mehrere Übergänge gleichzeitig auf dasselbe Div anwenden können, da die Animation sonst sehr unansehnlich wird . Sie haben zwar einen Weg, dies zu umgehen, aber zuerst müssen Sie wissen, ob sich das Div bereits bewegt.
Wie kann dieses Problem gelöst werden?
Eine Möglichkeit besteht darin, die vom Browser bereitgestellte API zu verwenden, um zu erkennen, ob sich das Element in einem animierten Zustand befindet. Dies ist jedoch Zeitverschwendung. Wenn Sie das Element auf „Verschieben“ einstellen, weiß Ihre Bibliothek, dass sich das Element bewegt.
Was Sie wirklich brauchen, ist ein Mechanismus, um zu verfolgen, welche Elemente sich bewegen. Sie können die sich bewegenden Elemente in einem Array speichern und jedes Mal, wenn Sie ein Element animieren möchten, zunächst prüfen, ob sich das Element bereits darin befindet in der Liste.
Ähm, aber wenn Ihr Array sehr groß ist, kann selbst eine lineare Suche wie diese zu Leistungsproblemen führen.
Was Sie also wirklich tun möchten, ist ein Flag direkt auf dem Element zu setzen:
if (element.isMoving) { smoothAnimations(element); } element.isMoving = true; if (element.isMoving) { smoothAnimations(element); } element.isMoving = true;
Dies birgt auch einige potenzielle Probleme, und Sie müssen sich darüber im Klaren sein, dass es anderen Code gibt, der möglicherweise auch mit diesem ODM-Element arbeitet.
if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) { smoothAnimations(element); } element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true; if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) { smoothAnimations(element); } element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true;
Sie können auch Verschlüsselungsalgorithmen verwenden, um eine nahezu eindeutige Zeichenfolge zu generieren:
// get 1024 Unicode characters of gibberish var isMoving = SecureRandom.generateName(); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true; // get 1024 Unicode characters of gibberish var isMoving = SecureRandom.generateName(); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true;Die Syntax
Dies führt jedoch zu einem schlechten Debugging-Erlebnis. Jedes Mal, wenn Sie console.log() zum Ausdrucken des Elements verwenden, das dieses Attribut enthält, wird eine riesige Müllzeichenfolge angezeigt. Was ist, wenn es mehr als ein solches Attribut gibt? ? Die Attributnamen haben sich nach jeder Aktualisierung geändert. Wie können diese Attribute intuitiver gestaltet werden?
Warum ist es so schwierig? Wir sparen nur ein bisschen Flagge.
Verwenden Sie Symbole, um Probleme zu lösen
var mySymbol = Symbol(); var mySymbol = Symbol();
调用 Symbol() 方法将创建一个新的 Symbol 类型的值,并且该值不与其它任何值相等。
与数字和字符串一样,Symbol 类型的值也可以作为对象的属性名,正是由于它不与任何其它值相等,对应的属性也不会发生冲突:
obj[mySymbol] = "ok!"; // guaranteed not to collide console.log(obj[mySymbol]); // ok! obj[mySymbol] = "ok!"; // guaranteed not to collide console.log(obj[mySymbol]); // ok!
下面是使用 Symbol 来解决上面的问题:
// create a unique symbol var isMoving = Symbol("isMoving"); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true; // create a unique symbol var isMoving = Symbol("isMoving"); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true;
上面代码需要注意几点:
由于 Symbol 的设计初衷是为了避免冲突,当遍历 JavaScript 对象时,并不会枚举到以 Symbol 作为建的属性,比如,for-in 循环只会遍历到以字符串作为键的属性,Object.keys(obj)和 Object.getOwnPropertyNames(obj) 也一样,但这并不意味着 Symbol 为键的属性是不可枚举的:使用 Object.getOwnPropertySymbols(obj) 这个新方法可以枚举出来,还有 Reflect.ownKeys(obj) 这个新方法可以返回对象中所有字符串和 Symbol 键。(我将在后面的文章中详细介绍 Reflect 这个新特性。)
库和框架的设计者将会发现很多 Symbol 的用途,稍后我们将看到,JavaScript 语言本身也对其有广泛的应用。
Symbol 究竟是什么呢
> typeof Symbol() "symbol" > typeof Symbol() "symbol"
Symbol 是完全不一样的东西。一旦创建后就不可更改,不能对它们设置属性(如果在严格模式下尝试这样做,你将得到一个 TypeError)。它们可以作为属性名,这时它们和字符串的属性名没有什么区别。
另一方面,每个 Symbol 都是独一无二的,不与其它 Symbol 重复(即便是使用相同的 Symbol 描述创建),创建一个 Symbol 就跟创建一个对象一样方便。
ES6 中的 Symbol 与传统语言(如 Lisp 和 Ruby)中的 Symbol 中的类似,但并不是完全照搬到 JavaScript 中。在 Lisp 中,所有标识符都是 Symbol;在 JavaScript 中,标识符和大多数属性仍然是字符串,Symbol 只是提供了一个额外的选择。
值得注意的是:与其它类型不同的是,Symbol 不能自动被转换为字符串,当尝试将一个 Symbol 强制转换为字符串时,将返回一个 TypeError。
> var sym = Symbol("<3"); > "your symbol is " + sym // TypeError: can't convert symbol to string > `your symbol is ${sym}` // TypeError: can't convert symbol to string > var sym = Symbol("<3"); > "your symbol is " + sym // TypeError: can't convert symbol to string > `your symbol is ${sym}` // TypeError: can't convert symbol to string
Ein solcher Zwang sollte vermieden werden und für die Konvertierung sollte String(sym) oder sym.toString() verwendet werden.
Drei Möglichkeiten, Symbol zu erhalten
Wenn Sie immer noch nicht sicher sind, ob Symbole nützlich sind, wird der nächste Abschnitt sehr interessant sein, da ich Ihnen Symbole in Aktion zeige.
Anwendung des Symbols in der ES6-Spezifikation
Wir wissen bereits, dass wir Symbol verwenden können, um Codekonflikte zu vermeiden. Bei der vorherigen Einführung von Iterator haben wir auch analysiert, dass for (var item of myArray) intern mit dem Aufruf von myArray[Symbol.iterator]() beginnt. Damals habe ich erwähnt, dass diese Methode durch myArray.iterator() ersetzt werden kann, aber mit Symbol hat eine bessere Abwärtskompatibilität.
Es gibt immer noch einige Stellen, an denen Symbol in ES6 verwendet wird. (Diese Funktionen sind in Firefox noch nicht implementiert.)
Diese Verwendungsmöglichkeiten sind noch relativ begrenzt, aber es ist schwierig, die signifikanten Auswirkungen dieser neuen Funktionen allein anhand des Codes in meinem Artikel zu erkennen. JavaScripts Symbol ist eine verbesserte Version von __doubleUnderscores in PHP und Python, und Standardorganisationen werden es verwenden, um der Sprache neue Funktionen hinzuzufügen, ohne den vorhandenen Code zu beeinträchtigen.