Wie kann ich die Eigenschaften von zwei JavaScript-Objekten dynamisch zusammenführen?

Question

Ich muss in der Lage sein, zwei (sehr einfache) JavaScript-Objekte zur Laufzeit zu verschmelzen. Zum Beispiel würde ich gerne:

var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }

obj1.merge(obj2);

//obj1 now has three properties: food, car, and animal

Gibt es eine eingebaute Möglichkeit, dies zu tun? Ich brauche keine Rekursion, und ich muss nicht Funktionen zusammenführen, nur Methoden auf flache Objekte.

Answer 1

Object.assign(TargetObject, Obj1, Obj2, ...);

Answer 2

Die Zusammenführung von JSON-kompatiblen JavaScript-Objekten

Ich unterstütze die Verwendung und den Einsatz von nicht-destruktiven Methoden, die die ursprüngliche Quelle nicht verändern, 'Object.assign' ist eine destruktive Methode und zufällig ist es auch nicht so produktionsfreundlich weil es auf früheren Browsern nicht mehr funktioniert und man keine Möglichkeit hat, Parcheando sauber mit einer Alternative zu versehen.

Die Zusammenführung von JS-Objekten wird immer unerreichbar oder unvollständig sein, egal wie die Lösung aussieht. Aber das Zusammenführen von JSON-kompatiblen Objekten ist nur einen Schritt davon entfernt, einen einfachen und portablen Code für eine zerstörungsfreie Methode zum Zusammenführen einer Reihe von JS-Objekten in ein zurückgegebenes Master-Objekt zu schreiben, das alle eindeutigen Eigenschaftsnamen und ihre entsprechenden Werte enthält, die in einem einzigen Master-Objekt für den beabsichtigten Zweck zusammengefasst sind.

Wenn man bedenkt, dass MSIE8 der erste Browser ist, der eine native Unterstützung für das JSON-Objekt bietet, ist das eine große Erleichterung, und die Wiederverwendung der bereits vorhandenen Technologie ist immer eine willkommene Gelegenheit.

Die Beschränkung Ihres Codes auf JSON-kompatible Standardobjekte ist eher ein Vorteil als eine Einschränkung, da diese Objekte auch über das Internet übertragen werden können. Und natürlich gibt es für diejenigen, die eine tiefere Abwärtskompatibilität wünschen, immer ein json plug., dessen Methoden einfach einer JSON-Variablen im äußeren Code zugewiesen werden können, ohne dass die verwendete Methode geändert oder neu geschrieben werden muss.

function Merge( ){
    var a = [].slice.call( arguments ), i = 0;
        while( a[i] )a[i] = JSON.stringify( a[i++] ).slice( 1,-1 );
        return JSON.parse( "{"+ a.join() +"}" );
    }

(Natürlich kann man dem Ganzen auch einen aussagekräftigeren Namen geben, den ich noch nicht festgelegt habe; ich sollte es wahrscheinlich JSONmerge nennen)

Der Anwendungsfall:

var master = Merge( obj1, obj2, obj3, ...objn );

Nun, im Gegensatz zur Object.assign Dabei bleiben alle Objekte unberührt und in ihrem ursprünglichen Zustand (für den Fall, dass Sie etwas falsch gemacht haben und die zusammenzuführenden Objekte neu anordnen oder separat für einen anderen Vorgang verwenden müssen, bevor Sie sie wieder zusammenführen).

Auch die Anzahl der Merge-Argumente ist begrenzt nur durch die Begrenzung der Länge der Argumente [die enorm ist]. Das nativ unterstützte JSON-Parsen/Stringify ist bereits maschinenoptimiert, d.h. es sollte schneller sein als jede geskriptete Form der JS-Schleife. Die Iteration über gegebene Argumente wird mit der while - ist nachweislich die schnellste Schleife in JS.

Es schadet nicht, kurz zu erwähnen, dass wir bereits wissen, dass doppelte Eigenschaften der eindeutigen Objektbezeichnungen (Schlüssel) durch das spätere Objekt mit der gleichen Schlüsselbezeichnung überschrieben werden, was bedeutet, dass Sie die Kontrolle darüber haben, welche Eigenschaft die vorherige übernimmt, indem Sie einfach die Liste der Argumente ordnen oder neu ordnen. Und der Vorteil, ein sauberes und aktualisiertes Master-Objekt ohne Duplikate als endgültige Ausgabe zu erhalten.

;
var obj1 = {a:1}, obj2 = {b:2}, obj3 = {c:3}
;
function Merge( ){
    var a = [].slice.call( arguments ), i = 0;
        while( a[i] )a[i] = JSON.stringify( a[i++] ).slice( 1,-1 );
        return JSON.parse( "{"+ a.join() +"}" );
    }
;
var master = Merge( obj1, obj2, obj3 )
;
console.log( JSON.stringify( master ) )
;

Answer 3

Mit dem folgenden Hilfsmittel können Sie zwei Objekte zu einem neuen Objekt zusammenführen:

function extend(obj, src) {
    for (var key in src) {
        if (src.hasOwnProperty(key)) obj[key] = src[key];
    }
    return obj;
}

// example
var a = { foo: true }, b = { bar: false };
var c = extend(a, b);

console.log(c);
// { foo: true, bar: false }

Dies ist typischerweise nützlich, wenn ein Optionsdiktat mit den Standardeinstellungen in einer Funktion oder einem Plugin zusammengeführt wird.

Wenn die Unterstützung für IE 8 nicht erforderlich ist, können Sie Folgendes verwenden Object.keys für dieselbe Funktionalität:

function extend(obj, src) {
    Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
    return obj;
}

Dies erfordert etwas weniger Code und ist ein wenig schneller.

Answer 4

Ich verwende das folgende Beispiel, das in reinem JavaScript geschrieben ist. Es beginnt mit dem Argument ganz rechts und kombiniert es bis zum ersten Argument. Es gibt keinen Rückgabewert, nur das erste Argument wird geändert, und der äußerste linke Parameter (außer dem ersten) hat das höchste Gewicht bei den Eigenschaften.

var merge = function() {
  var il = arguments.length;

  for (var i = il - 1; i > 0; --i) {
    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key)) {
        arguments[0][key] = arguments[i][key];
      }
    }
  }
};

Answer 5

zwei Objekte zusammenführen mit Objekt.zuweisen y Spread-Operator.

Falscher Weg (Ändern Sie das ursprüngliche Objekt, weil es auf o1 abzielt)

var o1 = { X: 10 };
var o2 = { Y: 20 };
var o3 = { Z: 30 };
var merge = Object.assign(o1, o2, o3);
console.log(merge)  // {X:10, Y:20, Z:30}
console.log(o1)     // {X:10, Y:20, Z:30}

Richtige Wege

• Object.assign({}, o1, o2, o3) \==> neues Objekt anvisieren

• {...o1, ...o2, ...o3} \==> Streuobjekte

  var o1 = { X: 10 }; var o2 = { Y: 20 }; var o3 = { Z: 30 };

  console.log('Does not modify original objects because target {}'); var merge = Object.assign({}, o1, o2, o3); console.log(merge); // { X: 10, Y: 20, Z: 30 } console.log(o1)

  console.log('Does not modify original objects') var spreadMerge = {...o1, ...o2, ...o3}; console.log(spreadMerge); console.log(o1);