Hier sind 2 Wege, deine Arrays zu kombinieren und dabei ein NEUES Array zurückzugeben. Ich nehme am liebsten den Spread-Operator. Wenn du aber ältere Browser unterstützen musst, greifst du besser zu Concat.
// 2 Wege, Arrays zusammenzuführen
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
// Methode 1: Concat
const combined1 = [].concat(fruits, legumes);
// Methode 2: Spread
const combined2 = [...fruits, ...legumes];
// Ergebnis
// [ 'pomme', 'poire', 'carotte', 'salade' ]Alternative Schreibweise von Concat
Du kannst concat auch so schreiben:
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.concat(legumes);
// [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(fruits); // ['pomme ', 'poire'];
console.log(legumes); // ['carotte ', 'salade'];
Wie du siehst, fasst diese Schreibweise das bestehende Array nicht an und verändert es nicht.
Welche Variante nehme ich?
Stellen wir beide Versionen nebeneinander, damit du sie vergleichen kannst.
// Version A:
const combinedA = [].concat(fruits, legumes);
// Version B:
const combinedB = fruits.concat(legumes);
Bleibt die Frage, welche Variante es sein soll. Ich bevorzuge Version A, weil die Absicht dort viel klarer ist. Ein Blick genügt, und ich weiß: Hier entsteht ein neues Array, das bestehende bleibt unangetastet. Schaue ich dagegen auf Version B, wirkt es, als würde ich legumes an das Array fruits anhängen, und dass das Array fruits dabei durch die legumes ersetzt werden kann, ist alles andere als offensichtlich.
Unterschied zwischen Spread und Concat
Ich greife lieber zu spread, weil es kompakter und schneller getippt ist. ABER concat hat weiterhin seine Vorteile.
Spread ist hervorragend, solange du vorher weißt, dass du es mit Arrays zu tun hast. Aber was passiert, wenn die Quelle etwas anderes ist, ein String zum Beispiel, und du diesen String an das Array hängen willst? Schauen wir uns ein Beispiel an.
Beispiel
Nehmen wir an, das ist das Ergebnis, das wir haben wollen:
[1, 2, 3, 'random'];
A. Mit Spread
Wenn wir dem bisherigen Muster folgen und den Spread-Operator einsetzen, passiert Folgendes:
function combineArray(array1, array2) {
return [...array1, ...array2];
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]
Spreaden wir unseren String, zerfällt das Wort in einzelne Buchstaben. Das ist also nicht das Ergebnis, das wir wollten.
B. Mit Concat
ABER wenn wir dem concat-Muster von vorhin folgen, sieht es so aus:
function combineArray(array1, array2) {
return [].concat(array1, array2);
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'random' ]
Sehr gut, wir bekommen genau das gewünschte Ergebnis.
Ich weiß, einige denken jetzt „Pff!“. Ich schreibe einfach eine Bedingung, die prüft, ob das Übergebene ein Array ist, und verzweige entsprechend. Klar, das funktioniert auch. Oder du schreibst weniger Code und nimmst concat.
Fazit
Die kurze Regel lautet also: Weißt du, dass du es mit Arrays zu tun hast, nimm spread. Kann aber auch etwas anderes als ein Array ankommen, dann führe das Array mit concat zusammen
Ich wollte es jedenfalls erwähnt haben, damit du je nach Problem die passendere Methode wählen kannst.
Merge Array with Push (zwei Arrays mit Push zusammenführen)
Manche von euch fragen sich, ob sich zum Zusammenführen nicht auch push nutzen lässt. Doch, das geht. Aber push fasst das bestehende Array an und verändert es. Es erzeugt KEIN neues Array. Es hängt also davon ab, was du vorhast. Behalte das im Hinterkopf.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.push(...legumes);
console.log(combined); // 4
// wenn du push nutzt, gibt es die LÄNGE des kombinierten Arrays zurück
console.log(fruits); // [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(legumes); // ['carotte', 'salade']
Und wenn du ein Array in ein anderes Array pushst, musst du es spreaden, sonst landest du bei einem verschachtelten Array. Es sei denn natürlich, genau das war gewollt
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
cars.push(legumes);
// fruits: [ 'pomme ', 'poire', ['carotte ', 'salade'] ]
cars.push(...legumes);
// fruits: [ 'pomme ', 'poire', 'carotte ', 'salade' ]
Browser-Unterstützung
Spread kam mit ES6, alle modernen Browser unterstützen es also. Andernfalls nimmst du stattdessen concat oder einen Compiler wie Babel.
