Objekte in Javasript zusammenführen

Kushank Singh 12 Oktober 2023
  1. Verwenden Sie die Funktion object.assign(), um Objekte in JavaScript zusammenzuführen
  2. Verwenden Sie den Spread-Operator, um Objekte in JavaScript zusammenzuführen
  3. Verwenden Sie die Funktion array.reduce(), um Objekte in JavaScript zusammenzuführen
  4. Verwenden Sie die Funktion jquery.extend(), um Objekte in JavaScript zusammenzuführen
  5. Verwendung von eine benutzerdefinierte Funktion zum Zusammenführen von Objekten in JavaScript
Objekte in Javasript zusammenführen

Ein Objekt ist ein nicht-primitiver Datentyp, der es uns ermöglicht, Daten in Schlüssel-Wert-Paaren zu speichern.

In diesem Tutorial werden wir zwei oder mehr Objekte in JavaScript mit verschiedenen Methoden zusammenführen.

Verwenden Sie die Funktion object.assign(), um Objekte in JavaScript zusammenzuführen

In JavaScript kann die Methode assign() iterativ Eigenschaften von einem oder mehreren Objekten in ein Zielobjekt lesen. Es gibt das Zielobjekt zurück. Wir können die beiden Objekte mit einem leeren Objekt übergeben, um sie zusammenzuführen.

Überprüfen Sie den Code unten.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

var obj3 = Object.assign({}, obj1, obj2);
console.log(obj3);

Ausgabe:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Verwenden Sie den Spread-Operator, um Objekte in JavaScript zusammenzuführen

In JavaScript kann der Spread-Operator (…) alle Elemente eines Arrays entpacken. Wir können es auch verwenden, um Objekte zusammenzuführen.

Im folgenden Code erfahren Sie, wie Sie diese Methode verwenden.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

var obj3 = {...obj1, ...obj2};
console.log(obj3);

Ausgabe:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Verwenden Sie die Funktion array.reduce(), um Objekte in JavaScript zusammenzuführen

In diesem haben wir die Funktion array.reduce() verwendet, die verwendet wird, um eine Reduktionsfunktion (die Sie bereitstellen) für jedes Element in einem Array zu implementieren. Es gibt einen einzelnen Ausgabewert zurück.

Dies implementieren wir im folgenden Code-Snippet.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

function merge(...arr) {
  return arr.reduce((acc, val) => {
    return {...acc, ...val};
  }, {});
}

var obj3 = merge(obj1, obj2);
console.log(obj3);

Ausgabe:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Verwenden Sie die Funktion jquery.extend(), um Objekte in JavaScript zusammenzuführen

jQuery ist eine leichte und sehr schnelle JavaScript-Bibliothek. Es vereinfacht die Verwendung von JavaScript.

extend() ist eine jQuery-Methode, mit der zwei oder mehr Objekte zu einem Objekt zusammengeführt werden. Es gibt ein Objekt zurück.
Beispielsweise,

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};

var obj2 = {
  store: 'Walmart',
};

jQuery.extend(obj1, obj2);

Ausgabe:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Verwendung von eine benutzerdefinierte Funktion zum Zusammenführen von Objekten in JavaScript

Dabei erstellen wir unsere eigene Funktion, um ein zusammengeführtes Objekt zurückzugeben. Dabei werden die Eigenschaften der beiden Objekte zu einem dritten Objekt zusammengeführt.

Überprüfen Sie den Code unten.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};

var obj2 = {
  store: 'Walmart',
};

function merge_options(obj1, obj2) {
  var obj3 = {};
  for (var key in obj1) {
    obj3[key] = obj1[key];
  }
  for (var key in obj2) {
    obj3[key] = obj2[key];
  }
  return obj3;
};

merge_options(obj1, obj2);

Ausgabe:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Verwandter Artikel - JavaScript Object