对象排列与对象分配

Question

假设我有一个选项变量，我想设置一些默认值。

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

使用对象传播

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

或者用Object.assign

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

这就是让我好奇的promise。

Answer 1

我认为spread操作符和Object.assign之间的一个很大区别是，spread操作符不会将源对象的原型复制到目标对象，而当前的答案中似乎没有提到这一点。如果要向对象添加属性而不想更改其实例，则必须使用object.assign。

编辑：我已经意识到我的例子是误导性的。spread运算符对对象进行消谐。将第一个参数设置为空对象时，将其分配给。在下面的代码示例中，我将error作为对象的第一个参数。assign调用使两者不相等。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

Answer 2

作为参考，对象Rest/扩散在ECMAScript 2018中作为第4阶段最终确定。建议可以在这里找到。

对于大多数情况，对象重置和排列的工作方式相同，关键区别在于排列定义属性，而object.assign（）设置属性。这意味着Object.assign（）会触发setter。

值得记住的是，除此之外，对象rest/扩展名1:1映射到Object.assign（），并与数组（可迭代）扩展名不同。例如，当散布数组时，空值被散布。然而，使用对象扩展的空值被无声地扩展为零。

数组（Iterable）扩展示例

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}

Answer 3

这不一定是详尽的。

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

>

如果在没有本机支持的环境中编写执行代码，您可能只需要编译此语法（而不是使用polyfill）。（比如巴别塔）

不那么冗长。

>

当这个答案最初写出来的时候，这是一个提议，没有标准化。当使用建议时，考虑一下如果你现在用它编写代码，那么它会做什么，而且它不标准化或者随着标准化而改变。自那时以来，这已在ES2018中标准化。

文字的，不是动态的。

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

>

标准化。

动态例子：

var sources = [{a: "A"}, {b: "B"}, {c: "C"}];
options = Object.assign.apply(Object, [{}].concat(sources));
// or
options = Object.assign({}, ...sources);

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

这就是让我好奇的promise。

这与你的要求没有直接关系。该代码没有使用Object.assign（），而是使用用户代码（Object assign）执行相同的操作。他们似乎在用Babel编译代码（并将其与Webpack捆绑在一起），这就是我所说的：您可以编译的语法。显然，他们更愿意将对象分配作为依赖项包含在构建中。