Come duplicare le proprietà dell'oggetto in un altro oggetto?

Dato l'oggetto:

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

come posso copiare le proprietà all'interno di un altro oggetto ( secondObject) in questo modo:

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

usando un riferimento a firstObject? Qualcosa come questo:

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

(questo non funziona ... lo metto solo per mostrare a grandi linee come vorrei strutturare il codice).

È possibile una soluzione senza utilizzare alcun framework JavaScript?

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

Prendendo spunto dalla risposta di @ Bardzuśny qui, ES6 ha fornito una soluzione nativa: la Object.assign()funzione!

L'uso è semplice:

Object.assign(secondObject, firstObject);

Questo è tutto!

Il supporto in questo momento è ovviamente scarso; solo Firefox (34+) lo supporta immediatamente, mentre Chrome (45+) e Opera (32+) richiedono l'impostazione del "flag sperimentale".

Il supporto sta migliorando, con le ultime versioni di Chrome, Firefox, Opera, Safari e Edge che lo supportano (IE in particolare non ha supporto.) Sono disponibili anche Transpiler, come Babel e Traceur. Vedi qui per maggiori dettagli.

Per ES6 - Sintassi diffusa :

Puoi semplicemente usare:

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

Questo evita problemi di passaggio di questi oggetti per riferimento.

Inoltre si prende cura degli oggetti che hanno un annidamento profondo.

Scorri le proprietà del primo oggetto e assegnale al secondo oggetto, in questo modo:

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

Il ciclo for- innon è abbastanza; hai bisogno hasOwnProperty. Vedi http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop per una spiegazione dettagliata del perché.

Suonando il negromante qui, perché ES5 ci ha portato Object.keys(), con il potenziale per salvarci da tutti questi .hasOwnProperty()controlli.

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

Oppure, avvolgendolo in una funzione ("copia" limitata di 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()è un metodo relativamente nuovo, in particolare: non disponibile in IE <9. Lo stesso vale per il .forEach()metodo array, che ho usato al posto del normale forciclo.

Fortunatamente, es5-shim è disponibile per questi antichi browser, che riempiono polifunzionalmente molte funzionalità ES5 (comprese quelle due).

(Sono tutto per polifillamenti invece di trattenermi dall'usare nuove funzioni linguistiche interessanti.)

Necro'ing in modo che le persone possano trovare un metodo di copia approfondita con hasOwnProperty e controllo dell'oggetto reale:

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

Si può usare Object.assign per combinare oggetti. Combinerà e sovrascriverà la proprietà comune da destra a sinistra, ovvero la stessa proprietà a sinistra verrà ignorata da destra.

E questo è importante fornire un oggetto vuoto nel primo per evitare di mutare gli oggetti sorgente. Gli oggetti di origine devono essere lasciati puliti poiché Object.assign()da soli restituisce un nuovo oggetto.

Spero che questo ti aiuti!

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

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

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

console.log(finalObject)

Miglioramento dell'idea kingPuppy e dell'idea OP (copia superficiale) - Aggiungo solo 3 punti all'OP "esempio" :)

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

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

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

console.log(secondObject);

Dovrebbe funzionare, testato qui .

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

Nota : questo non copierà i metodi della firstObject
Nota 2 : per l'uso nei browser più vecchi, avrai bisogno di un parser json
Nota 3 : l'assegnazione per riferimento è un'opzione praticabile, specialmente se firstObjectcontiene metodi. Modificato di conseguenza l'esempio jsfiddle indicato

Sfortunatamente, non è possibile inserire un riferimento a una variabile in un oggetto del genere. Tuttavia, è possibile creare una funzione che copia i valori dell'oggetto in un altro oggetto.

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 );

Se si desidera afferrare solo le proprietà esistenti nel secondo oggetto, è possibile utilizzare Object.keysper afferrare le proprietà del primo oggetto, è possibile eseguire due metodi:

A.) map per assegnare le proprietà del primo oggetto al secondo oggetto usando gli effetti collaterali:

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.) o reduceper creare un nuovo oggetto e assegnarlo al secondo oggetto. Tenere presente che questo metodo sostituisce altre proprietà che il secondo oggetto potrebbe avere prima di quello che non corrispondeva al primo oggetto:

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;
}, {});

Utilizzare la notazione di diffusione della proprietà. È stato aggiunto in ES2018 (lo spread per array / iterables era precedente, ES2015), {... firstObject} distribuisce tutte le proprietà enumerabili come proprietà discrete.

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

Preferirei usare firstObject come prototipo di secondObject e aggiungere un descrittore di proprietà:

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

Non è certo una linea, ma ti dà più controllo. Se sei interessato ai descrittori di proprietà, ti suggerisco di leggere questo articolo: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 e la pagina MDN https: //developer.mozilla. org / it-IT / docs / Web / JavaScript / Reference / Global_Objects / oggetto / creare

Puoi anche semplicemente assegnare valori e omettere i descrittori e renderlo un po 'più breve:

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

Compatibilità: ECMAScript 5, quindi 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'uso del metodo follwing copierà le proprietà

secondObject.copy(firstObject)

Sono molto nuovo su JavaScript, ma ho trovato che funziona. Un po 'troppo a lungo credo, ma funziona.