这并不一定详尽无遗。

传播的语法

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捆绑)，这就是我所说的:你可以编译的语法。他们显然更喜欢这样，而不是必须将对象赋值作为一个依赖项包含到他们的构建中。

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

这并不一定详尽无遗。

传播的语法

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捆绑)，这就是我所说的:你可以编译的语法。他们显然更喜欢这样，而不是必须将对象赋值作为一个依赖项包含到他们的构建中。

对象扩展操作符(…)在浏览器中不起作用，因为它还不是任何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标准中。

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

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