Heim > Web-Frontend > js-Tutorial > Warum gibt es den Symboltyp? Wie benutzt man?

Warum gibt es den Symboltyp? Wie benutzt man?

青灯夜游
Freigeben: 2022-03-22 11:04:51
nach vorne
2748 Leute haben es durchsucht

Was ist ein Symbol? Warum gibt es so etwas? Der folgende Artikel stellt Ihnen den Symboltyp in JavaScript vor und erklärt, wie Sie ihn verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Warum gibt es den Symboltyp? Wie benutzt man?

Was ist ein Symbol? Warum gibt es so etwas?

Symbol (Symbol) ist ein neuer Datentyp in ES6. Symbole sind primitive Werte (der zugrunde liegende Datentyp) und Symbolinstanzen sind einzigartig und unveränderlich. Es wird generiert, weil es zur eindeutigen Kennzeichnung und anschließenden Verwendung als Objektattribute in Nicht-String-Form verwendet wird, um sicherzustellen, dass Objektattribute eindeutige Bezeichner verwenden, ohne dass das Risiko von Attributkonflikten besteht. [Verwandte Empfehlungen: Javascript-Lern-Tutorial]

Verwendung

1. Grundlegende Verwendung

Symbole müssen mit der Funktion Symbol() initialisiert werden. Da Symbole selbst primitive Typen sind, gibt der Operator „typeof“ ein Symbol für Symbole zurück. Die Funktion

let sym = Symbol();
console.log(typeof sym); // symbol
Nach dem Login kopieren

Symbol() kann einen String-Parameter zur Beschreibung empfangen, und dann können Sie diesen String zum Debuggen des Codes verwenden. Es ist jedoch zu beachten, dass ihre Werte nicht gleich sind, selbst wenn mehrere Symbol()-Funktionen dieselben Parameter akzeptieren.

let genericSymbol = Symbol();
let otherGenericSymbol = Symbol();
let fooSymbol = Symbol("foo");
let otherFooSymbol = Symbol("foo");

console.log(genericSymbol == otherGenericSymbol); // false
console.log(fooSymbol == otherFooSymbol); // false
Nach dem Login kopieren

2. Verwenden Sie die globale Symbolregistrierung

Wenn Sie dieselbe Symbolinstanz an mehreren Stellen im Code verwenden müssen, können Sie eine Zeichenfolge übergeben und dann die Methode Symbol.for() verwenden, um eine Wiederverwendung zu erstellen Symbol ähnelt dem Singleton-Modus. Wenn Symbol.for() zum ersten Mal verwendet wird, wird anhand der übergebenen Parameter global gesucht, ob dieselbe Instanz mit Symbol.for() erstellt wurde. Wenn ja, verwenden Sie es erneut Wenn nicht, erstellen Sie eine neue. Der Unterschied zwischen der von Symbol.for() erstellten Instanz und der von Symbol() erstellten Instanz ist immer einzigartig und ändert sich nicht weil Sie es übergeben Die Eingabeparameter sind dieselben und entsprechen anderen Instanzen, aber die von Symbol.for() erstellten Instanzen sind gleich, wenn die Parameter dieselben sind, da sie dieselbe Symbolinstanz teilen

let fooGlobalSymbol = Symbol.for("foo"); // 创建新符号
let otherFooGlobalSymbol = Symbol.for("foo"); // 重用已有符号
console.log(fooGlobalSymbol === otherFooGlobalSymbol); // true
Nach dem Login kopieren

3 . Verwenden Sie Symbole als Attribute

Attribute in Objekten liegen im Allgemeinen in Form von Zeichenfolgen vor, Sie können jedoch auch Symbolinstanzen als Attribute verwenden. Der Vorteil besteht darin, dass Ihre neuen Attribute keine vorherigen Attribute überschreiben Hinweis: Erstellen Wenn eine Symbolinstanz als Objektattribut verwendet wird und das Symbol geändert wird, ohne zu Beginn eine Variable für den Empfang zu deklarieren, müssen alle Symbolattribute des Objekts durchlaufen werden, um den entsprechenden Attributschlüssel zu finden:
let fooSymbol = Symbol("foo");
let otherFooSymbol = Symbol("foo");
console.log(fooSymbol == otherFooSymbol); // false

let fooGlobalSymbol = Symbol.for("foo"); // 创建新符号
let otherFooGlobalSymbol = Symbol.for("foo"); // 重用已有符号
console.log(fooGlobalSymbol === otherFooGlobalSymbol); // true
Nach dem Login kopieren

4. Häufig verwendete integrierte Symbole

ES6 Eine Reihe häufig verwendeter integrierter Symbole (bekannte Symbole) werden ebenfalls eingeführt, um das interne Verhalten der Sprache offenzulegen, und Entwickler können direkt auf diese zugreifen, sie überschreiben oder simulieren Verhaltensweisen. Wenn diese Standardeigenschaften geändert werden, können sich die endgültigen Ausführungsergebnisse einiger Vorgänge ändern. Beispielsweise verwendet eine for-of-Schleife die Eigenschaft Symbol.iterator für das relevante Objekt, sodass Sie das Verhalten von for-of beim Iterieren des Objekts ändern können, indem Sie den Wert von Symbol.iterator für das benutzerdefinierte Objekt neu definieren. 5. Symbol.asyncIterator Eine Methode. Diese Methode gibt den Standard-AsyncIterator des Objekts zurück, der von der for-await-of-Anweisung verwendet wird. Mit anderen Worten: Dieses Symbol stellt eine Funktion dar, die die asynchrone Iterator-API implementiert.

Diese Eigenschaft ist im Prototyp von Function definiert. Wir alle wissen, dass der Operator „Instanceof“ verwendet werden kann, um zu bestimmen, ob eine Objektinstanz zu einem bestimmten Konstruktor gehört. Das Prinzip besteht darin, dass der Instanzof-Operator die Funktion Symbol.hasInstance verwendet, um die Beziehung zu bestimmen

Dieses Attribut ist im Prototyp von Array definiert.

Gemäß der ECMAScript-Spezifikation stellt dieses Symbol als Attribut „einen booleschen Wert“ dar. Wenn „true“, bedeutet dies, dass das Objekt seine Array-Elemente mithilfe von Array.prototype.concat( )". Die Methode Array.prototype.concat() in ES6 wird Wählen Sie aus, wie ein Array-ähnliches (Pseudo-Array-)Objekt basierend auf dem empfangenen Objekttyp in eine Array-Instanz gespleißt werden soll. Durch Ändern des Werts von Symbol.isConcatSpreadable kann dieses Verhalten geändert werden.

Symbol.isConcatSpreadable entsprechender Effekt

false:

Füge ein ganzes Objekt zum Array hinzu

true: Füge ein ganzes Paar zum Array hinzu
let s1 = Symbol("foo"),
  s2 = Symbol("bar"),
  s3 = Symbol("baz"),
  s4 = Symbol("qux");
let o = {
  [s1]: "foo val",
};
// 这样也可以:o[s1] = 'foo val';
console.log(o);
// {Symbol(foo): foo val}
Object.defineProperty(o, s2, { value: "bar val" });
console.log(o);
// {Symbol(foo): foo val, Symbol(bar): bar val}
Object.defineProperties(o, {
  [s3]: { value: "baz val" },
  [s4]: { value: "qux val" },
});
console.log(o);
// {Symbol(foo): foo val, Symbol(bar): bar val,
// Symbol(baz): baz val, Symbol(qux): qux val}
Nach dem Login kopieren

8. Symbol.iterator

Gemäß ECMAScript-Spezifikation, Dieses Symbol stellt als Attribut „eine Methode dar, die den Standarditerator des Objekts zurückgibt. Wird von der for-of-Anweisung verwendet“

该属性会返回一个 Generator 函数,for of 就会依次的去调用 next()方法,这就是为什么 for of 可以使用在某些对象身上。

class Emitter {
  constructor(max) {
    this.max = max;
    this.idx = 0;
  }
  *[Symbol.iterator]() {
    while (this.idx < this.max) {
      yield this.idx++;
    }
  }
}
function count() {
  let emitter = new Emitter(5);
  for (const x of emitter) {
    console.log(x);
  }
}
count();
// 0
// 1
// 2
// 3
// 4
Nach dem Login kopieren

9. Symbol.match

根据 ECMAScript 规范,这个符号作为一个属性表示“一个正则表达式方法,该方法用正则表达式去匹配字符串。由 String.prototype.match()方法使用”。

String.prototype.match()方法会使用以 Symbol.match 为键的函数来对正则表达式求值。所以更改一个正则表达式的 Symbol.match 属性,可以让 String.prototype.match()得到你想要的值

console.log(RegExp.prototype[Symbol.match]);
// ƒ [Symbol.match]() { [native code] }
console.log("foobar".match(/bar/));
// ["bar", index: 3, input: "foobar", groups: undefined]

class FooMatcher {
  static [Symbol.match](target) {
    return target.includes("foo");
  }
}
console.log("foobar".match(FooMatcher)); // true
console.log("barbaz".match(FooMatcher)); // false
class StringMatcher {
  constructor(str) {
    this.str = str;
  }
  [Symbol.match](target) {
    return target.includes(this.str);
  }
}
console.log("foobar".match(new StringMatcher("foo"))); // true
console.log("barbaz".match(new StringMatcher("qux"))); // false
Nach dem Login kopieren

11. Symbol.search

这个符号作为一个属性表示“一个正则表达式方法,该方法返回字符串中 匹配正则表达式的索引。由 String.prototype.search()方法使用”

12. Symbol.species

这个符号作为一个属性表示“一个函数值,该函数作为创建派生对象的构 造函数”。

13. Symbol.split

这个符号作为一个属性表示“一个正则表达式方法,该方法在匹配正则表 达式的索引位置拆分字符串。由 String.prototype.split()方法使用”。

14. Symbol.toPrimitive

这个符号作为一个属性表示“一个方法,该方法将对象转换为相应的原始 值。由 ToPrimitive 抽象操作使用”

15. Symbol.toStringTag

这个符号作为一个属性表示“一个字符串,该字符串用于创建对象的默认 字符串描述。由内置方法 Object.prototype.toString()使用”

16. Symbol.unscopables

这个符号作为一个属性表示“一个对象,该对象所有的以及继承的属性, 都会从关联对象的 with 环境绑定中排除

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt vonWarum gibt es den Symboltyp? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage