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 arr1 = ["🐅", "🐊", "🐍"]; const e = "🐸"; const arr2 = ["🐇", "🐄", "🐑"]; (1)let result = arr1.concat(e, arr2); oder (2) let result = [].concat (arr1, e, arr2); console.log ("result", result);
[LOG] result 🐅,🐊,🐍,🐸,🐇,🐄,🐑
(1) Der Aufruf arr1.concat(e, arr2) fügt zuerst "🐸" – den Wert von e – an das Ende des Arrays arr1 an und dann das linearisierte Array arr2 – also die einzelnen Werte von arr2: "🐇", "🐄", "🐑".
(2) Zu wild? Die zweite Schreibweise ist vielleicht ausdrucksvoller. Beides geht.
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 Bild 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. Natürlich nicht von IE. Wer also IE weiterhin unterstützen muss, bleibt besser bei array.concat.
