如何连接两个对象数组？

Question

我正在处理一个 React 本机项目，我想连接两个数组（具有相同的形式）。首先，我正在使用部分列表和 Redux；然后我从服务器获取数据 10 10。例如，我的第一个数组必须是这样的：

data = [
{title: '01/02/2020', data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},
{title: '02/02/2020', data: [{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'}]}
]

在第二次提取时，我遇到了旧数组和新数组之间连接的问题。我想将具有相同标题的标题合并到一个标题中，并将所有数据合并到一个数组中。例如，这是第二次 fetch 的第二个结果：

data2 = [
{title: '02/02/2020', data:[{id: 6,location: 'lesboa', city: 'lesboa'},{id: 7,location: 'amestrdam', city: 'amestrdam'},{id:8,location: 'roma', city: 'roma'}]},
{title: '03/02/2020', data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}
]

我希望结果是这样的：

data3 = [
{title: '01/02/2020', data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},
{title: '02/02/2020', data:[{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'},{id: 6,location: 'lesboa', city: 'lesboa'},{id: 7,location: 'amesterdam', city: 'amesterdam'},{id:8,location: 'roma', city: 'roma'}]},
{title: '03/02/2020', data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}

我找到了这样的代码（如下），但问题是它每次都会复制我的数据数组中的对象，有时它会复制到 54 次

case HISTORIQUE_SUCCESS:
      const {count, skip, groupedvalue} = action.payload;

      const data1 = [...state.data];

      let data = Object.values(
        [...data1, ...groupedvalue].reduce(
          (acc, curr) => ({
            ...acc,
            [curr.title]:
              curr.title in acc
                ? {...curr, data: [...acc[curr.title].data, ...curr.data]}
                : {...curr},
          }),
          {},
        ),
      );

      return {
        ...state,
        data: skip === 0 ? groupedvalue : data,
        count,
        loader: false,
      };

Answer 1

您拥有的脚本将负责按title 进行分组，但不会按id 保持对象的唯一性。

我倾向于为此使用Map。给定两个输入数组，此函数将返回一个合并的数据数组。为了证明这一点，我还在data2 中添加了id 为4 a 的位置，日期与data 相同：

function merged(data, data2) {
    let arr = data.concat(data2);
    let titles = new Map(arr.map(({title}) => [title, new Map]));
    arr.forEach(({title, data}) => {
        let map = titles.get(title);
        data.forEach(o => map.set(o.id, o));
    });
    return Array.from(titles.entries(), ([title, map]) => ({ title, data: [...map.values()] }) );
}

let data = [{title: '01/02/2020',data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},{title: '02/02/2020',data: [{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'}]}];
let data2 = [{title: '02/02/2020',data:[{id: 6,location: 'lesboa', city: 'lesboa'},{id: 4,location: 'madrid', city: 'madrid'},{id: 7,location: 'amestrdam', city: 'amestrdam'},{id:8,location: 'roma', city: 'roma'}]},{title: '03/02/2020',data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}];

console.log(merged(data, data2));