{...object, property: value} 如何使用扩展语法？答案

【问题标题】：How does {...object, property: value} work with spread syntax?{...object, property: value} 如何使用扩展语法？
【发布时间】：2017-04-03 07:57:02
【问题描述】：

在查看 ES6 文档时，我注意到建议使用扩展语法而不是更冗长的 Object.assign() 方法。但是，我对这是如何完成的有点困惑。

在这种情况下，object 是否被分解为 key: value 对，然后添加或覆盖逗号右侧的属性，最后重新组合？

【问题讨论】：

阅读此stackoverflow.com/a/41615569/7404943
简而言之就是这样
您肯定没有阅读 ES6 文档 - 对象传播仍然是一个实验性提议。你在读什么？请链接。

标签： javascript ecmascript-6

【解决方案1】：

在这种情况下，对象是否被分解为键：值对，然后添加或覆盖逗号右侧的属性，最后重新组合？

原始对象object 的键值对实际上与具有额外属性var2 的新对象组合使用（合并）（它们正在组合为newObject）。

您可以将其视为object 在使用扩展语法的地方成为newObject 的子集，而具有相同键的属性被覆盖。

查看以下示例：

const object = { txt: 'Test' };
const newObject = {...object, var2: 'aa' };

// logs Object {txt: "Test", var2: "aa"}
console.log(newObject);

const object2 = { txt: 'Test' };
const newObject2 = {...object, txt: 'Test2', var2: 'aa' };

// Object {txt: "Test2", var2: "aa"}
console.log(newObject2);

// merging all objects to a new object
var object3 = {first: 'Hello', second: 'World'};
var newObject3 = {...object, anotherVar: 'stack', ...object2, ...object3};

// Object {txt: "Test", anotherVar: "stack", first: "Hello", second: "World"}
console.log(newObject3);

【讨论】：