Javascript扩展语法在对象中合并，但附加在数组中

Question

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

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

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

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

如果我跑：

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

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

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

Answer 1

您必须分别处理数组的合并

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'}]

Answer 2

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

那么使用它然后用Object.values(results)获取你想要的值你可以.map()它，如果你需要。

我希望有所帮助。