Javascript传播语法在对象中合并但在数组中追加答案

【问题标题】：Javascript spread syntax merges in object but appends in arrayJavascript传播语法在对象中合并但在数组中追加
【发布时间】：2019-02-07 10:59:45
【问题描述】：

我的情况很奇怪。我有 2 个对象：state.result 是一个对象数组，data.catalogs 是一个类似于 state.result 的对象数组。

我想创建一个纯函数来返回它们合并的副本（在 redux reducer 中）。如果我跑：

 {
    ...state,
    result: {...state.result, ...data.catalogs}
  }

一切都是 hunkey dorey，state.result 中的 4 项与 data.catalogs 中的 1 项合并，给我留下了 4 项的返回值。问题是我想要一个项目数组，这给了我和包含项目的 4 个属性的对象。

如果我跑：

  {
    ...state,
    result: [...state.result, ...data.catalogs]
  }

它给了我一个我想要的项目数组，但不是合并它们，而是附加它们，所以我得到一个包含 5 个项目的数组（state.result 和 data.catalogs 中的项目的副本）。

为什么会发生这种情况？如何合并数组中的项目？

【问题讨论】：

我没有得到.. state.result 仅包含 data.catalogs ？显示您的状态如何（相关部分）
抱歉，现在状态为空
数组扩展操作不能合并，因为它没有要合并的键。你可以在这里查看 Dan Abramov 关于在 reducer 中使用数组的教程：github.com/RyoIkarashi/redux-tutorial-by-dan-abramov/blob/…

标签： javascript reactjs redux functional-programming

【解决方案1】：

    {
    ...state,
    result: {...state.result, ...data.catalogs}
  }

如何使用它，然后使用Object.values(results) 从中取出您想要的值，如果您也需要，也可以使用.map() 它。

我希望这会有所帮助。

【讨论】：

【解决方案2】：

您必须单独处理数组的合并

const x = [{id: 1}, {id: 2, name: 'two'}, {}];
const y = [{name: 'one'}, {}, {id: 3, name: 'three'}];

const z = x.map((e, index) => Object.assign({}, {...e, ...y[index]}));

// z = [{id: 1, name: 'one'}, {id: 2, name: 'two'}, {id: 3, name: 'three'}]

【讨论】：