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.

• In anderem Code werden die von Ihnen erstellten Eigenschaften durch for-in oder Object.keys(); aufgezählt
Die gleiche Methode wurde möglicherweise in einigen anderen Bibliotheken verwendet (die gleichen Attribute für die Elemente festgelegt), dann führt dies zu Konflikten mit Ihrem Code und führt zu unvorhersehbaren Ergebnissen
Einige andere Bibliotheken werden in Zukunft möglicherweise denselben Ansatz verwenden, was ebenfalls zu Konflikten mit Ihrem Code führen wird
Das Standardkomitee fügt möglicherweise jedem Element eine native Methode .isMoving() hinzu, und Ihr Code funktioniert überhaupt nicht.

Natürlich können Sie für die letzten drei Fragen eine bedeutungslose Zeichenfolge wählen, die niemand verwenden wird:

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;

Das scheint so unzuverlässig, dass es mir in den Augen weh tut, es zu sehen.

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

object[name] ermöglicht es uns, eine beliebige Zeichenfolge als Eigenschaftsnamen zu verwenden. Der Code funktioniert normal, Konflikte sind nahezu ausgeschlossen und der Code sieht viel besser aus.

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

Symbolwerte können programmgesteuert erstellt und als Attributnamen verwendet werden, ohne sich Gedanken über Konflikte mit Attributnamen machen zu müssen.

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("isMoving") 中的 "isMoving" 字符串被称为 Symbol 的描述信息，这对调试非常有帮助。可以通过 console.log(isMoving) 打印出来，或通过 isMoving.toString() 将 isMoving 转换为字符串时，或在一些错误信息中显示出来。
•     element[isMoving] 访问的是 symbol-keyed 属性，除了属性名是 Symbol 类型的值之外，与其它属性都一样。
•     和数组一样，symbol-keyed 属性不能通过 . 操作符来访问，必须使用方括号的方式。
•     操作 symbol-keyed 属性也非常方便，通过上面代码我们已经知道如何获取和设置 element[isMoving] 的值，我们还可以这样使用：if (isMoving in element) 或 delete element[isMoving]。
•     另一方面，只有在 isMoving 的作用域范围内才可以使用上述代码，这可以实现弱封装机制：在一个模块内创建一些 Symbol，只有在该模块内部的对象才能使用，而不用担心与其它模块的代码发生冲突。

由于 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

1. Symbol() gibt bei jedem Aufruf ein eindeutiges Symbol zurück.
2. Symbol.for(string) gibt das entsprechende Symbol aus der Symbolregistrierung zurück. Im Gegensatz zur vorherigen Methode werden die Symbole in der Symbolregistrierung gemeinsam genutzt. Das heißt, wenn Sie Symbol.for("cat") dreimal aufrufen, wird dasselbe Symbol zurückgegeben. Die Registrierung ist sehr nützlich, wenn verschiedene Seiten oder verschiedene Module derselben Seite Symbole gemeinsam nutzen müssen.
3. Symbol.iterator gibt einige von der Sprache vordefinierte Symbole zurück, jedes mit seinem eigenen speziellen Zweck.

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.)

• Instanz von erweiterbar machen. In ES6 ist die Objektinstanz des Konstruktorausdrucks auf eine Methode des Konstruktors standardisiert: Konstruktor[Symbol.hasInstance](Objekt), was bedeutet, dass sie erweiterbar ist.
• Beseitigen Sie Konflikte zwischen neuen Funktionen und altem Code.
• Unterstützt neue Arten des String-Matchings. Wenn in ES5 str.match(myObject) aufgerufen wird, wird zunächst versucht, myObject in ein RegExp-Objekt zu konvertieren. In ES6 wird myObject zunächst auf eine myObject[Symbol.match](str)-Methode überprüft, und eine benutzerdefinierte String-Parsing-Methode kann überall dort bereitgestellt werden, wo reguläre Ausdrücke funktionieren.

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.