Pourquoi [1,2] + [3,4] = "1,23,4" en JavaScript?

Question

Je voulais ajouter les éléments d'un tableau dans un autre, alors j'ai essayé cette phrase simple dans notre Firebug bien-aimé:

 [1,2] + [3,4]
 

Il a répondu avec:

 "1,23,4"
 

Que se passe-t-il?

Answer 1

L' + opérateur n'est pas défini pour les tableaux.

Ce qui se passe, c'est que Javascript convertit les tableaux dans les chaînes et les concatène ces.

 

Mise à jour

Depuis cette question et, par conséquent, ma réponse est l'objet de beaucoup d'attention que j'ai l'impression que, plus perspicaces que des trucs posté par Jeremy Banques , il serait utile d'avoir un aperçu sur la façon dont l' + opérateur se comporte en général.

Donc, ici il va.

À l'exclusion de E4X et la mise en œuvre spécifique des choses, JavaScript a 6 intégrées types de données:

1. undefined
2. boolean
3. number
4. string
5. function
6. object

Notez que ni null ni [] est un type distinct - les deux retournent object lorsque la fed typeof. Toutefois + fonctionne différemment dans les deux cas.

C'est le droit de la fonction JavaScript n'a pas de primitive des tableaux en tant que tel; seules les instances d'une classe appelée Array avec certaines sucre syntaxique pour soulager la douleur.

L'ajout de plus à la confusion, papier d'emballage des entités telles que new Number(5), new Boolean(true) et new String("abc") sont tous d' object type, pas des nombres, booléens ou des chaînes de caractères que l'on pourrait attendre. Néanmoins, pour les opérateurs arithmétiques Number et Boolean se comportent comme des numéros.

Facile, hein? Avec tout ça de la manière, nous pouvons passer à la présentation elle-même.

Les différents types de résultats de + par opérande types

-------------------------------------------------------------------------------------------
            | undefined | boolean | number | string | function | object | null   | array  | 
-------------------------------------------------------------------------------------------

undefined   | number    | number  | number | string | string   | string | number | string | 

boolean     | number    | number  | number | string | string   | string | number | string | 

number      | number    | number  | number | string | string   | string | number | string | 

string      | string    | string  | string | string | string   | string | string | string | 

function    | string    | string  | string | string | string   | string | string | string | 

object      | string    | string  | string | string | string   | string | string | string | 

null        | number    | number  | number | string | string   | string | number | string | 

array       | string    | string  | string | string | string   | string | string | string | 

-------------------------------------------------------------------------------------------

* ^{cela s'applique à google Chrome 13, Firefox 6, Opera 11 et IE9. Vérifier d'autres navigateurs et versions est laissé comme exercice pour le lecteur.}

Remarque: Comme l'a souligné la CMS, pour certains cas, des objets tels que des Number, Boolean personnalisés, l' + opérateur n'a pas nécessairement de produire une chaîne de résultats. Il peut varier en fonction de la mise en œuvre de l'objet primitif de conversion. Par exemple var o = { valueOf:function () { return 4; } }; évaluation o + 2; produit 6, number, en évaluant o + '2' produit '42', string.

À voir la façon dont le tableau de synthèse a été généré visite http://jsfiddle.net/4EjXd/

Answer 2

JavaScript + opérateur a deux fins: l'ajout de deux nombres, ou de rejoindre les deux chaînes. Il n'a pas un comportement spécifique pour les tableaux, il est donc de les convertir en chaînes et ensuite se joindre à eux.

Si vous voulez vous joindre deux tables pour produire une nouvelle, utilisez l' .concat méthode :

[1, 2].concat([3, 4]) // [1, 2, 3, 4]

Si vous souhaitez ajouter efficacement tous les éléments d'un tableau à un autre, vous devez utiliser l' .méthode push dans ce peu-verbeux:

var data = [1, 2];
Array.prototype.push.apply(data, [3, 4]); // data is now [1, 2, 3, 4]

Le comportement de l' + opérateur est défini dans l'ECMA-262 5e Article 11.6.1:

11.6.1 L'opérateur d'Addition ( + )

L'ajout de l'opérateur effectue la concaténation de chaîne ou numérique plus. La production AdditiveExpression : AdditiveExpression + MultiplicativeExpression est évaluée de la façon suivante:

1. Laissez - lref être le résultat de l'évaluation de l' AdditiveExpression.
2. Laissez - lval être GetValue(lref).
3. Laissez - rref être le résultat de l'évaluation de l' MultiplicativeExpression.
4. Laissez - rval être GetValue(rref).
5. Laissez - lprim être ToPrimitive(lval).
6. Laissez - rprim être ToPrimitive(rval).
7. Si Type(lprim) est String ou Type(rprim) est String, alors
   1. De retour de la Chaîne qui est le résultat de la concaténation ToString(lprim) suivie par ToString(rprim)
8. Retourner le résultat de l'application de l'opération d'addition d' ToNumber(lprim) et ToNumber(rprim). Voir la Note ci-dessous 11.6.3.

Vous pouvez voir que chaque opérande est converti en ToPrimitive. En lisant plus loin on peut trouver qu' ToPrimitive toujours convertir les tableaux de chaînes de caractères, la production de ce résultat.

Answer 3

Il ajoute les deux tableaux comme s'ils étaient des chaînes .

La représentation de la chaîne pour le premier tableau serait "1,2" et la seconde serait "3,4" . Ainsi, lorsque le signe + est trouvé, il ne peut pas additionner les tableaux, puis les concaténer comme étant des chaînes.

Answer 4

Les chaînes de concaténation + convertissent les tableaux en chaînes.

 [1,2] + [3,4]
'1,2' + '3,4'
1,23,4
 

Pour combiner des tableaux, utilisez concat .

 [1,2].concat([3,4])
[1,2,3,4]
 

Answer 5

En JavaScript, l'opérateur d'addition binaire ( + ) effectue à la fois l'addition numérique et la concaténation de chaîne. Cependant, quand son premier argument n'est ni un nombre ni une chaîne, alors il le convertit en une chaîne (d'où " 1,2 ") alors il fait de même avec le second " 3,4 " et les concatène à " 1,23,4 ".

Essayez d'utiliser la méthode "concat" de Arrays à la place:

 var a = [1, 2];
var b = [3, 4];
a.concat(b) ; // => [1, 2, 3, 4];