Katakanlah saya punya options variabel dan saya ingin menetapkan beberapa nilai default.

Apa manfaat / kelemahan dari dua alternatif ini?

Menggunakan objek menyebar

options = {...optionsDefault, ...options};

Atau menggunakan Object.assign

options = Object.assign({}, optionsDefault, options);

Ini adalah komitmen yang membuat saya bertanya-tanya.

Ini belum tentu lengkap.

Sebarkan sintaks

options = {...optionsDefault, ...options};

Keuntungan:

• Jika membuat kode untuk dieksekusi di lingkungan tanpa dukungan asli, Anda mungkin bisa mengkompilasi sintaks ini (bukan menggunakan polyfill). (Dengan Babel, misalnya.)

• Kurang bertele-tele.

Kekurangan:

• Ketika jawaban ini awalnya ditulis, ini adalah proposal , bukan standar. Saat menggunakan proposal pertimbangkan apa yang akan Anda lakukan jika Anda menulis kode dengannya sekarang dan itu tidak mendapatkan standar atau perubahan saat bergerak menuju standardisasi. Sejak ini telah distandarisasi dalam ES2018.

• Secara literal, tidak dinamis.

Object.assign()

options = Object.assign({}, optionsDefault, options);

Keuntungan:

• Standar

• Dinamis. Contoh:

  var sources = [{a: "A"}, {b: "B"}, {c: "C"}];
  options = Object.assign.apply(Object, [{}].concat(sources));
  // or
  options = Object.assign({}, ...sources);

Kekurangan:

• Lebih banyak verbose.
• Jika membuat kode untuk eksekusi di lingkungan tanpa dukungan asli, Anda perlu melakukan polyfill.

Ini adalah komitmen yang membuat saya bertanya-tanya.

Itu tidak terkait langsung dengan apa yang Anda minta. Kode itu tidak menggunakan Object.assign(), itu menggunakan kode pengguna ( object-assign) yang melakukan hal yang sama. Mereka tampaknya mengkompilasi kode itu dengan Babel (dan menggabungkannya dengan Webpack), yang saya bicarakan: sintaks yang bisa Anda kompilasi. Mereka tampaknya lebih suka daripada harus dimasukkan object-assignsebagai ketergantungan yang akan masuk ke gedung mereka.

Untuk objek referensi istirahat / spread diselesaikan dalam ECMAScript 2018 sebagai tahap 4. Proposal dapat ditemukan di sini .

Untuk sebagian besar objek reset dan spread bekerja dengan cara yang sama, perbedaan utama adalah bahwa spread mendefinisikan properti, sementara Object.assign () menyetelnya . Ini berarti Object.assign () memicu setter.

Perlu diingat bahwa selain ini, objek rest / spread 1: 1 memetakan ke Object.assign () dan bertindak berbeda terhadap array (iterable) spread. Misalnya, ketika menyebarkan nilai null array tersebar. Namun menggunakan objek, menyebarkan nilai nol secara diam-diam menyebar ke apa-apa.

Array (Iterable) Sebarkan Contoh

const x = [1, 2, null , 3];
const y = [...x, 4, 5];
const z = null;

console.log(y); // [1, 2, null, 3, 4, 5];
console.log([...z]); // TypeError

Contoh Penyebaran Objek

const x = null;
const y = {a: 1, b: 2};
const z = {...x, ...y};

console.log(z); //{a: 1, b: 2}

Ini konsisten dengan cara kerja Object.assign (), keduanya diam-diam mengecualikan nilai nol tanpa kesalahan.

const x = null;
const y = {a: 1, b: 2};
const z = Object.assign({}, x, y);

console.log(z); //{a: 1, b: 2}

Saya pikir satu perbedaan besar antara operator spread dan Object.assignyang tampaknya tidak disebutkan dalam jawaban saat ini adalah bahwa operator spread tidak akan menyalin prototipe objek sumber ke objek target. Jika Anda ingin menambahkan properti ke objek dan Anda tidak ingin mengubah instance itu, maka Anda harus menggunakannya Object.assign. Contoh di bawah ini harus menunjukkan ini:

const error = new Error();
error instanceof Error // true

const errorExtendedUsingSpread = {
  ...error,
  ...{
    someValue: true
  }
};
errorExtendedUsingSpread instanceof Error; // false

const errorExtendedUsingAssign = Object.assign(error, {
  someValue: true
});
errorExtendedUsingAssign instanceof Error; // true

Seperti yang telah disebutkan orang lain, pada saat penulisan ini, Object.assign()membutuhkan polyfill dan penyebaran objek ...memerlukan beberapa pengubahan (dan mungkin juga polyfill) agar dapat bekerja.

Pertimbangkan kode ini:

// Babel wont touch this really, it will simply fail if Object.assign() is not supported in browser.
const objAss = { message: 'Hello you!' };
const newObjAss = Object.assign(objAss, { dev: true });
console.log(newObjAss);

// Babel will transpile with use to a helper function that first attempts to use Object.assign() and then falls back.
const objSpread = { message: 'Hello you!' };
const newObjSpread = {...objSpread, dev: true };
console.log(newObjSpread);

Keduanya menghasilkan output yang sama.

Ini adalah output dari Babel, ke ES5:

var objAss = { message: 'Hello you!' };
var newObjAss = Object.assign(objAss, { dev: true });
console.log(newObjAss);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var objSpread = { message: 'Hello you!' };
var newObjSpread = _extends({}, objSpread, { dev: true });
console.log(newObjSpread);

Ini pemahaman saya sejauh ini. Object.assign()sebenarnya standar, sedangkan objek ...belum menyebar . Satu-satunya masalah adalah dukungan browser untuk yang pertama dan di masa depan, yang terakhir juga.

Mainkan dengan kode di sini

Semoga ini membantu.

Operator penyebaran objek (...) tidak berfungsi di browser, karena itu belum menjadi bagian dari spesifikasi ES apa pun, hanya proposal. Satu-satunya pilihan adalah mengkompilasinya dengan Babel (atau yang serupa).

Seperti yang Anda lihat, itu hanya gula sintaksis di atas Object.assign ({}).

Sejauh yang saya bisa lihat, ini adalah perbedaan penting.

• Object.assign berfungsi di sebagian besar browser (tanpa kompilasi)
• ... untuk objek tidak terstandarisasi
• ... melindungi Anda dari secara tidak sengaja bermutasi objek
• ... akan melakukan polyfill Object.assign di browser tanpa itu
• ... membutuhkan lebih sedikit kode untuk mengekspresikan ide yang sama

Saya ingin merangkum status fitur ES "spread object merge", di browser, dan di ekosistem melalui alat.

Spec

• https://github.com/tc39/proposal-object-rest-spread
• Fitur bahasa ini adalah proposal tahap 4 , yang berarti telah digabung ke dalam spesifikasi bahasa ES, tetapi belum diimplementasikan secara luas.

Browser: di Chrome, di SF, Firefox segera (ver 60, IIUC)

• Dukungan browser untuk "sebarkan properti" yang dikirim di Chrome 60 , termasuk skenario ini.
• Dukungan untuk skenario ini TIDAK berfungsi di Firefox saat ini (59), tetapi DOES bekerja di Edisi Pengembang Firefox saya. Jadi saya yakin itu akan dikirimkan di Firefox 60.
• Safari: tidak diuji, tetapi Kangax mengatakan itu berfungsi di Desktop Safari 11.1, tetapi tidak SF 11
• iOS Safari: tidak diuji, tetapi Kangax mengatakan itu bekerja di iOS 11.3, tetapi tidak di iOS 11
• belum di Edge

Alat: Node 8.7, TS 2.1

• NodeJS telah mendukung sejak 8.7 (via Kangax). Dikonfirmasi pada 9,8 ketika saya menguji secara lokal.
• TypeScript telah mendukungnya sejak 2.1 , saat ini 2.8

Tautan

• Kangax "sebaran properti"
• https://davidwalsh.name/merge-objects

Contoh Kode (berfungsi ganda sebagai uji kompatibilitas)

var x = { a: 1, b: 2 };
var y = { c: 3, d: 4, a: 5 };
var z = {...x, ...y};
console.log(z); // { a: 5, b: 2, c: 3, d: 4 }

Lagi: Pada saat penulisan, sampel ini berfungsi tanpa transpilasi di Chrome (60+), Edisi Pengembang Firefox (preview Firefox 60), dan Node (8.7+).

Mengapa Menjawab

Saya menulis ini 2,5 tahun setelah pertanyaan awal. Tetapi saya memiliki pertanyaan yang sama, dan di sinilah Google mengirim saya. Saya seorang budak misi SO untuk memperbaiki ekor panjang.

Karena ini merupakan perluasan dari sintaks "array spread", saya merasa sangat sulit untuk google, dan sulit ditemukan di tabel kompatibilitas. Yang paling dekat yang bisa saya temukan adalah Kangax "sebaran properti" , tetapi tes itu tidak memiliki dua spread dalam ekspresi yang sama (bukan gabungan). Juga, nama dalam halaman status proposal / konsep / browser semua menggunakan "sebaran properti", tetapi bagi saya sepertinya itu adalah "prinsipal pertama" yang diterima komunitas setelah proposal untuk menggunakan sintaksis spread untuk "penggabungan objek". (Yang mungkin menjelaskan mengapa sangat sulit untuk google.) Jadi saya mendokumentasikan temuan saya di sini sehingga orang lain dapat melihat, memperbarui, dan menyusun tautan tentang fitur spesifik ini. Saya harap ini berhasil. Tolong bantu sebarkan berita itu mendarat di spec dan di browser.

Terakhir, saya akan menambahkan info ini sebagai komentar, tetapi saya tidak dapat mengeditnya tanpa melanggar maksud asli penulis. Secara khusus, saya tidak dapat mengedit komentar @ ChillyPenguin tanpa kehilangan niatnya untuk memperbaiki @RichardSchulte. Tetapi bertahun-tahun kemudian Richard ternyata benar (menurut saya). Jadi saya menulis jawaban ini sebagai gantinya, berharap akan mendapatkan daya tarik pada jawaban lama pada akhirnya (mungkin butuh bertahun-tahun, tapi itulah efek dari long tail , setelah semua).

CATATAN: Spread BUKAN hanya gula sintaksis di sekitar Object.assign. Mereka beroperasi jauh berbeda di belakang layar.

Object.assign menerapkan setter ke objek baru, Spread tidak. Selain itu, objek tersebut harus dapat diubah.

Salin Gunakan ini jika Anda memerlukan nilai objek seperti saat ini, dan Anda tidak ingin nilai mencerminkan perubahan yang dibuat oleh pemilik objek lain.

Gunakan untuk membuat salinan dangkal objek praktik yang baik untuk selalu menetapkan properti yang tidak dapat diubah untuk disalin - karena versi yang dapat diubah dapat dipindahkan ke properti yang tidak dapat diubah, salinan akan memastikan bahwa Anda akan selalu berurusan dengan objek yang tidak dapat diubah

Tetapkan Tetapkan agak berlawanan dengan menyalin. Tetapkan akan menghasilkan setter yang memberikan nilai ke variabel instan secara langsung, daripada menyalin atau mempertahankannya. Saat memanggil pengambil properti penetapan, ia mengembalikan referensi ke data aktual.

Jawaban lain sudah tua, tidak bisa mendapat jawaban yang baik.
Contoh di bawah ini adalah untuk objek literal, membantu bagaimana keduanya dapat saling melengkapi, dan bagaimana keduanya tidak dapat saling melengkapi (oleh karena itu perbedaan):

var obj1 = { a: 1,  b: { b1: 1, b2: 'b2value', b3: 'b3value' } };

// overwrite parts of b key
var obj2 = {
      b: {
        ...obj1.b,
        b1: 2
      }
};
var res2 = Object.assign({}, obj1, obj2); // b2,b3 keys still exist
document.write('res2: ', JSON.stringify (res2), '<br>');
// Output:
// res2: {"a":1,"b":{"b1":2,"b2":"b2value","b3":"b3value"}}  // NOTE: b2,b3 still exists

// overwrite whole of b key
var obj3 = {
      b: {
        b1: 2
      }
};
var res3 = Object.assign({}, obj1, obj3); // b2,b3 keys are lost
document.write('res3: ', JSON.stringify (res3), '<br>');
// Output:
  // res3: {"a":1,"b":{"b1":2}}  // NOTE: b2,b3 values are lost

Beberapa contoh kecil lainnya di sini, juga untuk array & objek:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Ini sekarang bagian dari ES6, dengan demikian distandarisasi, dan juga didokumentasikan di MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Ini sangat nyaman untuk digunakan dan membuat banyak akal bersama perusakan objek.

Satu kelebihan yang tersisa yang tercantum di atas adalah kemampuan dinamis Object.assign (), namun ini semudah menyebarkan array di dalam objek literal. Dalam output babel yang dikompilasi, ia menggunakan apa yang ditunjukkan dengan Object.assign ()

Jadi jawaban yang benar adalah dengan menggunakan objek menyebar karena sekarang distandarisasi, banyak digunakan (lihat bereaksi, redux, dll), mudah digunakan, dan memiliki semua fitur Object.assign ()

Saya ingin menambahkan contoh sederhana ini ketika Anda harus menggunakan Object.assign.

class SomeClass {
  constructor() {
    this.someValue = 'some value';
  }

  someMethod() {
    console.log('some action');
  }
}


const objectAssign = Object.assign(new SomeClass(), {});
objectAssign.someValue; // ok
objectAssign.someMethod(); // ok

const spread = {...new SomeClass()};
spread.someValue; // ok
spread.someMethod(); // there is no methods of SomeClass!

Tidak jelas saat Anda menggunakan JavaScript. Tetapi dengan TypeScript lebih mudah jika Anda ingin membuat instance dari beberapa kelas

const spread: SomeClass = {...new SomeClass()} // Error