Ausführliche Erläuterung der dynamischen Zusammenführung der Eigenschaften zweier Objekte in JavaScript

Dieser Artikel führt Sie in die Methode zum dynamischen Zusammenführen der Eigenschaften zweier Objekte in JavaScript ein. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Wir können den Spread-Operator (...) verwenden, um verschiedene Objekte zu einem Objekt zusammenzuführen. Dies ist auch die häufigste Operation zum Zusammenführen von zwei oder mehr Objekten. ...)将不同的对象合并为一个对象，这也是合并两个或多个对象最常见的操作。

这是一种合并两个对象的不可变方法，也就是说，用于合并的初始两个对象不会因为副作用而以任何方式改变。最后，我们得到了一个新对象，它由这两个对象构造而成，而它们仍然保持完整。

我们创建两个对象并合并它们：

const person = {
    name: "前端小智",
    age: 24
}
const job = {
    title: "前端开发",
    location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

运行结果：

{ 
  name: '前端小智', 
  age: 24, 
  title: '前端开发', 
  location: '厦门' 
}

注意：如果这两个对象之间有共同的属性，例如它们都有location，则第二个对象（job）的属性将覆盖第一个对象（person）的属性：

const person = {
  name: "前端小智",
  location: "北京"
}
const job = {
  title: "前端开发",
  location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

运行结果：

{ 
  name: '前端小智', 
  location: '厦门', 
  title: '前端开发' 
}

如果要合并两个以上的对象，最右边的对象将覆盖左边的对象。

使用 Object.assign() 合并JavaScript对象

并两个或多个对象的另一种常用方法是使用内置的Object.assign()方法：

Object.assign(target, source1, source2, ...);

此方法将一个或多个源对象中的所有属性复制到目标对象中。就像扩展操作符一样，在覆盖时，将使用最右边的值:

const person = {
  name: "前端小智",
  location: "北京",
};
const job = {
  title: "前端开发",
  location: "厦门",
};

const employee = Object.assign(person, job);
console.log(employee);

运行结果：

{ 
  name: '前端小智', 
  age: 24,
  location: '厦门', 
  title: '前端开发' 
}

同样，请记住employee引用的对象是一个全新的对象，不会链接到person或job引用的对象。

浅合并和深合并

在浅合并的情况下，如果源对象上的属性之一是另一个对象，则目标对象将包含对源对象中存在的同一对象的引用。 在这种情况下，不会创建新对象。

我们调整前面的person对象，并将location作为对象本身

const person = {
    name: "John Doe",
    location: {
        city: "London", 
        country: "England"
    }
}
const job = {
    title: "Full stack developer"
}

const employee = {...person, ...job};

console.log(employee.location === person.location);

运行结果：

true

我们可以看到person和employee对象中对location对象的引用是相同的。事实上，spread操作符(...)和Object.assign() 都是浅合并。

JavaScript没有现成的深合并支持。然而，第三方模块和库确实支持它，比如Lodash的.merge。

总结

本文中，我们演示在如何在 JS 中合并两个对象。介绍了spread操作符(...)和Object.assign()

Dies ist eine unveränderliche Methode zum Zusammenführen zweier Objekte, d. h. die beiden ursprünglich zum Zusammenführen verwendeten Objekte ändern sich aufgrund von Nebenwirkungen in keiner Weise. Am Ende erhalten wir ein neues Objekt, das aus diesen beiden Objekten erstellt wird, während sie intakt bleiben.

Wir erstellen zwei Objekte und führen sie zusammen:

rrreee

Laufendes Ergebnis:
rrreee

Hinweis: Wenn es gemeinsame Eigenschaften zwischen diesen beiden Objekten gibt, zum Beispiel haben beide location, dann ist das zweite The Eigenschaften des ersten Objekts (job) überschreiben die Eigenschaften des ersten Objekts (person):

rrreee

Laufendes Ergebnis:

rrreee

Wenn Sie mehr als zusammenführen möchten Bei zwei Objekten überschreibt das Objekt ganz rechts das Objekt links.

JavaScript-Objekte mit Object.assign()

zusammenführen

Eine weitere gängige Methode zum Zusammenführen von zwei oder mehr Objekten ist die Verwendung des integrierten Object.assign() Methode: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">rrreee</a>Diese Methode kopiert alle Eigenschaften von einem oder mehreren Quellobjekten in das Zielobjekt. Genau wie beim Spread-Operator wird beim Überschreiben der Wert ganz rechts verwendet:

rrreee🎜 Laufergebnis: 🎜rrreee🎜 Denken Sie auch daran, dass das Objekt, auf das employee verweist, ein völlig neues Objekt ist und nicht sein wird verknüpft mit dem Objekt, auf das durch person oder job verwiesen wird. 🎜

Flache Zusammenführung und tiefe Zusammenführung

🎜Wenn bei einer flachen Zusammenführung eine der Eigenschaften des Quellobjekts ein anderes Objekt ist, enthält das Zielobjekt einen Verweis auf dasselbe Objekt, das im Quellobjekt vorhanden ist. In diesem Fall wird kein neues Objekt erstellt. 🎜🎜Wir passen das vorherige Person-Objekt an und verwenden Standort als Objekt selbst🎜rrreee🎜Das laufende Ergebnis: 🎜rrreee🎜Wir können Person sehen Es ist dasselbe wie der Verweis auf das Objekt location im Objekt employee. Tatsächlich sind der Spread-Operator (...) und Object.assign() beide flache Zusammenführungen. 🎜🎜JavaScript bietet keine standardmäßige Deep-Merge-Unterstützung. Es wird jedoch von Modulen und Bibliotheken von Drittanbietern unterstützt, beispielsweise .merge von Lodash. 🎜

Zusammenfassung

🎜In diesem Artikel zeigen wir, wie man zwei Objekte in JS zusammenführt. Einführung des Spread-Operators (...) und der Methode Object.assign(), die beide eine flache Zusammenführung von zwei oder mehr Objekten zu einem neuen Objekt durchführen Auswirkungen auf die Komponenten haben. 🎜🎜🎜Originaladresse: https://stackak.com/merge-properties-of-two-objects-dynamically-in-javascript/🎜🎜Autor: Abhilash Kakumanu🎜🎜🎜Übersetzungsadresse: https://segmentfault.com/ a/1190000039833349🎜🎜Übersetzer: Front-End Xiaozhi🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der dynamischen Zusammenführung der Eigenschaften zweier Objekte in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!