Ich muss in der Lage sein, zwei (sehr einfache) JavaScript-Objekte zur Laufzeit zusammenzuführen. Zum Beispiel möchte ich:
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
obj1.merge(obj2);
//obj1 now has three properties: food, car, and animal
Hat jemand ein Skript dafür oder kennt eine eingebaute Methode, um dies zu tun? Ich brauche keine Rekursion und ich muss keine Funktionen zusammenführen, sondern nur Methoden für flache Objekte.
javascript
javascript-objects
JC Grubbs
quelle
quelle
var obj2 = { animal: 'dog', food: 'bone' };
wäre, wäre die Zusammenführung{ food: 'bone', car: 'ford', animal: 'dog' }
. Wenn Sie mit "verschachtelten Daten" arbeiten und eine "Tiefenzusammenführung" wünschen, suchen Sie nach Antworten, die "Tiefenzusammenführung" oder "Rekursion" erwähnen. Wenn Sie Werte habenarrays
, verwenden Sie die Option "arrayMerge" von github "TehShrike / deepmerge", wie hier erwähnt .Antworten:
ECMAScript 2018 Standardmethode
Sie würden Objektverbreitung verwenden :
merged
ist jetzt die Vereinigung vonobj1
undobj2
. Eigenschaften inobj2
überschreiben die inobj1
.Hier finden Sie auch die MDN-Dokumentation für diese Syntax. Wenn Sie Babel verwenden, benötigen Sie das Babel-Plugin-Transform-Object-Rest-Spread- Plugin, damit es funktioniert.
ECMAScript 2015 (ES6) Standardmethode
(siehe MDN JavaScript-Referenz )
Methode für ES5 und früher
Beachten Sie, dass dadurch einfach alle Attribute hinzugefügt werden
obj2
,obj1
die möglicherweise nicht Ihren Wünschen entsprechen, wenn Sie die unveränderten weiterhin verwenden möchtenobj1
.Wenn Sie ein Framework verwenden, das Ihre Prototypen überfrachtet, müssen Sie mit Überprüfungen wie z. B. besser umgehen
hasOwnProperty
, aber dieser Code funktioniert in 99% der Fälle.Beispielfunktion:
quelle
var merged = {...obj1, ...obj2}
.{...obj1, ...{animal: 'dog'}}
jQuery hat auch ein Dienstprogramm dafür: http://api.jquery.com/jQuery.extend/ .
Entnommen aus der jQuery-Dokumentation:
Der obige Code mutiert das vorhandene Objekt mit dem Namen
settings
.Wenn Sie ein neues Objekt erstellen möchten, ohne eines der Argumente zu ändern, verwenden Sie Folgendes:
quelle
jQuery.extend(true,settings,override)
Dies ist wichtig, wenn eine Eigenschaft in Einstellungen ein Objekt enthält und das Überschreiben nur einen Teil dieses Objekts enthält. Anstatt die nicht übereinstimmenden Eigenschaften zu entfernen, wird die Tiefeneinstellung nur dort aktualisiert, wo sie vorhanden ist. Der Standardwert ist false.Das Harmony ECMAScript 2015 (ES6) legt fest
Object.assign
, wer dies tun wird.Die aktuelle Browserunterstützung wird immer besser . Wenn Sie jedoch für Browser entwickeln, die keine Unterstützung bieten, können Sie eine Polyfüllung verwenden .
quelle
Object.assign
hat ziemlich guteObject.assign({}, obj1, obj2)
Ich habe nach Code gegoogelt, um Objekteigenschaften zusammenzuführen, und bin hier gelandet. Da es jedoch keinen Code für die rekursive Zusammenführung gab, habe ich ihn selbst geschrieben. (Vielleicht ist jQuery Extend übrigens rekursiv?) Wie auch immer, hoffentlich findet es auch jemand anderes nützlich.
(Jetzt wird der Code nicht verwendet
Object.prototype
:)Code
Ein Beispiel
Erzeugt Objekt o3 wie
quelle
Beachten Sie, dass
underscore.js
dieextend
Methode dies in einem Einzeiler tut:quelle
_({}).extend(obj1, obj2);
_.defaults(object, *defaults)
möchten : "Füllen Sie null und undefinierte Eigenschaften in ein Objekt mit Werten aus den Standardobjekten aus und geben Sie das Objekt zurück."var mergedObj = _.extend({}, obj1, obj2)
.Ähnlich wie bei jQuery extens () haben Sie in AngularJS dieselbe Funktion :
quelle
Ich muss heute Objekte zusammenführen, und diese Frage (und Antworten) hat mir sehr geholfen. Ich habe einige der Antworten ausprobiert, aber keine davon entsprach meinen Anforderungen. Deshalb habe ich einige der Antworten kombiniert, selbst etwas hinzugefügt und eine neue Zusammenführungsfunktion entwickelt. Hier ist es:
Einige Anwendungsbeispiele:
quelle
merge({}, t1, { key1: 1 })
?Sie können Objektverbreitungseigenschaften verwenden - derzeit ein ECMAScript-Vorschlag der Stufe 3.
quelle
Die angegebenen Lösungen sollten geändert werden, um
source.hasOwnProperty(property)
diefor..in
Schleifen vor dem Zuweisen einzuchecken. Andernfalls kopieren Sie am Ende die Eigenschaften der gesamten Prototypenkette, was selten erwünscht ist ...quelle
Führen Sie die Eigenschaften von N Objekten in einer Codezeile zusammen
Eine
Object.assign
Methode ist Teil des ECMAScript 2015 (ES6) -Standards und macht genau das, was Sie brauchen. (IE
nicht unterstützt)Weiterlesen...
Die Polyfüllung zur Unterstützung älterer Browser:
quelle
Objects.assign
ein zusammengeführtes Objekt zurückgegeben wird, was die anderen Antworten nicht tun. Das ist mehr funktionaler Programmierstil.Die folgenden beiden sind wahrscheinlich ein guter Ausgangspunkt. lodash hat auch eine Anpassungsfunktion für diese besonderen Bedürfnisse!
_.extend
( http://underscorejs.org/#extend )_.merge
( https://lodash.com/docs#merge )quelle
Übrigens, was Sie alle tun, ist, Eigenschaften zu überschreiben, nicht zu verschmelzen ...
So wird der JavaScript-Objektbereich wirklich zusammengeführt: Nur Schlüssel im
to
Objekt, die selbst keine Objekte sind, werden von überschriebenfrom
. Alles andere wird wirklich zusammengeführt . Natürlich können Sie dieses Verhalten ändern, um nichts zu überschreiben, was nur existiert, wennto[n] is undefined
, etc ...:Verwendungszweck:
quelle
Hier ist mein Stich was
Ist kurz :)
Beispiel:
quelle
{}
als ersten Parameter übergeben oder die Funktion das ursprüngliche Objekt ändern lassen möchte . Wenn Sie alsodst = {}
zudst = arguments[0]
ihm wechseln , ändert sich das erste Objekt, das Sie an das zusammengeführte Objekt übergebentoString.call(src) == '[object Object]'
um zu überprüfen, ob es ein Objekt gibt oder nicht.typeof src
ist viel besser. Außerdem verwandelt es Arrays in Objekte (zumindest habe ich ein solches Verhalten bei neuestem Chrom).Object.assign ()
ECMAScript 2015 (ES6)
Dies ist eine neue Technologie, die Teil des ECMAScript 2015 (ES6) -Standards ist. Die Spezifikation dieser Technologie wurde fertiggestellt. Überprüfen Sie jedoch die Kompatibilitätstabelle auf Verwendung und Implementierungsstatus in verschiedenen Browsern.
Die Object.assign () -Methode wird verwendet, um die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt zu kopieren. Das Zielobjekt wird zurückgegeben.
quelle
Für nicht zu komplizierte Objekte können Sie JSON verwenden :
Beachten Sie jedoch, dass in diesem Beispiel "} {" nicht innerhalb einer Zeichenfolge vorkommen darf !
quelle
var so1 = JSON.stringify(obj1); var so2 = JSON.stringify(obj1); objMerge = so1.substr(0, so1.length-1)+","+so2.substr(1); console.info(objMerge);
function merge(obj1, obj2) { return JSON.parse((JSON.stringify(obj1) + JSON.stringify(obj2)) .replace(/\}\{/g, ',').replace(/,\}/g, '}').replace(/\{,/g, '{')); }
objMerge = JSON.parse((JSON.stringify(obj1) + JSON.stringify(obj2)).replace(/\}\{/, ", "));
Es gibt eine Bibliothek mit dem Namen
deepmerge
auf GitHub : Das scheint einige Traktion zu bekommen. Es ist ein eigenständiges Programm, das sowohl über den npm- als auch den bower-Paketmanager erhältlich ist.Ich wäre geneigt, dies zu verwenden oder zu verbessern, anstatt Code aus Antworten einzufügen.
quelle
Der beste Weg, dies zu tun, besteht darin, eine geeignete Eigenschaft hinzuzufügen, die mit Object.defineProperty nicht aufzählbar ist.
Auf diese Weise können Sie weiterhin über Ihre Objekteigenschaften iterieren, ohne die neu erstellte "Erweiterung" zu haben, die Sie erhalten würden, wenn Sie die Eigenschaft mit Object.prototype.extend erstellen würden.
Hoffentlich hilft das:
Sobald Sie das zum Laufen gebracht haben, können Sie Folgendes tun:
Ich habe gerade hier einen Blog-Beitrag darüber geschrieben: http://onemoredigit.com/post/1527191998/extending-objects-in-node-js
quelle
Sie können einfach jQuery verwenden
extend
obj1
Enthält jetzt alle Werte vonobj1
undobj2
quelle
jQuery.extend( target [, object1 ] [, objectN ] )
Prototyp hat dies:
obj1.extend(obj2)
wird tun was du willst.quelle
Object.prototype
und nichtObject
... Gute Idee oder nicht, dies ist, was dasprototype.js
Framework tut, und wenn Sie es verwenden oder ein anderes Framework, das davon abhängt,Object.prototype
wird es bereits erweitertextend
.Object.prototype
?Object.extend
wird Ihre Objekte nicht stören, sondern nur eine Funktion an einObject
Objekt anhängen. Undobj1.extend(obj2)
ist nicht der richtige Weg, um Funktion zu feuern, verwenden SieObject.extend(obj1, obj2)
insted** Das Zusammenführen von Objekten ist einfach mit
Object.assign
dem Spread-...
Operator **Die Objekte werden von rechts nach links zusammengeführt. Dies bedeutet, dass Objekte mit identischen Eigenschaften wie die Objekte auf der rechten Seite überschrieben werden.
In diesem Beispiel
obj2.car
überschreibtobj1.car
quelle
Nur wenn jemand die Google Closure Library verwendet :
Eine ähnliche Hilfsfunktion gibt es für das Array :
quelle
Ich habe die Methode von David Coallier erweitert:
Wenn override false ist, wird keine Eigenschaft überschrieben, es werden jedoch neue Eigenschaften hinzugefügt.
Verwendung: obj.merge (führt zusammen ... [, überschreiben]);
Hier ist mein Code:
Beispiele und Testfälle:
Meine Methode equals finden Sie hier: Objektvergleich in JavaScript
quelle
In MooTools gibt es Object.merge () :
quelle
In Ext JS 4 kann dies wie folgt durchgeführt werden:
Siehe Zusammenführen (Objekt): Objekt .
quelle
Wow .. dies ist der erste StackOverflow-Beitrag, den ich mit mehreren Seiten gesehen habe. Entschuldigung für das Hinzufügen einer weiteren "Antwort"
Diese Methode ist für ES5 und früher - es gibt viele andere Antworten für ES6.
Ich habe kein "tiefes" Objekt gesehen, das unter Verwendung der
arguments
Eigenschaft zusammengeführt wurde. Hier ist meine Antwort - kompakt und rekursiv , sodass unbegrenzte Objektargumente übergeben werden können:Der auskommentierte Teil ist optional. Es werden einfach übergebene Argumente übersprungen, die keine Objekte sind (um Fehler zu vermeiden).
Beispiel:
quelle
Verwenden von jQuery.extend () - Link
Verwenden von _.merge () - Link
Verwenden von _.extend () - Link
Verwenden von Object.assign () ECMAScript 2015 (ES6) - Link
Ausgabe von allen
quelle
Basierend auf der Antwort von Markus und vsync ist dies eine erweiterte Version. Die Funktion akzeptiert eine beliebige Anzahl von Argumenten. Es kann verwendet werden, um Eigenschaften für DOM festzulegen Knoten und tiefe Kopien von Werten zu . Das erste Argument wird jedoch durch Bezugnahme angegeben.
Um einen DOM-Knoten zu erkennen, wird die Funktion isDOMNode () verwendet (siehe Frage zum Stapelüberlauf JavaScript isDOM - Wie können Sie überprüfen, ob ein JavaScript-Objekt ein DOM-Objekt ist? )
Es wurde in Opera 11, Firefox 6, Internet Explorer 8 und Google Chrome 16 getestet .
Code
Einige Beispiele
Legen Sie innerHTML und den Stil eines HTML-Elements fest
Arrays und Objekte zusammenführen. Beachten Sie, dass undefined verwendet werden kann, um Werte im linken Array / Objekt beizubehalten.
Alle Argumente, die kein JavaScript-Objekt sind (einschließlich null), werden ignoriert. Mit Ausnahme des ersten Arguments werden auch DOM-Knoten verworfen. Beachten Sie, dass Zeichenfolgen, die wie neue Zeichenfolgen () erstellt wurden, tatsächlich Objekte sind.
Wenn Sie zwei Objekte zu einem neuen zusammenführen möchten (ohne eines der beiden zu beeinflussen), geben Sie {} als erstes Argument an
Bearbeiten (von ReaperSoon):
Arrays auch zusammenführen
quelle
quelle
Sie sollten lodash die Verwendung defaultsDeep
quelle
Führen Sie mit Underscore.js Folgendes aus , um ein Array von Objekten zusammenzuführen:
Es fuehrt zu:
quelle