Comprendre l'opérateur « + » en Javascript

<p>Nous voyons souvent des déclarations "étranges" en ligne ou dans les questions d'entretien, telles que </p> <pre class="brush:php;toolbar:false">{}+{} // "[object Object][object Object]" {}+[] // 0 []+{} // "[object Object]" []+[] // ""</pre> <p>En Javascript, l'opérateur <code>+</code> est un opérateur surchargé qui peut être utilisé pour assembler des chaînes et ajouter des chaînes. deux "nombres" ensemble. Le cas échéant dépend des types de paramètres des deux côtés de l’opérateur. <br>Nous ne rencontrerons pas de choses aussi gênantes dans le développement quotidien, mais il est toujours bon de s'en rendre compte. Balabala en a dit beaucoup dans la spécification, qui est simplement : </p> <p>1 Pour les types natifs, tant que l'un des paramètres est une chaîne, il sera traité par concaténation de chaînes, sinon il sera traité par numérique. ceux qui ne sont pas des nombres seront d’abord convertis en nombres puis ajoutés. </p> <p>Les types natifs sont : undefined, null, boolean, number, string. </p> <p>Voici quelques exemples : </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. Pour les types de référence, vous devez d'abord les convertir en types natifs, puis les ajouter selon les règles ci-dessus. Comment convertir est détaillé dans la spécification, mais la spécification semble un peu laborieuse. Pour faire simple : il est converti en chaîne par défaut. Si vous souhaitez faire quelque chose de spécial, veuillez remplacer la méthode <code>valueOf()</code>. </p> <p>Prenons un exemple : </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>Mais comme JS ne prend pas en charge la surcharge réelle des opérateurs, c'est-à-dire qu'il ne peut pas être ajouté pour obtenir des objets de type personnalisé, l'exemple ci-dessus est donc rarement utilisé en code pratique. </p> <p>Cependant, les connaissances actuelles sont suffisantes pour répondre à la question initiale. Mais attendez, pourquoi <code>{}+[]</code> est-il différent de <code>[]+{}</code> ? Il s'agit en fait d'un problème de grammaire. Le premier équivaut à : </p> <pre class="brush:php;toolbar:false">{} +[]</pre> <p> est en fait deux phrases, et <code>[]</code> converti en nombre est 0. C'est facile à vérifier <code>({}+[]) === '[object Object]'</code></p> <pre class="brush:php;toolbar:false">+[]  // 0</pre> <p> Quelqu'un peut se demander, le <code>new Date()</code> de <code>valueOf()</code> n'est-il pas converti en nombre ? Pourquoi le résultat de l’addition est-il toujours de type chaîne ? </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>Il s'agit de la classe Date qui a fait un traitement spécial, @@toPrimitive Par défaut, l'ajout de <code>Date</code> est connecté en mode chaîne, mais il sera converti en nombre lors de la comparaison. </p> <pre class="brush:php;toolbar:false">new Date() < new Date(&#39;2018-01-01&#39;) // true, 现在是2017</pre><p> La conversion des types référence en types natifs est utilisée dans de nombreux opérateurs, tels que <code><</code>, <code>>, il est donc nécessaire de l'étudier. Le code js suivant le décrit approximativement. Comportement. <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>Veuillez vous référer aux spécifications pour plus de détails</p><p class="article fmt article__content"><br></p><p>Vous voyez souvent des phrases « bizarres » en ligne ou dans les questions d'entretien, telles que </p> <pre class="brush:php;toolbar:false">{}+{} // "[object Object][object Object]" {}+[] // 0 []+{} // "[object Object]" []+[] // ""</pre><p>En Javascript, l'opérateur <code>+</code> est un opérateur surchargé qui peut être utilisé pour épisser des chaînes et ajouter deux "nombres". Le cas échéant dépend des types de paramètres des deux côtés de l’opérateur. <br>Nous ne rencontrerons pas de choses aussi gênantes dans le développement quotidien, mais il est toujours bon de s'en rendre compte. Balabala en a dit beaucoup dans la spécification, qui est simplement : </p><p>1 Pour les types natifs, tant que l'un des paramètres est une chaîne, il sera traité par concaténation de chaînes, sinon il sera traité par numérique. ceux qui ne sont pas des nombres seront d’abord convertis en nombres puis ajoutés. </p><p>Les types natifs sont : undefined, null, boolean, number, string. </p><p>Voici quelques exemples : </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. Pour les types de référence, vous devez d'abord les convertir en types natifs, puis les ajouter selon les règles ci-dessus. Comment convertir est détaillé dans la spécification, mais la spécification semble un peu laborieuse. Pour faire simple : il est converti en chaîne par défaut. Si vous souhaitez faire quelque chose de spécial, veuillez remplacer la méthode <code>valueOf()</code>. </p><p>Prenons un exemple : </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>Mais comme JS ne prend pas en charge la surcharge réelle des opérateurs, c'est-à-dire qu'il ne peut pas être ajouté pour obtenir des objets de type personnalisé, l'exemple ci-dessus est donc rarement utilisé en code pratique. </p><p>Cependant, les connaissances actuelles sont suffisantes pour répondre à la question initiale. Mais attendez, pourquoi <code>{}+[]</code> est-il différent de <code>[]+{}</code> ? Il s'agit en fait d'un problème de grammaire. Le premier équivaut à : </p><pre class="brush:php;toolbar:false">{} +[]</pre><p> est en fait deux phrases, et <code>[]</code> converti en nombre est 0. C'est facile à vérifier <code>({}+[]) === '[object Object]'</code></p><pre class="brush:php;toolbar:false">+[]  // 0</pre><p> Quelqu'un peut se demander, le <code>new Date()</code> de <code>valueOf()</code> n'est-il pas converti en nombre ? Pourquoi le résultat de l’addition est-il toujours de type chaîne ? </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>Il s'agit de la classe Date qui a fait un traitement spécial, @@toPrimitive Par défaut, l'ajout de <code>Date</code> est connecté en mode chaîne, mais il sera converti en nombre lors de la comparaison. </p><pre class="brush:php;toolbar:false">new Date() < new Date(&#39;2018-01-01&#39;) // true, 现在是2017</pre><p> La conversion des types référence en types natifs est utilisée dans de nombreux opérateurs, tels que <code><</code>, <code>>, il est donc nécessaire de l'étudier. Le code js suivant le décrit approximativement. Comportement. <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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!