当你必须使用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!

使用JavaScript时可能不清楚。但是如果你想创建一些类的实例，使用TypeScript会更容易

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

这并不一定详尽无遗。

传播的语法

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

优点:

如果在没有本机支持的环境中编写代码以执行，则可以只编译此语法(而不是使用polyfill)。(比如巴别塔。) 可以减少复杂性。

缺点:

当这个答案最初被写出来的时候，这是一个建议，没有标准化。在使用提案时，请考虑如果您现在使用提案编写代码，而它没有得到标准化或在向标准化发展的过程中发生变化，该怎么办。这已经在ES2018中标准化了。 字面的，不是动态的。

Object.assign ()

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

优点:

标准化。 动态的。例子: var sources = [{a: " a "}， {b: " b "}， {c: " c "}]; options = Object.assign。应用(对象,({}).concat(来源)); / /或 options =对象。分配({},…来源);

缺点:

更详细的。 如果在没有本机支持的环境中编写代码执行，则需要填充。

这是让我疑惑的承诺。

这和你问的问题没有直接关系。这段代码没有使用Object.assign()，而是使用用户代码(object-assign)来做同样的事情。他们似乎在用Babel编译代码(并将其与Webpack捆绑)，这就是我所说的:你可以编译的语法。他们显然更喜欢这样，而不是必须将对象赋值作为一个依赖项包含到他们的构建中。

其他答案都老了，得不到好的答案。 下面的例子是对象字面量，有助于两者如何相互补充，以及如何不能相互补充(因此存在差异):

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

这里还有几个小例子，同样是数组和对象: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

太多的错误答案……

我搜索了一下，发现了很多关于这方面的错误信息。

总结

既不……扩散也不反对。赋值更快。视情况而定。 对象。如果不考虑副作用/对象突变，Assign几乎总是更快。 除了性能之外，使用这两种方法通常都没有优点或缺点，直到遇到极限情况，例如复制包含getter /setter的对象或只读属性。点击这里阅读更多。

性能

是否对象。Assign或…传播速度更快，这取决于你想要组合的东西，以及你正在使用的运行时(实现和优化不时发生)。对于小的对象，这无关紧要。

对于较大的对象，请使用Object。Assign通常更好。特别是在不需要关心副作用的情况下，只需向第一个对象添加属性就可以节省时间，而不是复制两个对象并创建一个全新的对象。看到的:

async function retrieveAndCombine() {
    const bigPayload = await retrieveData()
    const smallPayload = await retrieveData2()
    
    // only the properties of smallPayload is iterated through
    // whereas bigPayload is mutated.
    return Object.assign(bigPayload, smallPayload)
}

如果有副作用的话

在副作用很重要的情况下，例如将一个对象与另一个对象组合作为参数传入。

在下面的例子中，bigPayload将被改变，如果retrieveAndCombine之外的其他函数/对象依赖于bigPayload，这是一个坏主意。在这种情况下，可以交换传递给Object的参数。赋值，或者直接使用{}作为第一个参数来创建一个新对象:

async function retrieveAndCombine(bigPayload) {
    const smallPayload = await retrieveData2()

    // this is slightly more efficient
    return Object.assign(smallPayload, bigPayload)

    // this is still okay assuming `smallPayload` only has a few properties
    return Object.assign({}, smallPayload, bigPayload)
}

Test

试试下面的代码片段。注意:运行需要一段时间。

const rand = () => (Math.random() + 1).toString(36).substring(7) function combineBigObjects() { console.log('Please wait...creating the test objects...') const obj = {} const obj2 = {} for (let i = 0; i < 100000; i++) { const key = rand() obj[rand()] = { [rand()]: rand(), [rand()]: rand(), } obj2[rand()] = { [rand()]: rand(), [rand()]: rand(), } } console.log('Combine big objects using spread:') console.time() const result1 = { ...obj, ...obj2, } console.timeEnd() console.log('Combine big objects using assign:') console.time() Object.assign({}, obj, obj2) console.timeEnd() console.log('Combine big objects using assign, but mutates first obj:') console.time() Object.assign(obj, obj2) console.timeEnd() } combineBigObjects() function combineSmallObjects() { const firstObject = () => ({ [rand()]: rand() }) const secondObject = () => ({ [rand()]: rand() }) console.log('Combine small objects using spread:') console.time() for (let i = 0; i < 500000; i++) { const finalObject = { ...firstObject(), ...secondObject(), } } console.timeEnd() console.log('Combine small objects using assign:') console.time() for (let i = 0; i < 500000; i++) { const finalObject = Object.assign({}, firstObject(), secondObject()) } console.timeEnd() console.log('Combine small objects using assign, but mutates first obj:') console.time() for (let i = 0; i < 500000; i++) { const finalObject = Object.assign(firstObject(), secondObject()) } console.timeEnd() } combineSmallObjects()

我们将创建一个名为identity的函数，它只返回我们给它的任何参数。

identity = (arg) => arg

和一个简单的数组。

arr = [1, 2, 3]

如果用arr求恒等函数，我们知道会发生什么

两者之间有着巨大的差异，并会带来非常严重的后果。投票最多的问题甚至没有触及到这一点，关于物体传播是一项提案的信息在2022年已经无关紧要了。

区别在于对象。赋值操作将对象就地更改，而展开操作符(…)将创建一个全新的对象，这将破坏对象引用相等性。

首先，让我们看看效果，然后我将给出一个现实世界的例子，说明理解这种根本差异是多么重要。

首先，让我们使用Object.assign:

// Let's create a new object, that contains a child object;
const parentObject = { childObject: { hello: 'world '} };

// Let's get a reference to the child object;
const childObject = parentObject.childObject;

// Let's change the child object using Object.assign, adding a new `foo` key with `bar` value;
Object.assign(parentObject.childObject, { foo: 'bar' });

// childObject is still the same object in memory, it was changed IN PLACE.
parentObject.childObject === childObject
// true

现在对展开运算符进行同样的练习:

// Let's create a new object, that contains a child object;
const parentObject = { childObject: { hello: 'world '} };

// Let's get a reference to the child object;
const childObject = parentObject.childObject;

// Let's change the child object using the spread operator;
parentObject.childObject = {
  ...parentObject.childObject,
  foo: 'bar',
}

// They are not the same object in memory anymore!
parentObject.childObject === childObject;
// false

很容易看出发生了什么，因为在parentObject上。childObject ={…}我们清楚地将parentObject中的childObject键的值赋给一个全新的对象文字，而它是由旧的childObject内容组成的事实是无关紧要的。这是一个新物件。

如果你认为这在实践中是无关紧要的，让我展示一个真实世界的场景来理解它有多重要。

在一个非常大的Vue.js应用程序中，当我们在输入字段中输入客户的名字时，我们开始注意到很多延迟。

经过大量调试后，我们发现输入中的每个字符都会触发一大堆需要重新计算的计算属性。

这是意料之外的，因为在那些计算函数中根本没有使用客户的名称。只使用了其他客户数据(如年龄、性别)。发生了什么事?当客户的名字改变时，vue为什么要重新计算所有这些计算函数?

我们有一家Vuex商店是这样做的:

mutations: {
  setCustomer(state, payload) {
    // payload being { name: 'Bob' }
    state.customer = { ...state.customer, ...payload };
  }

我们的计算是这样的:

veryExpensiveComputed() {
   const customerAge = this.$store.state.customer.age;
}

所以,瞧!当客户名称更改时，Vuex突变实际上是将其完全更改为一个新对象;由于计算依赖于该对象来获取客户年龄，Vue依赖于该非常特定的对象实例作为依赖项，当它被更改为一个新对象时(未能通过===对象相等性测试)，Vue决定是时候重新运行计算函数了。

这是固定的吗?使用对象。赋值不丢弃前一个对象，而是在适当的位置更改它…

mutations: {
  setCustomer(state, payload) {
    // payload being same as above: { name: 'Bob' }
    Object.assign(state.customer, payload);
  }

顺便说一句，如果你在ve2中，你不应该使用Object。因为Vue 2不能直接跟踪这些对象的变化，但同样的逻辑适用，只是使用Vue。set而不是Object.assign:

mutations: {
  setCustomer(state, payload) {
    Object.keys(payload).forEach(key => {
      Vue.set(state.customer, key, payload[key])
    })
  }