如何連接兩個對象數組？

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

在第二次獲取時，我遇到了舊數組和新數組之間的連接問題。 我想合並具有相同標題的那些分組在一個標題中的內容，以及一個數組中的所有數據。 例如，這是第二次獲取的第二個結果：

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));