Warum ist [1,2] + [3,4] = "1,23,4" in JavaScript?

Ich wollte die Elemente eines Arrays in ein anderes einfügen, also habe ich Folgendes versucht:

[1,2] + [3,4]

Es antwortete mit:

"1,23,4"

Was ist los?

Der +Operator ist nicht für Arrays definiert .

Was passiert ist, dass Javascript Arrays in Strings konvertiert und diese verkettet.

Aktualisieren

Da diese Frage und folglich meine Antwort viel Aufmerksamkeit erhält, hielt ich es für nützlich und relevant, einen Überblick darüber zu haben, wie die+ Bediener im Allgemeinen auch verhält.

Also, hier geht es.

Mit Ausnahme von E4X und implementierungsspezifischem Material verfügt Javascript (ab ES5) über 6 integrierte Datentypen :

1. Nicht definiert
2. Null
3. Boolescher Wert
4. Nummer
5. String
6. Objekt

Beachten Sie, dass, obwohl typeof etwas verwirrend object für Null undfunction für aufrufbare Objekte ist, eigentlich kein Objekt ist und streng genommen in spezifikationskonformen Javascript-Implementierungen alle Funktionen als Objekte betrachtet werden.

Das ist richtig - Javascript hat keine primitiven Arrays als solche; Es werden nur Instanzen eines Objekts aufgerufenArray mit etwas syntaktischem Zucker , um den Schmerz zu lindern.

Das Hinzufügen von mehr zur Verwirrung, Wrapper - Entitäten wie new Number(5), new Boolean(true)und new String("abc")sind alleobject Typen, keine Zahlen, Boolesche Werte oder Strings als man erwarten könnte. Trotzdem für arithmetische Operatoren Numberund Booleanverhalten sich wie Zahlen.

Einfach, oder? Mit all dem aus dem Weg können wir zur Übersicht selbst übergehen.

Verschiedene Ergebnistypen +nach Operandentypen

            || undefined | null   | boolean | number | string | object |
=========================================================================
 undefined  || number    | number | number  | number | string | string | 
 null       || number    | number | number  | number | string | string | 
 boolean    || number    | number | number  | number | string | string | 
 number     || number    | number | number  | number | string | string | 
 string     || string    | string | string  | string | string | string | 
 object     || string    | string | string  | string | string | string | 

^{* gilt für Chrome13, FF6, Opera11 und IE9. Das Überprüfen anderer Browser und Versionen bleibt dem Leser als Übung überlassen.}

Anmerkung: Wie bereits von aus CMS , für bestimmte Fälle von Objekten wie Number, Booleanund benutzerdefiniert diejenigen , die +Betreiber nicht unbedingt ein String Ergebnis. Dies kann abhängig von der Implementierung der Konvertierung von Objekt zu Primitiv variieren. Zum Beispiel die var o = { valueOf:function () { return 4; } };Bewertung von o + 2;Produkten 6, a number, die Bewertung von o + '2'Produkten'42' , a string.

Um zu sehen, wie die Übersichtstabelle erstellt wurde, besuchen Sie http://jsfiddle.net/1obxuc7m/

JavaScript + Operator dient zwei Zwecken: Hinzufügen von zwei Zahlen oder Verbinden von zwei Zeichenfolgen. Es hat kein spezifisches Verhalten für Arrays, daher werden sie in Zeichenfolgen konvertiert und dann verbunden.

Wenn Sie zwei Arrays verbinden möchten, um ein neues zu erstellen, verwenden Sie stattdessen die folgende .concatMethode :

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

Wenn Sie alle Elemente von einem Array zu einem anderen effizient hinzufügen möchten, müssen Sie die .push-Methode verwenden :

var data = [1, 2];

// ES6+:
data.push(...[3, 4]);
// or legacy:
Array.prototype.push.apply(data, [3, 4]);

// data is now [1, 2, 3, 4]

Das Verhalten des +Bedieners ist in Abschnitt 11.6.1 von ECMA-262 5e definiert :

11.6.1 Der Additionsoperator (+)

Der Additionsoperator führt entweder eine Zeichenfolgenverkettung oder eine numerische Addition durch. Die Produktion AdditiveExpression : AdditiveExpression + MultiplicativeExpressionwird wie folgt bewertet:

1. Sei lrefdas Ergebnis der Bewertung AdditiveExpression.
2. Lass lvalseinGetValue(lref).
3. Sei rrefdas Ergebnis der Bewertung MultiplicativeExpression.
4. Lass rvalsein GetValue(rref).
5. Lass lprimsein ToPrimitive(lval).
6. Lass rprimsein ToPrimitive(rval).
7. Wenn Type(lprim)ist Stringoder Type(rprim)ist String, dann
   1. Gibt den String zurück, der das Ergebnis der Verkettung ist, ToString(lprim)gefolgt vonToString(rprim)
8. Geben Sie das Ergebnis der Anwendung der Additionsoperation auf ToNumber(lprim)und zurück ToNumber(rprim). Siehe den Hinweis unten 11.6.3.

Sie können sehen, dass jeder Operand konvertiert wird ToPrimitive. Wenn wir weiterlesen, können wir feststellen, dass ToPrimitiveArrays immer in Strings konvertiert werden, was zu diesem Ergebnis führt.

Es fügt die beiden Arrays hinzu, als wären sie Strings .

Die Zeichenfolgendarstellung für das erste Array wäre "1,2" und das zweite wäre "3,4" . Wenn das +Zeichen gefunden wird, kann es keine Arrays summieren und sie dann als Zeichenfolgen verketten.

Die +Concats-Zeichenfolgen konvertieren die Arrays in Zeichenfolgen.

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

Verwenden Sie zum Kombinieren von Arrays concat.

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

In JavaScript führt der binäre Additionsoperator ( +) sowohl die numerische Addition als auch die Verkettung von Zeichenfolgen durch. Wenn das erste Argument jedoch weder eine Zahl noch eine Zeichenfolge ist, konvertiert es es in eine Zeichenfolge (daher " 1,2"), dann macht es dasselbe mit dem zweiten " 3,4" und verkettet sie mit " 1,23,4".

Versuchen Sie stattdessen die "concat" -Methode von Arrays:

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

Es konvertiert die einzelnen Arrays in Strings und kombiniert dann die Strings.

Es sieht so aus, als würde JavaScript Ihre Arrays in Strings verwandeln und zusammenfügen. Wenn Sie Tupel hinzufügen möchten, müssen Sie eine Schleife oder eine Kartenfunktion verwenden.

[1,2]+[3,4] in JavaScript ist dasselbe wie auswerten:

new Array( [1,2] ).toString() + new Array( [3,4] ).toString();

Um Ihr Problem zu lösen, sollten Sie am besten zwei Arrays direkt hinzufügen oder kein neues Array erstellen:

var a=[1,2];
var b=[3,4];
a.push.apply(a, b);

Es macht genau das, worum Sie es gebeten haben.

Was Sie zusammenfügen, sind Array-Referenzen (die JS in Zeichenfolgen konvertiert), keine Zahlen, wie es scheint. Es ist ein bisschen wie das Hinzufügen von Zeichenfolgen: "hello " + "world"="hello world"

Es wäre schön, wenn Sie Operatoren in JavaScript überladen könnten, aber nicht: Kann ich benutzerdefinierte Operatorüberladungen in Javascript definieren? Sie können nur den Operator "==" hacken, der vor dem Vergleich in Zeichenfolgen konvertiert wird: http://blogger.xs4all.nl/peterned/archive/2009/04/01/462517.aspx

Dies liegt daran, dass der Operator + davon ausgeht, dass die Operanden Zeichenfolgen sind, wenn es sich nicht um Zahlen handelt. Also konvertiert es sie zuerst in String und Concats, um das Endergebnis zu erhalten, wenn es keine Zahl ist. Außerdem werden Arrays nicht unterstützt.

Einige Antworten hier haben erklärt, wie die unerwartete unerwünschte Ausgabe ( '1,23,4') geschieht, und einige haben erklärt, wie man das erhält, was sie für die erwartete gewünschte Ausgabe ( [1,2,3,4]) halten, dh die Array-Verkettung. Die Art der erwarteten gewünschten Ausgabe ist jedoch tatsächlich etwas mehrdeutig, da in der ursprünglichen Frage lediglich "Ich wollte die Elemente eines Arrays zu einem anderen hinzufügen ..." angegeben wird. Dies könnte eine Array-Verkettung bedeuten, aber es könnte auch eine Tupeladdition bedeuten (z. B. hier und hier ), dh das Hinzufügen der Skalarwerte von Elementen in einem Array zu den Skalarwerten der entsprechenden Elemente im zweiten Array, z. B. Kombinieren [1,2]und [3,4]Erhalten [4,6].

Angenommen, beide Arrays haben dieselbe Arität / Länge, ist hier eine einfache Lösung:

const arr1 = [1, 2];
const arr2 = [3, 4];

const add = (a1, a2) => a1.map((e, i) => e + a2[i]);

console.log(add(arr1, arr2)); // ==> [4, 6]

Ein weiteres Ergebnis mit nur einem einfachen "+" - Zeichen ist:

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

So etwas sollte funktionieren (aber!):

var a=[1,2];
var b=[3,4];
a=a+','+b; // [1,2,3,4]

... aber es wird die Variable a von einem Array in einen String konvertieren! Denken Sie daran.