Manière Native de fusionner des objets en Javascript

La question du million de dollars! J'ai essayé de faire cela de nombreuses façons, et la manière de boucle décrite ci-dessus semblait toujours la plus sale. ES6 Object.setPrototypeOf() vous permet de déléguer un objet "propriété override" à un objet "Propriétés par défaut", accomplissant à peu près ce que vous essayez de faire, mais l'utilisation de Object.setPrototypeOf() a des implications sérieuses, comme désactiver les optimisations du compilateur du navigateur pour l'ensemble du script.

En outre, dans la solution de boucle et la solution Object.setPrototypeOf(), il vous reste un situation où l'objet "property override" peut muter l'objet" default properties":

defaultObj = {
    a: [1, 2]
}
...
overrideObj = {
    b: 3
}
Object.setPrototypeOf(overrideObj, defaultObj);
console.log(overrideObj); // {a: [1, 2], b: 3}
// Great!
...
overrideObj.a.push(4);
console.log(defaultObj); // {a: [1, 2, 4]}
// Uh-oh.

Vous pourriez penser que ce n'est pas un problème, mais disons que vous utilisez cet objet comme configuration pour une lib tierce partie. Vous remettez maintenant le contrôle de votre objet par défaut et de tout ce qui y est référencé à la 3rd party lib.

Une meilleure solution pourrait être d'utiliser JSON.stringify et JSON.analyser pour copier et combiner les objets. Voici un essentiel avec le exemple: https://gist.github.com/spikesagal/6f7822466887f19b9c65

HTH

Pas que je sache, non. En outre, vous voudrez écrire votre méthode de fusion comme ceci:

function mergeInto(o1, o2) {
  if (o1 == null || o2 == null)
    return o1;

  for (var key in o2)
    if (o2.hasOwnProperty(key))
      o1[key] = o2[key];

  return o1;
}

En utilisant ES6 (ES2015), vous pouvez utiliser objet.attribuez Méthode:

var x = {a:1, b:2};
var y = {c:3, d:4};
var z = Object.assign({},x,y);

En utilisant ES7 (ES2016, Chrome 60+ ou Babel) vous pouvez utiliser opérateur de propagation D'objet :

var x = {a:1, b:2};
var y = {c:3, d:4}; 
var z = {...x, ...y};

Vous pouvez faire ce qui suit en utilisant JS 1.7 natif, sans avoir besoin d'un framework. Voir l'exemple sur fiddle (Exemple uniquement destiné aux objets simples - pas aux objets imbriqués complexes)

var obj1 = {a: "a", b: "b"};
var obj2 = {c: "c", d: "d"};

// The magic: ugly but works perfectly
var value = (JSON.stringify(obj1).concat(JSON.stringify(obj2))).replace("}{", ",");

document.getElementById("lbl1").setAttribute("value", value);

// back to object
var obj3 = JSON.parse(value);
document.getElementById("lbl2").setAttribute("value", obj3.a + " " + obj3.b + " " + obj3.c + " " + obj3.d);

Pas de moyens natifs dans ECMA-Script, utilisez:

function merge(o1,o2) {
 if (typeof(o1)!=='object') o1={};
 if (typeof(o2)!=='object') o2={};
 for (var k in o2) {
 if (o1[k]!==undefined)
  alert ('Collision Error'); // TODO
 else
   o1[k]=o2[k];
 }
 return o1;
}

Ci-dessous, j'ai inclus une fonction de fusion profonde que j'ai écrite. Il ne fusionnera pas en profondeur les tableaux, seulement les objets. Il faudra deux objets et retournera un troisième nouvel objet.

var merge = function(o1, o2) {
    var o_new = {};
    for(p in o1) {
        if(o1[p]) {
            if(typeof o1[p] == 'object' && !(o1[p] instanceof Array) && o2.hasOwnProperty(p)) {
                o_new[p] = merge(o1[p], o2[p]);
            }
            else {
                o_new[p] = o1[p];
            }
        }
    }
    for(p in o2) {
        if(typeof o2[p] == 'object' && !(o2[p] instanceof Array) && o1.hasOwnProperty(p)) {
            o_new[p] = merge(o1[p], o2[p]);
        }
        else {
            o_new[p] = o2[p];
        }
    }
    return o_new;
}