In der Lodash Bibliothek zur Verfügung stellen kann jemand eine bessere Erklärung der Zusammenführung und ausfahren / assign .

Es ist eine einfache Frage, aber die Antwort entgeht mir trotzdem.

Hier ist , wie extend/ assignWerke: Für jede Eigenschaft in Quelle, kopieren Sie den Wert zum Ziel , wie sie ist. Wenn Eigenschaftswerte selbst Objekte sind, erfolgt keine rekursive Durchquerung ihrer Eigenschaften. Das gesamte Objekt wird aus der Quelle entnommen und auf das Ziel gesetzt.

So mergefunktioniert es: Überprüfen Sie für jede Eigenschaft in der Quelle, ob diese Eigenschaft selbst ein Objekt ist. Wenn dies der Fall ist, gehen Sie rekursiv nach unten und versuchen Sie, untergeordnete Objekteigenschaften von der Quelle zum Ziel zuzuordnen. Im Wesentlichen führen wir die Objekthierarchie von der Quelle zum Ziel zusammen. Während für extend/ assignist es eine einfache einstufige Kopie der Eigenschaften von der Quelle zum Ziel.

Hier ist eine einfache JSBin, die dies kristallklar macht: http://jsbin.com/uXaqIMa/2/edit?js,console

Hier ist eine ausführlichere Version, die auch das Array im Beispiel enthält: http://jsbin.com/uXaqIMa/1/edit?js,console

Lodash Version 3.10.1

Methoden verglichen

• _.merge(object, [sources], [customizer], [thisArg])
• _.assign(object, [sources], [customizer], [thisArg])
• _.extend(object, [sources], [customizer], [thisArg])
• _.defaults(object, [sources])
• _.defaultsDeep(object, [sources])

Ähnlichkeiten

• Keiner von ihnen arbeitet erwartungsgemäß mit Arrays
• _.extendist ein Alias ​​für _.assign, also sind sie identisch
• Alle scheinen das Zielobjekt zu modifizieren (erstes Argument)
• Alle von ihnen behandeln nulldas gleiche

Unterschiede

• _.defaultsund _.defaultsDeepverarbeitet die Argumente in umgekehrter Reihenfolge im Vergleich zu den anderen (obwohl das erste Argument immer noch das Zielobjekt ist)
• _.mergeund _.defaultsDeepwerden untergeordnete Objekte zusammenführen und die anderen werden auf der Stammebene überschrieben
• Nur _.assignund _.extendüberschreibt einen Wert mitundefined

Tests

Sie alle behandeln Mitglieder an der Wurzel auf ähnliche Weise.

_.assign      ({}, { a: 'a' }, { a: 'bb' }) // => { a: "bb" }
_.merge       ({}, { a: 'a' }, { a: 'bb' }) // => { a: "bb" }
_.defaults    ({}, { a: 'a' }, { a: 'bb' }) // => { a: "a"  }
_.defaultsDeep({}, { a: 'a' }, { a: 'bb' }) // => { a: "a"  }

_.assignGriffe, undefinedaber die anderen werden es überspringen

_.assign      ({}, { a: 'a'  }, { a: undefined }) // => { a: undefined }
_.merge       ({}, { a: 'a'  }, { a: undefined }) // => { a: "a" }
_.defaults    ({}, { a: undefined }, { a: 'bb' }) // => { a: "bb" }
_.defaultsDeep({}, { a: undefined }, { a: 'bb' }) // => { a: "bb" }

Sie alle behandeln nulldas gleiche

_.assign      ({}, { a: 'a'  }, { a: null }) // => { a: null }
_.merge       ({}, { a: 'a'  }, { a: null }) // => { a: null }
_.defaults    ({}, { a: null }, { a: 'bb' }) // => { a: null }
_.defaultsDeep({}, { a: null }, { a: 'bb' }) // => { a: null }

Aber nur _.mergeund _.defaultsDeepuntergeordnete Objekte zusammenführen

_.assign      ({}, {a:{a:'a'}}, {a:{b:'bb'}}) // => { "a": { "b": "bb" }}
_.merge       ({}, {a:{a:'a'}}, {a:{b:'bb'}}) // => { "a": { "a": "a", "b": "bb" }}
_.defaults    ({}, {a:{a:'a'}}, {a:{b:'bb'}}) // => { "a": { "a": "a" }}
_.defaultsDeep({}, {a:{a:'a'}}, {a:{b:'bb'}}) // => { "a": { "a": "a", "b": "bb" }}

Und keiner von ihnen wird Arrays zusammenführen, wie es scheint

_.assign      ({}, {a:['a']}, {a:['bb']}) // => { "a": [ "bb" ] }
_.merge       ({}, {a:['a']}, {a:['bb']}) // => { "a": [ "bb" ] }
_.defaults    ({}, {a:['a']}, {a:['bb']}) // => { "a": [ "a"  ] }
_.defaultsDeep({}, {a:['a']}, {a:['bb']}) // => { "a": [ "a"  ] }

Alle ändern das Zielobjekt

a={a:'a'}; _.assign      (a, {b:'bb'}); // a => { a: "a", b: "bb" }
a={a:'a'}; _.merge       (a, {b:'bb'}); // a => { a: "a", b: "bb" }
a={a:'a'}; _.defaults    (a, {b:'bb'}); // a => { a: "a", b: "bb" }
a={a:'a'}; _.defaultsDeep(a, {b:'bb'}); // a => { a: "a", b: "bb" }

Keiner funktioniert wirklich wie erwartet auf Arrays

Hinweis: Wie @Mistic hervorhob, behandelt Lodash Arrays als Objekte, bei denen die Schlüssel der Index für das Array sind.

_.assign      ([], ['a'], ['bb']) // => [ "bb" ]
_.merge       ([], ['a'], ['bb']) // => [ "bb" ]
_.defaults    ([], ['a'], ['bb']) // => [ "a"  ]
_.defaultsDeep([], ['a'], ['bb']) // => [ "a"  ]

_.assign      ([], ['a','b'], ['bb']) // => [ "bb", "b" ]
_.merge       ([], ['a','b'], ['bb']) // => [ "bb", "b" ]
_.defaults    ([], ['a','b'], ['bb']) // => [ "a", "b"  ]
_.defaultsDeep([], ['a','b'], ['bb']) // => [ "a", "b"  ]

Ein weiterer zu beachtender Unterschied ist der Umgang mit undefinedWerten:

mergeInto = { a: 1}
toMerge = {a : undefined, b:undefined}
lodash.extend({}, mergeInto, toMerge) // => {a: undefined, b:undefined}
lodash.merge({}, mergeInto, toMerge)  // => {a: 1, b:undefined}

Es mergewerden also keine undefinedWerte zu definierten Werten zusammengeführt.

Es kann auch hilfreich sein, zu überlegen, was sie aus semantischer Sicht tun:

_.zuordnen

   will assign the values of the properties of its second parameter and so on,
   as properties with the same name of the first parameter. (shallow copy & override)

_.verschmelzen

   merge is like assign but does not assign objects but replicates them instead.
  (deep copy)

_.defaults

   provides default values for missing values.
   so will assign only values for keys that do not exist yet in the source.

_.defaultsDeep

   works like _defaults but like merge will not simply copy objects
   and will use recursion instead.

Ich glaube, wenn Sie lernen, diese Methoden aus semantischer Sicht zu betrachten, können Sie besser erraten, wie sich die verschiedenen Szenarien bestehender und nicht existierender Werte verhalten.

Wenn Sie eine tiefe Kopie ohne Überschreiben wünschen, während Sie dieselbe objReferenz beibehalten

obj = _.assign(obj, _.merge(obj, [source]))