Diyelim ki bir optionsdeğişkenim var ve bazı varsayılan değerler ayarlamak istiyorum.

Bu iki alternatifin yararı / dezavantajı nedir?

Nesne yayılmasını kullanma

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

Veya Object.assign kullanarak

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

Bu taahhüt beni meraklandırdı.

Bu her zaman kapsamlı değildir.

Yaygın sözdizimi

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

Avantajları:

• Yerel desteği olmayan ortamlarda yürütme için kod yazarsanız, bu sözdizimini derleyebilirsiniz (çok amaçlı dolgu kullanmak yerine). (Örneğin Babil ile.)

• Daha az ayrıntılı.

Dezavantajları:

• Bu cevap başlangıçta yazıldığında, bu standartlaştırılmamış bir teklifti . Teklifleri kullanırken, koduyla şimdi yazarsanız ve standardizasyona geçmezse veya standardizasyona geçtikçe değişiklik yaparsanız ne yapacağınızı düşünün. Bu, o zamandan beri ES2018'de standartlaştırılmıştır.

• Değişmez, dinamik değil.

Object.assign()

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

Avantajları:

• Standardize edilmiş.

• Dinamik. Misal:

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

Dezavantajları:

• Daha ayrıntılı.
• Yerel desteği olmayan ortamlarda yürütme için kod yazarsanız, çoklu doldurmanız gerekir.

Bu beni şaşırtan şey.

Bu doğrudan sorduğunuz şeyle ilgili değil. Bu kod, aynı şeyi yapan Object.assign()kullanıcı kodunu ( object-assign) kullanıyordu . Bu kodu Babel ile derliyor gibi görünüyorlar (ve Webpack ile paketliyorlar), bahsettiğim şey bu: sadece derleyebileceğiniz sözdizimi. Görünüşe göre object-assign, yapılarına girecek bir bağımlılık olarak dahil edilmeyi tercih ettiler .

Referans nesne için dinlenme / yayılma ECMAScript 2018'de aşama 4 olarak sonlandırılır. Teklif burada bulunabilir .

Çoğunlukla nesne sıfırlama ve yayma çalışmaları aynı şekilde, temel fark, yayılmanın özellikleri tanımlaması ve Object.assign () tarafından ayarlanmasıdır . Bu, Object.assign () ayarlayıcılarını tetiklediği anlamına gelir.

Bunun dışında, nesne dinlenme / yayılma 1: 1 nesnesinin Object.assign () ile eşleştiğini ve dizi (yinelenebilir) yayılmaya farklı davrandığını hatırlamakta fayda var. Örneğin, bir diziyi yayarken null değerler yayılır. Ancak nesne yayılımı kullanıldığında null değerler sessizce hiçbir şeye yayılmaz.

Dizi (Yinelenebilir) Yayılma Örneği

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

Nesne Yayılım Örneği

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

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

Bu, Object.assign () işlevinin çalışma biçimiyle tutarlıdır; her ikisi de sessiz olarak null değeri hatasız olarak hariç tutar.

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

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

Ben yayılma işleç arasındaki büyük bir fark Object.assignve geçerli yanıtlarda belirtilmemiş gibi görünüyor yayılma operatörünün kaynak nesnenin prototipini hedef nesneye kopyalamak olduğunu düşünüyorum. Bir nesneye özellikler eklemek istiyorsanız ve nesnenin hangi örneğini değiştirmek istemiyorsanız kullanmak zorundasınız Object.assign. Aşağıdaki örnek bunu göstermelidir:

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

Diğerlerinin de belirttiği gibi, bu yazma anında, Object.assign()bir ...çoklu dolgu gerektirir ve nesne yayılması, çalışması için bir miktar nakil (ve belki de bir çoklu dolgu) gerektirir.

Bu kodu düşünün:

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

Her ikisi de aynı çıktıyı üretir.

İşte Babil'den ES5'e çıktı:

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

Bu şimdiye kadarki anlayışım. Object.assign()aslında standartlaştırılmıştır, burada nesne dağılımı ...henüz değildir. Tek sorun, birincisi ve gelecekte, ikincisi için tarayıcı desteğidir.

Buradaki kodla oynayın

Bu yardımcı olur umarım.

Nesne yayma işleci (...) tarayıcılarda çalışmaz, çünkü henüz herhangi bir ES spesifikasyonunun parçası değil, sadece bir tekliftir. Tek seçenek Babil (veya benzer bir şey) ile derlemektir.

Gördüğünüz gibi, Object.assign ({}) üzerindeki sözdizimsel şeker.

Görebildiğim kadarıyla bunlar önemli farklar.

• Object.assign çoğu tarayıcıda çalışır (derlemeden)
• ... nesneler için standart değil
• ... sizi nesneyi yanlışlıkla değiştirmeye karşı korur
• ... Object.assign tarayıcıları onsuz çoklu dolduracak
• ... aynı fikri ifade etmek için daha az koda ihtiyaç var

Tarayıcılarda ve ekosistemdeki "yayılma nesnesi birleştirme" ES özelliğinin durumunu araçlar aracılığıyla özetlemek istiyorum.

spec

• https://github.com/tc39/proposal-object-rest-spread
• Bu dil özelliği , 4. aşama önerisidir , yani ES dil spesifikasyonuyla birleştirilmiştir, ancak henüz yaygın olarak uygulanmamıştır.

Tarayıcılar: Chrome'da, yakında SF'de, Firefox'ta (ver 60, IIUC)

• Bu senaryo dahil , Chrome 60'ta gönderilen "yayılma özellikleri" için tarayıcı desteği .
• Bu senaryo için destek geçerli Firefox'ta (59) çalışmaz, ancak Firefox Developer Edition'ımda çalışır. Bu yüzden Firefox 60'da gönderileceğine inanıyorum.
• Safari: test edilmedi, ancak Kangax Masaüstü Safari 11.1'de çalıştığını ancak SF 11'de çalışmadığını söylüyor
• iOS Safari: kesin değil, ancak Kangax iOS 11.3'te çalıştığını ancak iOS 11'de çalışmadığını söylüyor
• henüz Edge'de değil

Araçlar: Düğüm 8.7, TS 2.1

• NodeJS yana desteklemiştir 8.7 (Kangax ile). Yerel olarak test ettiğimde 9.8'de onaylandı.
• Typescript beri suported etti 2.1 , cari 2.8 olduğunu

Bağlantılar

• Kanguru "mülkiyet yayılması"
• https://davidwalsh.name/merge-objects

Kod Örneği (uyumluluk testi olarak iki katına çıkar)

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 }

Tekrar: Bu örneği yazarken Chrome (60+), Firefox Developer Edition (Firefox 60 önizlemesi) ve Düğümde (8.7+) transpilasyon olmadan çalışır.

Neden Cevap Verilmeli?

Bunu orijinal sorudan 2,5 yıl sonra yazıyorum . Ama ben de aynı soruyu sordum ve Google bu noktada beni gönderdi. Ben SO'nun uzun kuyruğunu geliştirme görevinin bir kölesiyim.

Bu "dizi yayılımı" sözdiziminin bir genişleme olduğundan, google çok zor ve uyumluluk tablolarında bulmak zor buldum. Ben bulabildiğim en yakın Kangax "özellik yayılması" olduğunu , ancak bu test aynı ifadede (bir birleştirme değil) iki yayılması yoktur. Ayrıca, teklifler / taslaklar / tarayıcı durum sayfalarındaki adın tümü "mülk yayılımı" kullanır, ancak bana "nesne birleştirme" için yayılım sözdizimi kullanma önerilerinin ardından topluluğun ulaştığı bir "ilk müdür" gibi görünüyor. (Bu da google'ın bu kadar zor olmasının nedenini açıklayabilir.) Bu yüzden başkalarının bu özellikle ilgili bağlantıları görüntüleyebilmesi, güncelleyebilmesi ve derleyebilmesi için bulgumu burada belgeliyorum. Umarım yakalar. Lütfen spesifikasyonlara ve tarayıcılara iniş haberi yayılmasına yardımcı olun.

Son olarak, bu bilgiyi yorum olarak eklerdim, ancak yazarların orijinal amacını bozmadan bunları düzenleyemezdim. Özellikle, @ ChillyPenguin'in yorumunu @RichardSchulte'yi düzeltme niyetini kaybetmeden düzenleyemiyorum. Ama yıllar sonra Richard haklı çıktı (bence). Bu yüzden bunun yerine bu cevabı yazıyorum, sonunda eski cevaplar üzerinde çekiş kazanacağını umuyorum (yıllar alabilir, ancak sonuçta uzun kuyruk etkisinin nedeni budur ).

Not: forma sadece Object.assign etrafında sözdizimsel şeker değildir. Sahne arkasında çok farklı çalışırlar.

Object.assign yeni bir nesneye ayarlayıcılar uygular, Spread uygulanmaz. Ayrıca, nesne yinelenebilir olmalıdır.

Kopyala Nesnenin değerine şu anda olduğu gibi ihtiyacınız varsa ve bu değerin nesnenin diğer sahipleri tarafından yapılan değişiklikleri yansıtmasını istemiyorsanız bunu kullanın.

Her zaman kopyalanacak değişmez özellikleri ayarlamak için iyi uygulama nesnesinin sığ bir kopyasını oluşturmak için kullanın.

Ata Ata, kopyalamanın tam tersidir. Ata, değeri kopyalamak veya tutmak yerine, örnek değişkenine doğrudan atayan bir ayarlayıcı oluşturur. Assign özelliğinin alıcısını çağırırken, gerçek verilere bir başvuru döndürür.

Diğer cevaplar eski, iyi bir cevap alınamadı.
Aşağıdaki örnek nesne değişmez değerleri içindir, her ikisinin birbirini nasıl tamamlayabildiğine ve birbirini nasıl tamamlayamadığına yardımcı olur (bu nedenle fark):

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

Dizi ve nesne için de birkaç örnek daha:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Bu artık ES6'nın bir parçasıdır, bu nedenle standartlaştırılmıştır ve MDN'de de belgelenmiştir: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Kullanımı çok uygundur ve nesne yıkımının yanında çok mantıklıdır.

Yukarıda listelenen avantajlardan biri Object.assign () öğesinin dinamik özellikleridir, ancak bu, diziyi değişmez bir nesnenin içine yaymak kadar kolaydır. Derlenmiş babel çıktısında Object.assign () ile gösterilenleri kullanır

Bu nedenle doğru cevap, artık standartlaştırıldığı, yaygın olarak kullanıldığı (bkz. Tepki, redux, vb.), Kullanımı kolay ve Object.assign () öğesinin tüm özelliklerine sahip olduğundan nesne yayılmasını kullanmak olacaktır.

Object.assign kullanmanız gerektiğinde bu basit örneği eklemek istiyorum.

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!

JavaScript kullandığınızda net olmayabilir. Ancak TypeScript ile, bir sınıfın örneğini oluşturmak istiyorsanız daha kolaydır

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