Bagaimana cara menduplikasi properti objek di objek lain?

Diberikan objek:

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

bagaimana cara menyalin properti di dalam objek lain ( secondObject) seperti ini:

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

menggunakan referensi ke firstObject? Sesuatu seperti ini:

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

(Ini tidak berfungsi ... Saya hanya menunjukkan pada garis besar bagaimana saya ingin menyusun kode).

Apakah solusi mungkin tanpa menggunakan kerangka kerja JavaScript?

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

Mengambil petunjuk dari jawaban @ Bardzuśny di sini, ES6 telah memberikan solusi asli: Object.assign()fungsinya!

Penggunaannya sederhana:

Object.assign(secondObject, firstObject);

Itu dia!

Dukungan saat ini jelas buruk; hanya Firefox (34+) yang mendukungnya, sementara Chrome (45+) dan Opera (32+) membutuhkan 'flag eksperimental' yang harus ditetapkan.

Dukungan semakin membaik, dengan Chrome, Firefox, Opera, Safari, dan Edge versi terbaru mendukungnya (IE khususnya tidak memiliki dukungan.) Transpizer juga tersedia, seperti Babel dan Traceur. Lihat di sini untuk detail lebih lanjut.

Per ES6 - Sebarkan sintaks :

Anda cukup menggunakan:

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

Ini menghindari masalah melewatkan benda-benda ini dengan referensi.

Selain itu merawat benda-benda yang memiliki sarang yang dalam.

Ulangi properti dari objek pertama dan tetapkan ke objek kedua, seperti ini:

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

The for- inloop tidak cukup; kamu membutuhkan hasOwnProperty. Lihat http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop untuk penjelasan terperinci tentang alasannya.

Bermain necromancer di sini, karena ES5 membawa kita Object.keys(), dengan potensi untuk menyelamatkan kita dari semua .hasOwnProperty()cek ini .

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

Atau, membungkusnya dalam suatu fungsi ("salinan" terbatas dari 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()adalah metode yang relatif baru, terutama: tidak tersedia di IE <9. Hal yang sama juga berlaku untuk .forEach()metode array, yang saya gunakan di tempat biasafor loop .

Untungnya ada es5-shim tersedia untuk browser kuno ini, yang akan mengisi banyak fitur ES5 (termasuk keduanya).

(Saya mendukung polyfill dan tidak menggunakan fitur bahasa baru yang keren.)

Necro'ing sehingga orang-orang dapat menemukan metode penyalinan yang dalam dengan hasOwnProperty dan pemeriksaan objek aktual:

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

Satu dapat menggunakan Object.assign untuk menggabungkan objek. Ini akan menggabungkan dan menimpa properti umum dari kanan ke kiri yaitu, properti yang sama di sebelah kiri akan ditimpa oleh kanan.

Dan penting untuk memasok objek kosong terlebih dahulu untuk menghindari mutasi objek sumber. Objek sumber harus dibiarkan bersih karena Object.assign()dengan sendirinya mengembalikan objek baru.

Semoga ini membantu!

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

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

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

console.log(finalObject)

Peningkatan ide kingPuppy dan ide OP (salinan dangkal) - Saya hanya menambahkan 3 titik ke OP "contoh" :)

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

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

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

console.log(secondObject);

Ini harus bekerja, diuji di sini .

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

Catatan : ini tidak akan menyalin metode firstObject
Catatan 2 : untuk digunakan di browser yang lebih lama, Anda akan memerlukan json parser
Catatan 3 : menetapkan dengan referensi adalah opsi yang layak, terutama jika firstObjectberisi metode. Menyesuaikan contoh jsfiddle yang diberikan sesuai

Sayangnya, Anda tidak dapat menempatkan referensi ke variabel di objek seperti itu. Namun, Anda bisa membuat fungsi yang menyalin nilai objek ke objek lain.

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

Jika Anda ingin mengambil hanya properti yang ada di objek kedua, Anda bisa menggunakan Object.keysuntuk mengambil properti dari objek pertama, Anda bisa melakukan dua metode:

A.) map untuk menetapkan properti objek pertama ke objek kedua menggunakan efek samping:

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.) atau reduceuntuk membuat objek baru dan menetapkannya ke objek kedua. Ketahuilah bahwa metode ini menggantikan properti lain yang mungkin dimiliki objek kedua sebelum yang tidak cocok dengan objek pertama:

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

Gunakan notasi sebaran properti. Itu ditambahkan di ES2018 (spread untuk array / iterables sebelumnya, ES2015), {... firstObject} menyebar semua properti enumerable sebagai properti diskrit.

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

Saya lebih suka menggunakan firstObject sebagai prototipe dari secondObject, dan menambahkan deskriptor properti:

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

Ini tentu saja tidak satu-liner, tetapi memberi Anda lebih banyak kontrol. Jika Anda tertarik dengan deskriptor properti, saya sarankan untuk membaca artikel ini: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 dan halaman MDN https: //developer.mozilla. org / id-AS / docs / Web / JavaScript / Referensi / Global_Objects / Obyek / buat

Anda juga bisa hanya memberikan nilai dan menghilangkan deskriptor dan membuatnya sedikit lebih pendek:

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

Kompatibilitas: ECMAScript 5, jadi IE9 +

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

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

Menggunakan metode follwing akan menyalin properti

secondObject.copy(firstObject)

Saya sangat baru dalam javascript, tetapi ternyata ini berfungsi. Agak terlalu lama kurasa, tapi itu berhasil.