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> <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <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> <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <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> <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <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> <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> est en fait deux phrases, et <code>[]</code> converti en nombre est 0. C'est facile à vérifier <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <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> <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <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> <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(&#39;2018-01-01&#39;) // true, 现在是2017</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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. <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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> <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p> est en fait deux phrases, et <code>[]</code> converti en nombre est 0. C'est facile à vérifier <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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><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(&#39;2018-01-01&#39;) // true, 现在是2017</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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. <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><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!