JavaScript中基于共同键高效合并与筛选对象数组的教程

本教程详细讲解如何在javascript中合并两个对象数组，仅保留那些具有相同唯一标识符（如id）的元素，并将其属性进行整合。文章将通过reduce、find和展开运算符（...）的组合，提供一种高效且健壮的解决方案，并讨论常见的误区及性能优化策略。

在现代Web开发中，我们经常需要处理来自不同数据源的对象数组，并根据某个共同的键（例如id）将它们关联起来。一个常见的需求是，只保留那些在两个数组中都存在匹配项的对象，并将它们的属性合并成一个新的对象。

理解需求

假设我们有两个对象数组，arr1和arr2：

let arr1 = [
  { id: "123", name: "John" },
  { id: "345", name: "Sara" },
  { id: "542", name: "Jack" },
];

let arr2 = [
  { id: "123", phone: "021456" },
  { id: "345", phone: "0911256" },
];

登录后复制

我们的目标是生成一个新的数组arr3，它只包含id在arr1和arr2中都存在的对象。对于匹配的对象，我们需要将其所有属性合并。例如，期望的arr3应为：

let arr3 = [
  { id: "123", phone: "021456", name: "John" },
  { id: "345", phone: "0911256", name: "Sara" },
];

登录后复制

注意，arr1中id为"542"的对象没有在arr2中找到匹配项，因此它不应出现在最终结果中。

立即学习“Java免费学习笔记（深入）”；

常见误区与挑战

初学者可能会尝试使用基于索引的合并方法，例如map函数结合数组索引：

let arr3_incorrect = arr1.map((item, i) => Object.assign({}, item, arr2[i]));
console.log(arr3_incorrect);

登录后复制

这种方法的问题在于，它假设两个数组的顺序和长度完全匹配，并且索引i对应的id也相同。然而，在实际应用中，这通常是不成立的。上述代码的输出会包含arr1中所有项，并且由于arr2长度不足，会导致某些合并结果不正确或包含undefined属性，甚至将不匹配的id对象错误地合并。例如，arr1中id为"542"的Jack会被错误地与arr2中索引为2（即undefined）的项合并，这显然不符合我们的需求。

标签： javascript es6 java 大数据 回调函数 性能瓶颈 red