Comment dupliquer les propriétés d'un objet dans un autre objet?

Compte tenu de l'objet:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

comment puis-je copier les propriétés dans un autre objet ( secondObject) comme ceci:

var secondObject = {
    key1 : 'value1',
    key2 : 'value2',
    key3 : 'value3',
    key4 : 'value4'
};

en utilisant une référence au firstObject? Quelque chose comme ça:

var secondObject = {
    firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

(cela ne fonctionne pas ... je l'ai mis juste pour montrer en grandes lignes comment je voudrais structurer le code).

Une solution est-elle possible sans utiliser de frameworks JavaScript?

for(var k in firstObject) secondObject[k]=firstObject[k];

S'inspirant de la réponse de @ Bardzuśny ici, ES6 a fourni une solution native: le Object.assign() fonction!

L'utilisation est simple:

Object.assign(secondObject, firstObject);

C'est tout!

Le soutien actuel est manifestement médiocre; seul Firefox (34+) le prend en charge par défaut, tandis que Chrome (45+) et Opera (32+) nécessitent que le «drapeau expérimental» soit défini.

Le support s'améliore, avec les dernières versions de Chrome, Firefox, Opera, Safari et Edge le prenant en charge (IE n'a notamment pas de support.) Des transpilers sont également disponibles, comme Babel et Traceur. Voir ici pour plus de détails.

Par ES6 - Syntaxe de propagation :

Vous pouvez simplement utiliser:

const thirdObject = {
   ...firstObject,
   ...secondObject   
}

Cela évite les problèmes de passage de ces objets par référence.

De plus, il prend en charge les objets qui ont une imbrication profonde.

Parcourez les propriétés du premier objet et attribuez-les au deuxième objet, comme ceci:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

for (var prop in firstObject) {
    if (firstObject.hasOwnProperty(prop)) {
        secondObject[prop] = firstObject[prop];
    }
}

La boucle for- inne suffit pas; vous avez besoin hasOwnProperty. Voir http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop pour une explication détaillée de la raison.

Jouer le nécromancien ici, car ES5 nous a amenés Object.keys(), avec le potentiel de nous sauver de tous ces .hasOwnProperty()contrôles.

Object.keys(firstObject).forEach(function(key) {
  secondObject[key] = firstObject[key];
});

Ou, en l'enveloppant dans une fonction ("copie" limitée de lodash _.assign()):

function assign(object, source) {
  Object.keys(source).forEach(function(key) {
    object[key] = source[key];
  });
}

assign(secondObject, firstObject); // assign firstObject properties to secondObject

Object.keys()est une méthode relativement nouvelle, notamment: non disponible dans IE <9. Il en va de même pour la .forEach()méthode array, que j'ai utilisée à la place defor boucle .

Heureusement, il y a es5-shim disponible pour ces anciens navigateurs, qui polyfill de nombreuses fonctionnalités ES5 (y compris ces deux).

(Je suis tout à fait pour les polyfills plutôt que de ne pas utiliser de nouvelles fonctionnalités de langage sympas.)

Necro'ing pour que les gens puissent trouver une méthode de copie profonde avec hasOwnProperty et une vérification d'objet réelle:

var extend = function (original, context, key) {
  for (key in context)
    if (context.hasOwnProperty(key))
      if (Object.prototype.toString.call(context[key]) === '[object Object]')
        original[key] = extend(original[key] || {}, context[key]);
      else
        original[key] = context[key];
  return original;
};

On peut utiliser Object.assign pour combiner des objets. Il combinera et remplacera la propriété commune de droite à gauche, c'est-à-dire que la même propriété à gauche sera remplacée par right.

Et il est important de fournir un objet vide dans le premier pour éviter de muter les objets source. Les objets source doivent être laissés propres carObject.assign() par lui-même renvoie un nouvel objet.

J'espère que cela t'aides!

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

var finalObject = Object.assign({}, firstObject, secondObject)

console.log(finalObject)

Amélioration de l' idée de kingPuppy et de l'idée OP (copie superficielle) - Je n'ajoute que 3 points à OP "exemple" :)

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

console.log(secondObject);

Cela devrait fonctionner, testé ici .

var secondObject = {
    firstObject: JSON.parse(JSON.stringify(firstObject)),
    key3 : 'value3',
    key4 : 'value4'
};

Remarque : cela ne copiera pas les méthodes de la firstObject
note 2 : pour une utilisation dans les navigateurs plus anciens, vous aurez besoin d'un analyseur json.
Remarque 3 : l'assignation par référence est une option viable, surtout si elle firstObjectcontient des méthodes. Ajustement de l'exemple jsfiddle donné en conséquence

Malheureusement, vous ne pouvez pas mettre une référence à une variable dans un objet comme celui-là. Cependant, vous pouvez créer une fonction qui copie les valeurs de l'objet dans un autre objet.

function extend( obj1, obj2 ) {
    for ( var i in obj2 ) {
        obj1[i] = obj2[i];
    }
    return obj1;
}

var firstObject = {
    key1: "value1",
    key2: "value2"
};

var secondObject = extend({
    key3: "value3",
    key4: "value4"
}, firstObject );

Si vous souhaitez récupérer uniquement les propriétés qui existent dans le deuxième objet, vous pouvez utiliser Object.keyspour récupérer les propriétés du premier objet, vous pouvez utiliser deux méthodes:

A.) map pour attribuer les propriétés du premier objet au deuxième objet à l'aide d'effets secondaires:

var a = {a:100, b:9000, c:300};
var b = {b:-1};

Object.keys(a).map(function(key, index) {
    if (typeof b[key] !== 'undefined') {
        console.log(key);
        b[key] = a[key];    
    }
});

B.) ou reducepour créer un nouvel objet et l'affecter au deuxième objet. Sachez que cette méthode remplace les autres propriétés que le deuxième objet pourrait avoir avant celles qui ne correspondaient pas au premier objet:

var a = {a:100, b:9000, c:300};
var b = {b:-1, d:-1}; // d will be gone

b = Object.keys(a).reduce(function(result, current) {
    if (typeof b[current] !== 'undefined') {
        result[current] = a[current];   
    }
    return result;
}, {});

Utilisez la notation de propagation de propriété. Il a été ajouté dans ES2018 (la propagation pour les tableaux / itérables était antérieure, ES2015), {... firstObject} répartit toutes les propriétés énumérables en tant que propriétés discrètes.

let secondObject = {
      ...firstObject,
      key3 : 'value3',
      key4 : 'value4'
    }

Je préférerais utiliser firstObject comme prototype de secondObject et ajouter un descripteur de propriété:

var secondObject = Object.create(firstObject, {
      key3: {value: "value3", writable: true, configurable: true, enumerable: true},
      key4: {value: "value4", writable: true, configurable: true, enumerable: true}
      });

Ce n'est certainement pas une seule ligne, mais cela vous donne plus de contrôle. Si vous êtes intéressé par les descripteurs de propriétés, je vous suggère de lire cet article: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 et page MDN https: //developer.mozilla. org / en-US / docs / Web / JavaScript / Reference / Global_Objects / Object / create

Vous pouvez également simplement attribuer des valeurs et omettre les descripteurs et les raccourcir un peu:

var secondObject = Object.create(firstObject, {
      key3: {value: "value3"}
      key4: {value: "value4"}
  });

Compatibilité: ECMAScript 5, donc IE9 +

var firstObject = {
     key1: "value1",
     key2: "value2"
};

var secondObject = {
     key3: "value3",
     key4: "value4"
     copy: function(firstObject){
           this.key1 = firstObject.key1;
           this.key2 = firstObject.key2;
     }
 };

L'utilisation de la méthode suivante copiera les propriétés

secondObject.copy(firstObject)

Je suis très nouveau en javascript, mais j'ai trouvé que cela fonctionnait. Un peu trop longtemps je suppose, mais ça marche.