blocks|key|4463368|text|这现在是ES6的一部分，因此是标准化的，也记录在MDN上：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4463369|它使用起来非常方便，而且在对象解构方面也很有意义。|4463370|上面列出的一个剩余优势是Object.assign()的动态功能，但是这就像将数组分散到文字对象中一样简单。在编译后的babel输出中，它完全使用Object.assign()所演示的内容。|4463371|因此，正确的答案应该是使用对象扩散，因为它现在是标准化的，被广泛使用(参见react、redux等)，易于使用，并且具有Object.assign()的所有功能。|4463372|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator^0|T|2J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

This is now part of ES6, thus is standardized, and is also documented on MDN:
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator</a>

It's very convenient to use and makes a lot of sense alongside object destructuring.

The one remaining advantage listed above is the dynamic capabilities of Object.assign(), however this is as easy as spreading the array inside of a literal object. In the compiled babel output it uses exactly what is demonstrated with Object.assign()

So the correct answer would be to use object spread since it is now standardized, widely used (see react, redux, etc), is easy to use, and has all the features of Object.assign()

blocks|key|4463638|text|其他答案都是旧的，得不到好的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463639|下面的例子是对象字面量，有助于两者如何相互补充，以及如何不能相互补充(因此不同)：|4463640|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),+' ');
//+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),+' ');
//+Output:
++//+res3:+{"a":1,"b":{"b1":2}}++//+NOTE:+b2,b3+values+are+lost|code-block|syntax|javascript|4463641|这里还有几个小例子，同样适用于array+&+object：|4463642|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax|offset|length|4463643|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|2H|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

Other answers are old, could not get a good answer. 
Below example is for object literals, helps how both can complement each other, and how it cannot complement each other (therefore difference):

<pre><code>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), '&lt;br&gt;');
// 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), '&lt;br&gt;');
// Output:
 // res3: {"a":1,"b":{"b1":2}} // NOTE: b2,b3 values are lost
</code></pre>

Several more small examples here, also for array &amp; object: 
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax</a>

blocks|key|4463525|text|我认为扩散运算符和Object.assign之间的一个很大的区别在当前的答案中似乎没有提到，那就是扩散运算符不会将源对象的原型复制到目标对象。如果你想给一个对象添加属性，但又不想改变它的实例，那么你就必须使用Object.assign。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4463526|编辑:我已经意识到我的例子有误导性。扩展操作符在第一个参数设置为空对象的情况下去糖化为Object.assign。在下面的代码示例中，我将error作为Object.assign调用的第一个参数，因此这两个参数并不相等。Object.assign的第一个参数实际上被修改，然后返回，这就是为什么它保留其原型的原因。我在下面添加了另一个示例：|4463527|​|4463528|const+error+=+new+Error();
error+instanceof+Error+//+true

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

//+What+the+spread+operator+desugars+into
const+errorExtendedUsingImmutableObjectAssign+=+Object.assign({},+error,+{
++++someValue:+true
});
errorExtendedUsingImmutableObjectAssign+instanceof+Error;+//+false

//+The+error+object+is+modified+and+returned+here+so+it+keeps+its+prototypes
const+errorExtendedUsingAssign+=+Object.assign(error,+{
++someValue:+true
});
errorExtendedUsingAssign+instanceof+Error;+//+true|code-block|syntax|javascript|4463529|4463530|另请参阅：https://github.com/tc39/proposal-object-rest-spread/blob/master/Spread.md|4463531|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/tc39/proposal-object-rest-spread/blob/master/Spread.md^0|9|D|2W|D|0|17|D|24|D|32|D|0|0|0|0|5|21|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|R|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

I think one big difference between the spread operator and <code>Object.assign</code> that doesn't seem to be mentioned in the current answers is that the spread operator will not copy the the source object’s prototype to the target object. If you want to add properties to an object and you don't want to change what instance it is of, then you will have to use <code>Object.assign</code>.
Edit: I've actually realised that my example is misleading. The spread operator desugars to <code>Object.assign</code> with the first parameter set to an empty object. In my code example below, I put error as the first parameter of the <code>Object.assign</code> call so the two are not equivalent. The first parameter of <code>Object.assign</code> is actually modified and then returned which is why it retains its prototype. I have added another example below:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const error = new Error();
error instanceof Error // true

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

// What the spread operator desugars into
const errorExtendedUsingImmutableObjectAssign = Object.assign({}, error, {
 someValue: true
});
errorExtendedUsingImmutableObjectAssign instanceof Error; // false

// The error object is modified and returned here so it keeps its prototypes
const errorExtendedUsingAssign = Object.assign(error, {
 someValue: true
});
errorExtendedUsingAssign instanceof Error; // true</code></pre>
</div>
</div>

See also: <a href="https://github.com/tc39/proposal-object-rest-spread/blob/master/Spread.md" rel="noreferrer">https://github.com/tc39/proposal-object-rest-spread/blob/master/Spread.md</a>

blocks|key|4463734|text|当您必须使用Object.assign时，我想添加这个简单的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463735|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!|code-block|syntax|javascript|4463736|当您使用JavaScript时，它可能不清楚。但是如果您想创建某个类的实例，那么使用TypeScript会更容易|4463737|const+spread:+SomeClass+=+{...new+SomeClass()}+//+Error|4463738|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I'd like to add this simple example when you have to use Object.assign.

<pre><code>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!
</code></pre>

It can be not clear when you use JavaScript. But with TypeScript it is easier if you want to create instance of some class

<pre><code>const spread: SomeClass = {...new SomeClass()} // Error
</code></pre>

blocks|key|4463596|text|扩展运算符将数组扩展到函数的单独参数中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463597|let+iterableObjB+=+[1,2,3,4]
function+(...iterableObjB)++//turned+into
function+(1,2,3,4)|code-block|syntax|javascript|4463598|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The spread operator spread the Array into the separate arguments of a function.
<pre><code>let iterableObjB = [1,2,3,4]
function (...iterableObjB) //turned into
function (1,2,3,4)
</code></pre>

blocks|key|4463643|text|我们将创建一个名为identity的函数，它只返回我们给它的任何参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463644|identity+=+(arg)+=>+arg|code-block|syntax|javascript|4463645|和一个简单的数组。|4463646|arr+=+[1,+2,+3]|4463647|如果您使用arr调用identity，我们知道会发生什么|4463648|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

We’ll create a function called identity that just returns whatever parameter we give it.
<pre><code>identity = (arg) =&gt; arg
</code></pre>
And a simple array.
<pre><code>arr = [1, 2, 3]
</code></pre>
If you call identity with arr, we know what’ll happen

Let’s say I have an <code>options</code> variable and I want to set some default value.

What’s is the benefit / drawback of these two alternatives?

Using object spread

<pre><code>options = {...optionsDefault, ...options};
</code></pre>

Or using Object.assign

<pre><code>options = Object.assign({}, optionsDefault, options);
</code></pre>

This is the <a href="https://github.com/FormidableLabs/radium/commit/ca9e9f6f62bb8af692ec120e2c4a0be8c5a7705c" rel="noreferrer">commit</a> that made me wonder.

Object spread vs. Object.assign

TypeScript

JSON

假设我有一个options变量，我想设置一些默认值。这两种选择的优点/缺点是什么？使用对象扩散options = {...optionsDefault, ...options};或者使用Object.assignoptions = Object.assign({}, optionsDefault, options);这...

问对象扩散与Object.assign
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对象扩散与Object.assignEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对象扩散与Object.assign
EN