如何按条件合并两个数组？含匹配与不匹配结果场景

我来帮你搞定这两个数组的处理需求，用JavaScript可以这样高效实现：

场景一：仅匹配id的合并结果 #

思路 #

先把bData转换成以id为键的映射对象，这样后续判断id是否存在时不用嵌套循环，能大幅提升性能；接着遍历aData，筛选出在bData中有对应id的项，再把两个对象的属性合并起来。

代码实现 #

const aData = [ { id: 1, title: `bla`}, { id: 2, title: `la`}, { id: 3, title: `lala`} ];
const bData = [ { id: 1, description: `bla`} ];

// 先把bData转成id为键的映射，方便快速查找
const bIdMap = bData.reduce((map, item) => {
  map[item.id] = item;
  return map;
}, {});

// 筛选出匹配id的项，再合并属性
const matchingIdsResult = aData
  .filter(item => bIdMap.hasOwnProperty(item.id))
  .map(item => ({ ...item, ...bIdMap[item.id] }));

console.log(matchingIdsResult);
// 输出：[ { id: 1, title: 'bla', description: 'bla' } ]

场景二：保留aData中id不匹配的对象 #

思路 #

直接复用上面生成的bIdMap，遍历aData时筛选出id不在bIdMap中的项即可，逻辑非常直观。

代码实现 #

// 复用之前创建的bIdMap
const unmathingIdsResult = aData.filter(item => !bIdMap.hasOwnProperty(item.id));

console.log(unmathingIdsResult);
// 输出：[ { id: 2, title: 'la' }, { id: 3, title: 'lala' } ]

补充说明 #

• 用reduce生成映射是为了把查找id的时间复杂度从O(n)降到O(1)，数据量大的时候性能优势会很明显；
• 如果你的运行环境不支持ES6扩展运算符...，合并对象可以换成Object.assign({}, item, bIdMap[item.id])，效果是一样的。

内容的提问来源于stack exchange，提问作者Sergino