{... obj1,obj2}做了什么[重复]

问题描述 投票:1回答:3

这个问题在这里已有答案:

假设我们有两个对象:

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标记它。

javascript vue.js ecmascript-6 vuex ecmascript-2018
3个回答
4
投票

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

{ ...state, animals }创建了state对象的浅层副本,其中包含一个名为animals的新属性(其中包含动物对象的值)。

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


2
投票

这意味着Object.assign({}, state, { animals: animals} }


2
投票

它的作用是将state的所有属性传播到新对象中 - 制作浅层副本。原始对象(state)中的所有属性都将被复制到新对象(您传递给replaceState的对象)中。这是一个简单的演示:

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

animals位是ES6 property shorthand,基本上会这样做:

animals: animals

这只是更清晰的语法。

© www.soinside.com 2019 - 2024. All rights reserved.