本教程详细讲解如何在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数组的reduce、find方法以及ES6的展开运算符（...）。
let arr1 = [
{ id: "123", name: "John" },
{ id: "345", name: "Sara" },
{ id: "542", name: "Jack" },
];
let arr2 = [
{ id: "123", phone: "021456" },
{ id: "345", phone: "0911256" },
];
let arr3 = arr2.reduce((accumulator, itemFromArr2) => {
// 在 arr1 中查找与当前 arr2 项 id 匹配的对象
const itemFromArr1 = arr1.find(item => item.id === itemFromArr2.id);
// 如果找到匹配项，则合并属性并添加到累加器
if (itemFromArr1) {
// 使用展开运算符合并属性。
// ...itemFromArr2 会先添加 arr2 的属性 (如 id, phone)。
// ...itemFromArr1 会后添加 arr1 的属性 (如 id, name)。
// 如果有同名属性，后出现的会覆盖先出现的。
// 在本例中，id相同，phone和name是各自独有的，所以合并结果正确。
accumulator.push({ ...itemFromArr2, ...itemFromArr1 });
}
return accumulator;
}, []); // 初始累加器为一个空数组
console.log(arr3);
/*
输出:
[
{ id: "123", phone: "021456", name: "John" },
{ id: "345", phone: "0911256", name: "Sara" }
]
*/属性覆盖顺序： 展开运算符的顺序很重要。{ ...objA, ...objB }意味着objB的属性会覆盖objA中同名属性。根据你的业务需求，可能需要调整这个顺序。
健壮性： 如果某些对象没有id属性，item.id === itemFromArr2.id的比较会返回false，这些对象将不会被匹配，这通常是期望的行为。
性能考量（针对大数据集）： 上述解决方案的时间复杂度大致为O(N * M)，其中N是arr2的长度，M是arr1的长度。这是因为对于arr2中的每个元素，我们都可能需要遍历arr1来查找匹配项。 对于小型数组，这种方法足够高效且易于理解。但如果数组非常大（例如，数万或数十万个元素），O(N * M)的复杂度可能会导致性能瓶颈。
优化方案：使用Map或Object进行索引 为了提高性能，我们可以将其中一个数组（通常是较大的那个）转换为一个Map或普通JavaScript对象，以实现O(1)的查找时间。这样，整体时间复杂度可以优化到O(N + M)。
// 优化后的解决方案（使用 Map）
let arr1Optimized = [
{ id: "123", name: "John" },
{ id: "345", name: "Sara" },
{ id: "542", name: "Jack" },
];
let arr2Optimized = [
{ id: "123", phone: "021456" },
{ id: "345", phone: "0911256" },
];
// 1. 将 arr1 转换为一个 Map，以便通过 id 快速查找 (O(M) 时间复杂度)
const arr1Map = new Map(arr1Optimized.map(obj => [obj.id, obj]));
// 2. 遍历 arr2，并在 Map 中查找匹配项 (O(N) 时间复杂度)
const arr3Optimized = arr2Optimized.reduce((accumulator, itemFromArr2) => {
const itemFromArr1 = arr1Map.get(itemFromArr2.id); // O(1) 查找
if (itemFromArr1) {
accumulator.push({ ...itemFromArr2, ...itemFromArr1 });
}
return accumulator;
}, []);
console.log(arr3Optimized);
/*
输出:
[
{ id: "123", phone: "021456", name: "John" },
{ id: "345", phone: "0911256", name: "Sara" }
]
*/这个优化方案首先通过map方法将arr1转换为一个Map，其中键是对象的id，值是整个对象。然后，在reduce遍历arr2时，可以直接通过arr1Map.get(itemFromArr2.id)以接近常数时间的速度查找匹配项，从而显著提升大数据集下的性能。
在JavaScript中合并两个对象数组并基于共同键进行筛选是一个常见的任务。通过巧妙地结合使用reduce、find和展开运算符，我们可以构建出清晰且功能正确的解决方案。对于性能要求较高的场景，通过预先构建Map或Object索引的方式，可以将时间复杂度从O(N * M)优化到O(N + M)，从而处理更大规模的数据集。理解这些方法及其适用场景，能够帮助开发者编写更高效、更健壮的JavaScript代码。
以上就是JavaScript中基于共同键高效合并与筛选对象数组的教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
309
收藏
