Comment fusionner deux objets javascript ensemble en ES6+ ?

Question

Je suis malade et fatigué de toujours devoir écrire du code comme ça :

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

Ou si je ne veux pas écrire le code moi-même, mettre en œuvre une bibliothèque qui le fait déjà. ES6+ va sûrement venir à la rescousse et nous fournira quelque chose comme une Object.prototype.extend(obj2...) o Object.extend(obj1,obj2...)

L'ES6+ offre-t-il cette fonctionnalité ? Si elle n'existe pas déjà, cette fonctionnalité est-elle prévue ? Si elle n'est pas prévue, pourquoi ?

Answer 1

Vous pourrez effectuer une fusion/extension/assignation superficielle dans ES6 en utilisant Object.assign :

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

Syntaxe :

Object.assign( cible , sources ) ;

où ...sources représente le(s) objet(s) source(s).

Exemple :

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

Object.assign(obj1, obj2);

console.log(obj1.name === 'Casey' && obj1.age === 30);
// true

Answer 2

Vous pouvez utiliser le syntaxe d'étalement des objets pour cela :

const merged = {...obj1, ...obj2}

Pour les tableaux, l'opérateur de propagation faisait déjà partie de l'ES6 (ES2015), mais pour les objets, il a été ajouté à la spécification du langage lors de l'ES9 (ES2018). Sa proposition a été activée par défaut dans des outils comme Babel bien avant cela.

Answer 3

Je sais qu'il s'agit d'un vieux problème, mais la solution la plus simple dans ES2015/ES6 est en fait très simple : il s'agit d'utiliser Object.assign(),

J'espère que cela vous aidera, c'est le cas DEEP fusionner également :

/**
 * 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;
}

Exemple d'utilisation :

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] } } }

Answer 4

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 ou Babel

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

Answer 5

L'ajout de Object.mixin est actuellement en cours de discussion pour prendre en charge le comportement que vous demandez. https://mail.mozilla.org/pipermail/es-discuss/2012-December/027037.html

Bien qu'il ne figure pas encore dans la version préliminaire de l'ES6, il semble qu'il bénéficie d'un grand soutien, et je pense donc qu'il apparaîtra bientôt dans les versions préliminaires.