在对象文字（{...object}）中传播语法有什么用途？答案

【问题标题】：What purpose does spread syntax inside an object literal ({...object}) serve?在对象文字（{...object}）中传播语法有什么用途？
【发布时间】：2023-07-09 16:33:01
【问题描述】：

我已经阅读了I don't understand about spread syntax inside objects 上的答案，但仍然不太明白使用（特别是）{...object} 的目的。

{...object} 的作用是什么？

我已经在节点 REPL 中对此进行了测试，假设我创建了一个对象：

> const object = { foo: "hello", bar: "world" };

并在新的对象字面量中使用扩展运算符来引用它：

> { ...object }
{ foo: 'hello', bar: 'world' }

输出与仅使用对象本身相同：

> object
{ foo: 'hello', bar: 'world' }

{...object} 的作用是什么？

【问题讨论】：

不，那不是同一个对象。它是对象的（浅）副本。
const object = { foo: "hello", bar: "world" }; const foo = { ...object }; object.foo = "bar"; console.log(object, foo);
@trincot 我没有说它是同一个对象，而是说输出与仅使用对象本身相同。
@T.J.Crowder 谢谢，我已将标题更新为“语法”而不是“运算符”

标签： javascript spread-syntax

【解决方案1】：

这不是同一个对象。它制作对象自己的可枚举属性的浅表副本（例如Object.assign({}, object) (MDN)。您可以在需要时使用它...具有对象自己的可枚举属性的副本。:-D

例如，对于多个 MVC 或类似库中的任何一个，您可以在更新状态时使用它，因为不应直接修改状态：

this.setState(oldState => ({...oldState, prop: "new value"}));

【讨论】：

谢谢@T.J.Crowder。我已经检查过这个问题是重复的，没有其他答案。
@mikemaccana - 如果有一些我不会感到惊讶。真的很难找到这个。我还没有找到一个好的。
大声笑，它被标记为关于扩展语法含义的通用问题的重复。这不是问题所在。
@mikemaccana 第一个是“catch all”，用于针对缺乏对这种浅拷贝用例的解释的运算符/符号的问题。第二个是错误的恕我直言。第三个并不完美，但有很好的提示。第四部分解释了您的用例的详细信息。不是最佳的，但最后一个应该足以回答您的问题。
@Andreas 我不确定关于何时问题不同但其他问题的答案有帮助的 SO 政策。但是是的，我同意 - 前 3 个链接无关紧要，第四个有实际有用的答案。