对象传播与Object.assign

Question

假设我有一个options变量，并且想要设置一些默认值。

这两种选择的优点/缺点是什么？

使用对象传播

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

或使用Object.assign

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

这就是让我感到奇怪的承诺。

Answer 1

这并不一定是详尽无遗的。传播语法options = {...optionsDefault, ...options};好处：如果编写代码以在没有本机支持的环境中执行，则可以仅编译此语法（与使用polyfill相对）。（例如，使用Babel。）不太冗长。缺点：最初编写此答案时，这只是一个建议，而不是标准化的。使用投标时，请考虑一下如果现在用它编写代码会做什么，并且在朝着标准化的方向发展时，它不会变得标准化或更改。此后已在ES2018中标准化。从字面上看，不是动态的。Object.assign()options = Object.assign({}, optionsDefault, options);好处：标准化。动态。例：var sources = [{a: "A"}, {b: "B"}, {c: "C"}];options = Object.assign.apply(Object, [{}].concat(sources));// oroptions = Object.assign({}, ...sources);缺点：更详细。如果编写代码以在没有本机支持的环境中执行，则需要polyfill。这就是让我感到奇怪的承诺。这与您的要求没有直接关系。该代码未使用Object.assign()，它正在使用object-assign执行相同操作的用户代码（）。他们似乎正在使用Babel编译该代码（并将其与Webpack捆绑在一起），这就是我所说的：您可以编译的语法。他们显然更喜欢将其包含object-assign在其构建中作为依赖项。

Answer 2

作为参考，对象的休息/传播在ECMAScript 2018中最终确定为阶段4。可以在此处找到建议。大多数情况下，对象重置和散布都以相同的方式进行，主要区别在于散布定义属性，而Object.assign（）设置属性。这意味着Object.assign（）触发设置器。值得记住的是，除此之外，对象休息/传播1：1映射到Object.assign（）并以不同的方式作用于数组（可迭代）传播。例如，在扩展数组时，将扩展空值。但是，使用对象扩展时，空值会默默地扩展为零。数组（可迭代）传播示例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（）的工作方式一致，两者都无提示地无提示地排除了null值。const x = null;const y = {a: 1, b: 2};const z = Object.assign({}, x, y);console.log(z); //{a: 1, b: 2}

Answer 3

我认为，散布运算符与Object.assign当前答案中似乎未提及的一个大区别是，散布运算符不会将源对象的原型复制到目标对象。如果要向对象添加属性，并且不想更改它的实例，则必须使用Object.assign。下面的示例应证明这一点：const error = new Error();error instanceof Error // trueconst errorExtendedUsingSpread = {  ...error,  ...{    someValue: true  }};errorExtendedUsingSpread instanceof Error; // falseconst errorExtendedUsingAssign = Object.assign(error, {  someValue: true});errorExtendedUsingAssign instanceof Error; // true