Den „+“-Operator in Javascript verstehen

<p>Wir sehen oft einige „seltsame“ Aussagen online oder in Interviewfragen, wie zum Beispiel </p> <pre class="brush:php;toolbar:false">{}+{} // "[object Object][object Object]" {}+[] // 0 []+{} // "[object Object]" []+[] // ""</pre> <p>In Javascript ist der <code>+</code>-Operator ein überladener Operator, der zum Zusammenfügen und Hinzufügen von Zeichenfolgen verwendet werden kann zwei „Zahlen“ zusammen. Welcher Fall vorliegt, hängt von den Parametertypen auf beiden Seiten des Operators ab. <br>In der täglichen Entwicklung werden wir nicht auf so problematische Dinge stoßen, aber es ist immer gut, es herauszufinden. Balabala hat in der Spezifikation viel gesagt, was einfach ist: </p> <p>1 Bei nativen Typen wird er durch String-Verkettung verarbeitet, andernfalls durch digitale Verarbeitung Additionen, die keine Zahlen sind, werden zunächst in Zahlen umgewandelt und dann addiert. </p> <p>Die nativen Typen sind: undefiniert, null, boolean, Zahl, Zeichenfolge. </p> <p>Hier sind einige Beispiele: </p> <pre class="brush:php;toolbar:false">0 + '1'     // '01' null + 1    // 1 true + 1    // 2 false + 1   // 0 undefined + 2   // NaN,  因为undefined转成Number是NaN</pre> <p>2. Für Referenztypen müssen Sie sie zuerst in native Typen konvertieren und sie dann gemäß den oben genannten Regeln hinzufügen. Wie die Konvertierung durchgeführt wird, ist in der Spezifikation detailliert beschrieben, die Spezifikation scheint jedoch etwas mühsam zu sein. Vereinfacht ausgedrückt: Es wird standardmäßig in einen String umgewandelt. Wenn Sie etwas Besonderes tun möchten, überschreiben Sie bitte die Methode <code>valueOf()</code>. </p> <p>Nehmen wir ein Beispiel: </p> <pre class="brush:php;toolbar:false">function Complex(a, b) {   this.a = a;   this.b = b; } Complex.prototype.valueOf() {   return this.a; } new Complex(2, 3) + new Complex(4, 5); // 6</pre> <p>Da JS jedoch keine echte Operatorüberladung unterstützt, kann es nicht hinzugefügt werden, um benutzerdefinierte Typobjekte zu erhalten, sodass das obige Beispiel selten verwendet wird im praktischen Code. </p> <p>Der aktuelle Wissensstand reicht jedoch aus, um die ursprüngliche Frage zu beantworten. Aber Moment, warum unterscheidet sich <code>{}+[]</code> von <code>[]+{}</code>? Das ist eigentlich ein grammatikalisches Problem. Ersteres entspricht: </p> <pre class="brush:php;toolbar:false">{} +[]</pre> <p> besteht eigentlich aus zwei Sätzen und <code>[]</code> in eine Zahl umgewandelt ist 0. Es ist leicht zu überprüfen <code>({}+[]) === '[object Object]'</code></p> <pre class="brush:php;toolbar:false">+[]  // 0</pre> <p> Jemand fragt sich vielleicht: Wird das <code>new Date()</code> von <code>valueOf()</code> nicht in eine Zahl umgewandelt? Warum ist das Additionsergebnis immer noch vom Typ String? </p> <pre class="brush:php;toolbar:false">new Date().valueOf(); // 1491904757087 1 + new Date(); // "1Tue Apr 11 2017 18:02:16 GMT+0800 (CST)"</pre> <p>Dies ist die Datumsklasse, die eine spezielle Verarbeitung durchgeführt hat, @@toPrimitive. Standardmäßig ist die Addition von <code>Date</code> im String-Modus verbunden, wird jedoch beim Vergleich in eine Zahl umgewandelt. </p> <pre class="brush:php;toolbar:false">new Date() < new Date(&#39;2018-01-01&#39;) // true, 现在是2017</pre><p> Das Konvertieren von Referenztypen in native Typen wird in vielen Operatoren verwendet, z. B. <code><</code>, <code>>. Daher ist es erforderlich, es zu studieren. Der folgende js-Code beschreibt sein Verhalten grob. <pre class="brush:php;toolbar:false">/**  * @param input     即要转换的对象  * @preferredType   期望转换成的类型，可以是string或number  */ function ToPrimitive(input, preferredType) {   if (typeof input !== 'object') {     return input;   // 本来就是原生类型   }   var hint = preferredType || 'default';   if (typeof input['@@toPrimitive'] === 'function') {   // @@toPrimitive是个内部方法，这里只是示例说明其工作原理     return input['@@toPrimitive'](input, hint);   // 这就是为什么Date能特殊处理的原因   }   if (hint === 'string') {     return input.toString();   }   return input.valueOf(); }</pre><p>Einzelheiten entnehmen Sie bitte den Spezifikationen</p><p class="article fmt article__content"><br></p><p>Im Internet oder in Vorstellungsgesprächen sieht man oft einige „seltsame“ Sätze, wie zum Beispiel </p> <pre class="brush:php;toolbar:false">{}+{} // "[object Object][object Object]" {}+[] // 0 []+{} // "[object Object]" []+[] // ""</pre><p>In Javascript ist der <code>+</code>-Operator ein überladener Operator, der zum Zusammenfügen von Zeichenfolgen und zum Hinzufügen zweier „Zahlen“ verwendet werden kann. Welcher Fall vorliegt, hängt von den Parametertypen auf beiden Seiten des Operators ab. <br>In der täglichen Entwicklung werden wir nicht auf so problematische Dinge stoßen, aber es ist immer gut, es herauszufinden. Balabala hat in der Spezifikation viel gesagt, was einfach ist: </p><p>1 Bei nativen Typen wird er durch String-Verkettung verarbeitet, andernfalls durch digitale Verarbeitung Additionen, die keine Zahlen sind, werden zunächst in Zahlen umgewandelt und dann addiert. </p><p>Die nativen Typen sind: undefiniert, null, boolean, Zahl, Zeichenfolge. </p><p>Hier sind einige Beispiele: </p><pre class="brush:php;toolbar:false">0 + '1'     // '01' null + 1    // 1 true + 1    // 2 false + 1   // 0 undefined + 2   // NaN,  因为undefined转成Number是NaN</pre><p>2. Für Referenztypen müssen Sie sie zuerst in native Typen konvertieren und sie dann gemäß den oben genannten Regeln hinzufügen. Wie die Konvertierung durchgeführt wird, ist in der Spezifikation detailliert beschrieben, die Spezifikation scheint jedoch etwas mühsam zu sein. Vereinfacht ausgedrückt: Es wird standardmäßig in einen String umgewandelt. Wenn Sie etwas Besonderes tun möchten, überschreiben Sie bitte die Methode <code>valueOf()</code>. </p><p>Nehmen wir ein Beispiel: </p><pre class="brush:php;toolbar:false">function Complex(a, b) {   this.a = a;   this.b = b; } Complex.prototype.valueOf() {   return this.a; } new Complex(2, 3) + new Complex(4, 5); // 6</pre><p>Da JS jedoch keine echte Operatorüberladung unterstützt, kann es nicht hinzugefügt werden, um benutzerdefinierte Typobjekte zu erhalten, sodass das obige Beispiel selten verwendet wird im praktischen Code. </p><p>Der aktuelle Wissensstand reicht jedoch aus, um die ursprüngliche Frage zu beantworten. Aber Moment, warum unterscheidet sich <code>{}+[]</code> von <code>[]+{}</code>? Das ist eigentlich ein grammatikalisches Problem. Ersteres entspricht: </p><pre class="brush:php;toolbar:false">{} +[]</pre><p> besteht eigentlich aus zwei Sätzen und <code>[]</code> in eine Zahl umgewandelt ist 0. Es ist leicht zu überprüfen <code>({}+[]) === '[object Object]'</code></p><pre class="brush:php;toolbar:false">+[]  // 0</pre><p> Jemand fragt sich vielleicht: Wird das <code>new Date()</code> von <code>valueOf()</code> nicht in eine Zahl umgewandelt? Warum ist das Additionsergebnis immer noch vom Typ String? </p><pre class="brush:php;toolbar:false">new Date().valueOf(); // 1491904757087 1 + new Date(); // "1Tue Apr 11 2017 18:02:16 GMT+0800 (CST)"</pre><p>Dies ist die Datumsklasse, die eine spezielle Verarbeitung durchgeführt hat, @@toPrimitive. Standardmäßig ist die Addition von <code>Date</code> im String-Modus verbunden, wird jedoch beim Vergleich in eine Zahl umgewandelt. </p><pre class="brush:php;toolbar:false">new Date() < new Date(&#39;2018-01-01&#39;) // true, 现在是2017</pre><p> Das Konvertieren von Referenztypen in native Typen wird in vielen Operatoren verwendet, z. B. <code><</code>, <code>>. Daher ist es notwendig, es zu studieren. Der folgende js-Code beschreibt das Verhalten grob. <pre class="brush:php;toolbar:false">/**  * @param input     即要转换的对象  * @preferredType   期望转换成的类型，可以是string或number  */ function ToPrimitive(input, preferredType) {   if (typeof input !== 'object') {     return input;   // 本来就是原生类型   }   var hint = preferredType || 'default';   if (typeof input['@@toPrimitive'] === 'function') {   // @@toPrimitive是个内部方法，这里只是示例说明其工作原理     return input['@@toPrimitive'](input, hint);   // 这就是为什么Date能特殊处理的原因   }   if (hint === 'string') {     return input.toString();   }   return input.valueOf(); }</pre><p class="col-md-8"><br></p><p class="comments-box-content"><br></p></pre></pre>

Das obige ist der detaillierte Inhalt vonDen „+“-Operator in Javascript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!