{ ...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 } 究竟做了什么？

为了提供一些背景信息，我从问题的答案中提取了这个例子。在那个问题中，用户想用新对象 animals.

替换状态的 animals 属性

我不确定这是否与 Vuex / Vue.js 相关，还是纯 JS 问题，但无论如何我都会用 vue.js 标记它。

Answer 1

这实际上来自 ECMAScript 2018 的 spread syntax and ECMAScript 2015's object destructuring。

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

因为你是 Vuex 用户，这符合 immutable update patterns 的规则，即防止 'original' 状态对象被更改或变异。您应该阅读使用不可变模式处理 add/update/delete 等常见操作的方法。

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

只是语法更简洁。

What does { ...obj1, obj2 } do exactly