Wie führe ich zwei javascript-Objekte zusammen in ES6+?

Ich bin krank und müde von immer mit, schreiben Sie code wie diesen:

function shallowExtend(obj1,obj2){
  var key;
  for ( key in obj2 ) {
    if ( obj2.hasOwnProperty(key) === false )  continue;
    obj1[key] = obj2[key]
  }
}

Oder wenn ich nicht, Sie schreiben den code selbst implementieren, eine Bibliothek, die tut es schon. Sicherlich ES6+ kommt zur Rettung, wird uns so etwas wie ein Object.prototype.extend(obj2...) oder Object.extend(obj1,obj2...)

Tut So ES6+ bietet eine solche Funktionalität? Wenn nicht bereits vorhanden, dann ist eine solche Funktionalität geplant? Wenn nicht geplant ist, warum dann nicht?

Also, warum haben Sie nicht Hinzugefügt Ihr - Bibliothek?
diese Frage ist über die Hoffnung, dass ES6 entfernen uns vom müssen müssen solche vorformulierten Mist in den ersten Platz.Für was es Wert ist: github.com/balupton/bal-util/blob/...
Ich glaube nicht, dass es einen Allgemeinen Weg, um kopieren Sie die name/Wert-Paare von einem Objekt zum anderen. Tun Sie nur mit eigenen Eigenschaften oder diejenigen, die [[Prototype]] Kette? Tun Sie, "tief" oder "flach" - Kopien? Was ist mit nicht–zählbare und nicht–beschreibbaren Eigenschaften? Ich glaube, ich hätte lieber eine kleine Bibliothek-Funktion, die tut, was ich brauche, und meistens ist es vermeidbar sowieso.

InformationsquelleAutor balupton | 2012-12-13

ecmascript-6 javascript

197

Werden Sie in der Lage zu tun, eine seichte verbinden/verlängern/vergeben in ES6 mit dem Objekt.zuweisen:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Syntax:

Objekt.assign(Ziel, Quellen);

wo ...Quellen stellt die Quelle Objekt(E).

Beispiel:
```
var obj1 = {name: 'Daisy', age: 30};
var obj2 = {name: 'Casey'};

Object.assign(obj1, obj2);

console.log(obj1.name === 'Casey' && obj1.age === 30);
//true
```
- Eine kleine Anmerkung: Objekt.weisen mutiert das Ziel. Wenn das ist nicht, was Sie wollen, Sie können es nennen, mit einem leeren Objekt: let merged = Object.assign({}, source1, source2);
- Bitte beachten Sie, dies ist eine flache verlängern... verschachtelte Objekte NICHT zusammengeführt werden,
- gibt es da nicht eine option auf Verlängerung verschachtelte Objekte, ohne Verwendung von lodash oder mout?
- Es ist die gute Art und Weise zu verschmelzen tief verschachtelte Objekte ohne eine Bibliothek mit nur Object.assign: siehe meine Antwort hier
- Eine alte Art und Weise zu erweitern verschachtelte Objekte ist mit JSON.parse(JSON.stringify(src))
InformationsquelleAutor Jack
143

Können Sie die Objekt verbreiten-syntax für diese:
```
const merged = {...obj1, ...obj2}
```
Für arrays ist der spread-operator wurde bereits in ES6 (ES2015), aber für Objekte, die Hinzugefügt wurde, um die Sprache spec auf ES9 (ES2018). Sein Vorschlag wurde standardmäßig aktiviert, tools wie "Babel", die lange vor.
- Das ist nicht ES6.
- Nein, offiziell heißt es ES2015 jetzt 😛 Seit Wann ist destructuring nicht Teil des ES6? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... Ausgeführt babel-Knoten: const ob1 = {foo: 123}; const ob2 = {bar: 234}; const merged = {...ob1, ...ob2}; console.log(merged) Ausgabe: { foo: 123, bar: 234 }
- Das ist nicht destructuring, Sie breitet sich - und Nein, für Objekte, die nicht Teil des ES6. Sollten Sie deaktivieren experimentellen ES7 Entwürfe in Ihr babel.
- Ach, vergib mir. Du hast Recht. Es ist ein babel Phase 2 Funktion im moment. github.com/sebmarkbage/ecmascript-rest-spread ich habe nie realisiert, weil ich nutze es von Anfang an mit "babel" und es ist standardmäßig aktiviert. Aber da müssen Sie transpile sowieso, und das Objekt spread ist eine ziemlich einfache Sache, die ich würde empfehlen, es auf jeden Fall. Ich Liebe es.
- Sie sind standardmäßig aktiviert, richtig? Das klingt wie ein bug.
- "Vorschläge, die Stufe 2 oder höher standardmäßig aktiviert sind". babeljs.io/docs/Verwendung/experimentell
- Diese JS-Funktion kann aktiviert werden individuell in babel mit "plugins: ["transform-Objekt-rest-spread'] "
InformationsquelleAutor Thijs Koerselman

Ich weiß, das ist ein bisschen ein altes Thema, aber die einfachste Lösung in ES2015/ES6 ist eigentlich ganz einfach, mit dem Objekt.assign(),

Ich hoffe, dies hilft, dies gilt TIEF Zusammenführen sowie:

/**
 * Simple is object check.
 * @param item
 * @returns {boolean}
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
}

/**
 * Deep merge two objects.
 * @param target
 * @param source
 */
export function mergeDeep(target, source) {
  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return target;
}

Beispiel:

mergeDeep(this, { a: { b: { c: 123 } } });
//or
const merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});  
console.dir(merged); //{ a: 1, b: { c: { d: [Object] } } }

InformationsquelleAutor Salakar

7

Den Zusatz von Object.mixin wird derzeit diskutiert, kümmern sich um das Verhalten, das Sie bittet. https://mail.mozilla.org/pipermail/es-discuss/2012-December/027037.html

Obwohl es nicht in der ES6 draft noch, wie es scheint, gibt es eine Menge Unterstützung, so dass ich denke, es wird zeigen, bis in die Entwürfe bald.
- .mixin heruntergefallen von TC39.
- Warning - diese Antwort ist nicht mehr korrekt, siehe die Antwort von Jack, die für eine korrekte und funktionierende Ansatz.
- Objekt.mixin wurde ersetzt durch das Objekt.zuweisen
InformationsquelleAutor Nathan Wall

ES6

Object.assign(o1,o2) ; 
Object.assign({},o1,o2) ; //safe inheritance
var copy=Object.assign({},o1); //clone o1
//------Transform array of objects to one object---
var subjects_assess=[{maths:92},{phy:75},{sport:99}];
Object.assign(...subjects_assess); //{maths:92,phy:75,sport:99}

ES7 oder Babel

{...o1,...o2} //inheritance
 var copy= {...o1};

Es ist nicht Zusammenführen. stackoverflow.com/a/24610079/2047418
das ist nicht ES6, dass Sie verlinkt wird. Aber es ist im Grunde tun das äquivalent zu _.verlängern() in lodash/Unterstrich.

InformationsquelleAutor Abdennour TOUMI

5

Vielleicht ES5 - Objekt.defineProperties Methode wird die Arbeit machen?

z.B.
```
var a = {name:'fred'};
var b = {age: {value: 37, writeable: true}};

Object.defineProperties(a, b);

alert(a.age); //37
```
MDN-Dokumentation: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperties
- Seien Sie vorsichtig, aber. Auf mindestens ein browser dies hat Auswirkungen auf die Leistung.
- Ich denke, der interessanteste Teil ist, dass defineProperties eigenen Eigenschaften definiert. Es nicht überschreiben die Eigenschaften auf der [[prototype]] Kette Schatten Sie.
- Guter Vorschlag, aber auch nicht wirklich eine Erweiterung, denn es ist eher für die Definition, wie Eigenschaften Verhalten soll... Dabei eine einfache Objekt.defineProperties(obj1,obj2) würde zu unerwarteten Ergebnissen führen.
- verwenden würde Object.getOwnPropertyDescriptor auch um die Eigenschaft, wenn es ist ein komplexer Wert, oder Sie kopieren Sie genommen wird.
InformationsquelleAutor RobG

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.