Wie man zwei Objekte in JavaScript zusammenführt: 5 beste Methoden

Einleitung: Warum das Zusammenführen von Objekten der Schmerz jedes JavaScript-Entwicklers ist

Stellen Sie sich vor: Sie arbeiten an einer Anwendung und müssen Daten aus zwei verschiedenen Quellen zusammenführen. Zum Beispiel haben Sie eine Basiskonfiguration eines Benutzers aus der Datenbank und Einstellungen, die vom Frontend kommen. Wie verbindet man sie ohne Schmerz und Leid? Genau diese Frage – „How can I merge properties of two JavaScript objects?“ – hat tausende Aufrufe auf Stack Overflow gesammelt. Und das zu Recht: Das Zusammenführen von Objekten in JavaScript birgt viele Fallstricke.

In diesem Artikel werden wir alle gängigen Methoden zum Zusammenführen von Objekten in JS durchgehen: vom klassischen Object.assign() bis zum modernen Spread-Operator. Sie erfahren, wie Sie tiefe Kopien von verschachtelten Strukturen erstellen, Mutationen der Originaldaten vermeiden und die richtige Methode für Ihre Aufgabe auswählen. Los geht's!

Das Problem: Was bedeutet es, „Eigenschaften von zwei Objekten zusammenzuführen“?

Wenn wir „merge objects JavaScript“ sagen, meinen wir die Erstellung eines neuen Objekts, das alle Eigenschaften der ursprünglichen Objekte enthält. Wenn identische Schlüssel vorkommen, überschreibt der Wert aus dem zweiten Objekt den Wert aus dem ersten.

Angenommen, es gibt zwei Objekte:

const user = {  name: 'Anna',  age: 28,  city: 'Moskau'};

const updates = {  age: 29,  job: 'Entwickler'};

Nach dem Zusammenführen von Objekten in JS möchten wir erhalten:

{  name: 'Anna',  age: 29,       // aktualisierter Wert  city: 'Moskau',  job: 'Entwickler'  // neue Eigenschaft}

Das scheint einfach. Aber der Teufel steckt im Detail: verschachtelte Objekte, Arrays, Mutation des Originals und Performance.

Methode 1: Object.assign() – der gute alte Klassiker

Die Methode Object.assign() ist der älteste und bewährteste Weg zum Zusammenführen von Objekten in JavaScript. Sie kopiert eigene aufzählbare Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt.

Syntax

Object.assign(target, ...sources)

Wichtig: Das erste Argument ist das Zielobjekt, das verändert wird. Alle folgenden sind die Quellen der Eigenschaften.

Beispiel für das Zusammenführen

const user = { name: 'Anna', age: 28 };const updates = { age: 29, job: 'Entwickler' };

const merged = Object.assign({}, user, updates);console.log(merged);// { name: 'Anna', age: 29, job: 'Entwickler' }

Beachten Sie: Wir übergeben ein leeres Objekt {} als target. Dies stellt sicher, dass die ursprünglichen Objekte nicht mutiert werden – das Klonen von Objekten in JS wird korrekt durchgeführt.

Fallstrick: Flache Kopie

Object.assign() führt nur eine flache Kopie (shallow copy) durch. Wenn Sie verschachtelte Objekte haben, werden diese als Referenz kopiert:

const obj1 = { data: { value: 10 } };const obj2 = { info: 'test' };

const merged = Object.assign({}, obj1, obj2);merged.data.value = 999;console.log(obj1.data.value); // 999 – Mutation des ursprünglichen Objekts!

Für ein tiefes Zusammenführen sind andere Ansätze nötig, die wir weiter unten besprechen.

Methode 2: Spread-Operator – Eleganz von ES6

Mit dem Aufkommen von ES6 wurde der Spread-Operator in JavaScript (die drei Punkte ...) zur beliebtesten Methode zum Zusammenführen von Objekteigenschaften. Er ist prägnant, lesbar und erfordert keinen Methodenaufruf.

Syntax

const merged = { ...obj1, ...obj2 };

Beispiel

const defaults = { theme: 'light', lang: 'de', showSidebar: true };const userPrefs = { theme: 'dark', fontSize: 16 };

const settings = { ...defaults, ...userPrefs };console.log(settings);// { theme: 'dark', lang: 'de', showSidebar: true, font