{... obj1，obj2}到底能做什么

Question

假设我们有两个对象：

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

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

在Vuex中，有一个方法replaceState（），根据documentation，该方法采用一个参数并将状态替换为该对象。

以下内容将导致什么：

replaceState({ ...state, animals })

更具体地说，{ ...state, animals }到底能做什么？

为了提供一些背景信息，我以this问题的答案为例。在该问题中，用户希望用新对象animals替换状态的animals属性。

我不确定这是否与Vuex / Vue.js有关，还是一个纯粹的JS问题，但无论如何我还是会用vue.js对其进行标记。

Answer 1

这实际上来自ECMAScript 2018的spread syntax和ECMAScript 2015的object destructuring。

{ ...state, animals }创建state对象的浅表副本，并带有一个名为animals的新属性（其中包含动物对象的值）。

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

Answer 2

意思是Object.assign({}, state, { animals: animals} }。

Answer 3

它的作用是将state的所有属性扩展到新对象中–生成浅表副本。原始对象（state）中的所有属性都将被复制到新对象（您要传递给replaceState的对象）中。这是一个简单的演示：

let obj1 = { obj: "1" };
let obj2 = { ...obj1, obj2: true };
console.log(obj1);
console.log(obj2);

animals位是ES6 property shorthand，基本上可以做到这一点：

animals: animals

这是更简洁的语法。