对象扩展操作符(…)在浏览器中不起作用，因为它还不是任何ES规范的一部分，只是一个建议。唯一的选择是用Babel(或类似的东西)编译它。

正如您所看到的，它只是Object.assign({})上的语法糖。

在我看来，这些是重要的区别。

对象。赋值在大多数浏览器中都有效(不需要编译) ．.． For对象不是标准化的 ．.． 防止您意外地改变对象 ．.． 将填充对象。在没有它的浏览器中赋值 ．.． 需要更少的代码来表达相同的思想

(1)创建对象的浅副本和(2)将多个对象合并为单个对象的方法在2014年至2018年之间有了很大的发展。

下面概述的方法在不同时期变得可用并广泛使用。这个答案提供了一些历史视角，但并不详尽。

如果没有库或现代语法的帮助，您将使用for-in循环，例如。 var mergedOptions = {} for (var键在defaultOptions) { mergedOptions[key] = defaultOptions[key] ｝ 对于(var键在选项中){ mergedOptions[key] = options[key] ｝ options = mergedOptions

2006

jQuery 1.0有jQuery.extend(): 选项= $。extend({}， defaultOptions, options)

⋮

2010

下划线。js 1.0有_.extend() 选项= _。extend({}， defaultOptions, options)

⋮

2014

2ality发布了一篇关于Object.assign()加入ES2015的文章 对象分配发布到npm。 var objectAssign = require('object-assign') options = objectAssign({}， defaultOptions, options) ES2016提出的对象Rest/扩展属性语法。

2015

对象。Chrome (45)， Firefox(34)和Node.js(4)都支持assign。不过，旧的运行时需要Polyfill。 options =对象。assign({}， defaultOptions, options) 对象Rest/Spread Properties提案进入第二阶段。

2016

对象Rest/扩展属性语法没有被包含在ES2016中，但是提案已经到了第三阶段。

2017

对象Rest/Spread属性语法没有包含在ES2017中，但在Chrome (60)， Firefox(55)和Node.js(8.3)中可用。不过，旧的运行时需要一些编译。 选项={…defaultOptions，…选择}

2018

对象Rest/Spread Properties提案达到了第4阶段，语法被包含在ES2018标准中。

两者之间有着巨大的差异，并会带来非常严重的后果。投票最多的问题甚至没有触及到这一点，关于物体传播是一项提案的信息在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])
    })
  }

我认为展开运算符和对象的最大区别。当前答案中似乎没有提到的赋值是，展开操作符不会将源对象的原型复制到目标对象。如果你想给一个对象添加属性，而你又不想改变它的实例，那么你必须使用object .assign。

编辑:实际上我已经意识到我的例子是有误导性的。展开操作符糖化为Object。将第一个参数设置为空对象进行赋值。在下面的代码示例中，我将error作为对象的第一个参数。赋值调用，所以两者是不相等的。Object的第一个参数。Assign会被修改，然后返回这就是它保留原型的原因。我在下面又加了一个例子:

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

参见:https://github.com/tc39/proposal-object-rest-spread/blob/master/Spread.md

正如其他人所提到的，在撰写本文时，object .assign()需要一个polyfill和object spread…需要一些蒸煮(也许是一个填充)为了工作。

考虑下面的代码:

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

它们都产生相同的输出。

下面是从Babel到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);

这是我目前的理解。object .assign()实际上是标准化的，其中随着对象扩展…还没有。唯一的问题是浏览器对前者以及未来对后者的支持。

玩一下这里的代码

希望这能有所帮助。

作为参考，对象rest/spread在ECMAScript 2018中作为第4阶段完成。提案可以在这里找到。

在大多数情况下，对象赋值和扩展的工作方式是相同的，关键的区别是扩展定义属性，而object .assign()设置属性。这意味着Object.assign()触发设置器。

值得记住的是，除此之外，对象rest/spread 1:1映射到object .assign()，与数组(可迭代)spread的作用不同。例如，当展开一个数组时，将展开空值。然而，使用对象传播时，空值会被无声地传播到空值。

数组(可迭代)扩展示例

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

对象扩展示例

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

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

这与Object.assign()的工作方式是一致的，两者都无声地排除空值而没有错误。

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

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