ES6 基于键 Typescript 或 Javascript 合并两个数组（数组内部包含另一个数组）答案

【问题标题】：ES6 Merge two arrays (array contains another array inside) based on key Typescript or JavascriptES6 基于键 Typescript 或 Javascript 合并两个数组（数组内部包含另一个数组）
【发布时间】：2019-05-16 11:23:50
【问题描述】：

我想合并两个数组，两个数组里面都包含另一个数组。参考下面两个数组。

const arr1=
[{"projectId":30278,"projectName":null,"details":[{"amount":"9097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}]},{"projectId":37602,"projectName":null,"details":[{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}]}]

const arr2= 
[{"projectId":30278,"projectName":null,"details":[{"amount":"8097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}]},{"projectId":37602,"projectName":null,"details":[{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}]}]

当我使用 ES6 扩展运算符时，两个值都附加到单个数组中。但我想根据该数组中的 prjectId 进行合并。

所以合并后，我需要得到如下结果

const result =
 [{"projectId":30278,"projectName":null,"details":[{"amount":"9097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"},
{"amount":"8097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}
]},
{"projectId":37602,"projectName":null,"details":[{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"},
{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}
]}]

【问题讨论】：

你的 arr1 和 arr2 有语法错误
@krishna 是什么错误
我没有看到您的阵列正在关闭。
编辑了数组。现在两者都是有效的数组。
How to merge two arrays in JavaScript and de-duplicate items的可能重复

标签： javascript reactjs typescript ecmascript-6

【解决方案1】：

const arr1=
[{"projectId":30278,"projectName":null,"details":[{"amount":"9097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}]},{"projectId":37602,"projectName":null,"details":[{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}]}]

const arr2= 
[{"projectId":30278,"projectName":null,"details":[{"amount":"8097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}]},{"projectId":37602,"projectName":null,"details":[{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}]}]

var fullArray = [...arr1,...arr2];
var mergedData ={};
fullArray.forEach(function(data){
  if(mergedData[data.projectId]){
    mergedData[data.projectId]["details"] = mergedData[data.projectId]["details"].concat(data.details)
  } else {
  mergedData[data.projectId] = data;
  }
})
console.log(Object.values(mergedData))

【讨论】：

【解决方案2】：

您可以使用Lodash unionBy function 轻松实现。

const result = _.unionBy(arr1, arr2, 'projectId')

【讨论】：

我们可以通过纯javascript实现吗？而不是自定义脚本
Lodash 是一个开源库，如果您不想直接使用，请随意复制他们的代码。 github.com/lodash/lodash/blob/master/unionBy.js

【解决方案3】：

您也可以在这种情况下尝试这个。

let mergedArr = [];    
let projectIdsArr1 = arr1.map(item => item.projectId);    
arr2.map(outerLoopItem => { 
    if (projectIdsArr1.includes(outerLoopItem.projectId)) {
      let found = arr1.find(innerLoopItem => innerLoopItem.projectId === outerLoopItem.projectId);
      found.details = [...found.details, ...outerLoopItem.details];
      mergedArr.push(found);
    } else mergedArr.push(outerLoopItem);
});
console.log(mergedArr);

【讨论】：