Array concat() – mehrere Arrays zu einem neuen Array zusammenfügen

Arrays vereinen / aneinander hängen

Javascript concat(e1 [, e2 ... eN]) hängt ein Array an das Ende eines Arrays. Wird ein einzelnes Element hinzugefügt, wird es wie ein Array mit nur einem Element behandelt. Wenn das neue Element ein Array ist, wird es linearisiert und seine Elemente werden am Ende des Arrays eingefügt. Das Original des angehangenen Arrays bleibt aber erhalten.

const figuren = ["Teddy", "Cowboy", "Pony"];
const mobile  = ["Auto", "Lokomotive"];
const elem = "Roller";

const spielzeug = mobile.concat(figuren, elem);
console.log ("spielzeug", spielzeug);

Der Aufruf spielzeug = mobile.concat(figuren, elem) fügt zuerst "figuren" – "Teddy", "Cowboy", "Pony" – an das Ende des Arrays mobile an und dann elem – "Roller".

▼ spielzeug
▼ Array (5)
0 "Auto"
1 "Lokomotive"
2 "Teddy"
3 "Cowboy"
4 "Pony"
5 "Roller"

spielzeug = mobile.concat(figuren, elem); sieht wild aus? Die zweite Schreibweise ist vielleicht ausdrucksvoller. Beides geht.

Objekte bleiben Referenzen

concat() kopiert die Elemente, nicht die Inhalte. Bei Objekten werden nur die Referenzen übernommen.

const a = [ 
	{"preis": 400, "pid": "Teddy"}, 
	{"preis": 600, "pid": "Puppe"} 
];
const b = [ 
	{"preis": 250, "pid": "Auto"}, 
	{"preis": 100, "pid": "Lokomotive"}, 
	{"preis": 50, "pid": "Cowboyfigur"} 
];

const c = [].concat(a, b);
console.log ("c", c);

▼ c
▼ Array (5)
0 {preis: 400, pid: "Teddy"}
1 {preis: 600, pid: "Puppe"}
2 {preis: 250, pid: "Auto"}
3 {preis: 100, pid: "Lokomotive"}
4 {preis: 50, pid: "Cowboyfigur"}

concat() kopiert die Referenzen auf die Objekte aus a und b und erstellt keine neuen Objektkopien. Wird jetzt ein neuer Preis für gesetzt, hat sich auch der Wert von

a[0].preis

c[0].preis = 999;
console.log("neuer Preis für a[0]", a[0].preis); // 999

Das heißt: c[0] und a[0] zeigen auf dasselbe Objekt im Speicher.

Verschachtelte Arrays zusammenführen

Wenn arr2 allerdings ein verschachteltes Array ist, wird die Linearisierung nur auf der ersten Ebene durchgeführt.

const arr1 = [10, 20, 30];
const arr2 = [[33, 44, 55], [66, 77, 88]];
let result = arr1.concat(arr2);  
console.log ("result " + result);
console.log ("result [7] " + result[7]);
console.log ("result [4] " + result[4]);
console.log ("result [4][2] " + result[4][2]);

[LOG]  result 10,20,30,33,44,55,66,77,88
[Log]  result [7] undefined // Linearisiert nur auf Ebene 1!
[Log]  result [4] 66,77,88 // Auf Index 4 liegt ein Array
[Log]  result [4][2] 88

Das Resultat von concat() in diesem Beispiel ist also ein Array mit fünf Elementen, Element 4 und 5 sind selber wieder Arrays.

Auch wenn die Browser-Konsole beim Aufruf von console.log das resultierende Array mit 9 Elemente zeigt (10,20,30,33,44,55,66,77,88), gibt es keinen Index 7. Stattdessen liegt auf Platz 4 des Arrays result ein Array mit den Werten 66,77,88.

Die Struktur von result ist

 0    1   2      3            4
[10, 20, 30, [33,44,55], [66,77,88]]

Alternativen zu concat – spread und push

Da gibt es auch noch das zuverlässige gute alte array.push(). Allerdings ändert push() das Original-Array und erzeugt kein Neues.

const bonbons = ["Karamell", "Gummibärchen", "Drops", "Tick Tack"];
const pralinen = ["Wallnuss", "Marzipan", "Nougat"];

const süßigkeiten = bonbons.push (...pralinen);
console.log (süßigkeiten);

Sieht auf den ersten Blick gut aus, aber der Blick in die Console offenbart, dass push() die Zahl der Elemente der Arrays zurückgibt, und keinesfalls ein Array.

[Log] 7
[Log] ["Karamell", "Gummibärchen", "Drops", "Tick Tack", "Wallnuss", "Marzipan", "Nougat"]
[Log] ["Wallnuss", "Marzipan", "Nougat"]

Die Pralinen wurden an das Array »Bonbons« gehangen. Da sind Fehler schnell vorprogrammiert.

Die drei Punkte ...pralinen kennzeichnen den Spread-Operator. Spread trat mit ES6 in die Öffentlichkeit und wird bereits von allen modernen Browsern unterstützt. Der Spread-Operator wird heute häufiger eingesetzt. Auch wenn beides – concat() uns Spread-Operator – als gleichwertig gelten, ist Spread meist besser lesbar.

const sp = [...bonbons, ...pralinen];
console.log ("sp", sp)