在对象文字（...object）中传播语法有啥用途？

Posted 2023-02-22

【中文标题】在对象文字（...object）中传播语法有啥用途？

【英文标题】：What purpose does spread syntax inside an object literal (...object) serve?在对象文字（...object）中传播语法有什么用途？

【发布时间】：2021-06-08 15:55:26

【问题描述】：

我已经阅读了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 谢谢，我已将标题更新为“语法”而不是“运算符”

【参考方案1】：

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

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

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

【讨论】：

谢谢@T.J.Crowder。我已经检查过这个问题是重复的，没有其他答案。

@mikemaccana - 如果有一些我不会感到惊讶。真的很难找到这个。我还没有找到一个好的。

大声笑，它被标记为关于扩展语法含义的通用问题的重复。这不是问题所在。

@mikemaccana 第一个是“catch all”，用于针对缺乏对这种浅拷贝用例的解释的运算符/符号的问题。第二个是错误的恕我直言。第三个并不完美，但有很好的提示。第四部分解释了您的用例的详细信息。不是最佳的，但最后一个应该足以回答您的问题。

@Andreas 我不确定关于何时问题不同但其他问题的答案有帮助的 SO 政策。但是是的，我同意 - 前 3 个链接无关紧要，第四个有实际有用的答案。