Javascript {…obj1，obj2}到底做什么

假设我们有两个对象：

const state = {
  fishes: { /* some obj data */ },
  animals: { /* some obj data  */ }

const animals = { /* some NEW data */ }

在Vuex中有一个方法replaceState（），它根据获取一个参数并用该对象替换状态

以下操作的结果是什么：

replaceState({ ...state, animals })

更具体地说，

{……状态，动物}

到底做了什么

为了提供一些背景知识，我从问题的答案中选取了这个例子。在这个问题中，用户希望用新对象

动物

替换状态的

动物

属性

---

我不确定这是否与Vuex/Vue.js有关，或者这是一个纯js问题，但我还是会用Vue.js来标记它。

这实际上来自ECMAScript 2018和ECMAScript 2015

{…state，animals}

创建

state

对象的浅层副本，其中包含名为

animals

的新属性（其中包含animals对象的值）

---

由于您是Vuex用户，因此这符合s规则，即防止“原始”状态对象被更改或变异。您应该阅读使用不可变模式处理常见操作（如添加/更新/删除）的方法

它的意思是

对象。赋值（{}，state，{animates:animates}}

它的作用是将

状态

的所有属性传播到新对象中-创建一个浅层副本。原始对象（

状态

）中的所有属性都将复制到新对象中（您正在传递到

替换状态

）.这里有一个简单的演示：

让obj1={obj:“1”}；
设obj2={…obj1，obj2:true}；
控制台日志（obj1）；
console.log（obj2）；

{…}

是一种对象扩展操作，我想您正在寻找：仅供参考，数组扩展与对象扩展不同。对象扩展是ES7的一部分，而数组扩展是ES6@Rajesh感谢您指出这一点！它确实有时会让人困惑，因为在提案之后，spread同时适用于对象和数组。“使用名为Animages的新属性”-但是如果state对象已经包含属性Animages，它会被覆盖吗？另外，解构不会导致多个参数传递给replaceState（）函数在我的示例中？@NikolayDyankov是的，我相信是的。事实上，它从“原始”状态对象创建了一个浅层副本。您可以尝试通过修改复制的对象并运行console.log（）来测试它但是，我必须让你注意一个事实，如果

动物

是一个嵌套对象，那么你必须浅层复制它的各个层次。这个链接有一个很好的例子。我希望我不会让你对所有这些URL感到太厌烦，但你必须理解这一点概念。这更多的是一个注释。如果您添加对正在发生的事情的解释，它的目的是什么，这将有助于读者。据我所知，Object.assign（）对两个对象进行浅层合并，但为什么要分解第二个对象？实际上，我不是在分解第二个对象，而是使用旧的、详细的ES5对象表示法。哦，对了。我开始看到到处都在分解lol