Den „+'-Operator in Javascript verstehen-js-Tutorial-php.cn

<p>Wir sehen oft einige „seltsame“ Aussagen online oder in Interviewfragen, wie zum Beispiel </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{}+{} // "[object Object][object Object]" {}+[] // 0 []+{} // "[object Object]" []+[] // ""</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{} +[]</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">+[] // 0</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date().valueOf(); // 1491904757087 1 + new Date(); // "1Tue Apr 11 2017 18:02:16 GMT+0800 (CST)"</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date() < new Date('2018-01-01') // true, 现在是2017</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{}+{} // "[object Object][object Object]" {}+[] // 0 []+{} // "[object Object]" []+[] // ""</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{} +[]</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">+[] // 0</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date().valueOf(); // 1491904757087 1 + new Date(); // "1Tue Apr 11 2017 18:02:16 GMT+0800 (CST)"</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date() < new Date('2018-01-01') // true, 现在是2017</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><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!