本教程旨在详细阐述如何在JavaScript中高效处理包含重复键值对的对象数组。通过采用`reduce`方法结合一个`seen`映射表来追踪已处理的键值对，我们可以有效地过滤掉后续对象中出现的重复项。文章将提供清晰的算法思路、具体的代码实现及使用示例，帮助开发者构建一个新数组，其中每个对象仅包含首次出现的独特键值对，从而实现数据的去重和结构优化。
引言：理解问题与目标
在JavaScript开发中，我们经常会遇到需要处理包含复杂数据的数组，其中每个元素都是一个对象。有时，这些对象之间可能存在键值对的重复。例如，在一个对象数组中，如果第一个对象包含"Param1": "20"，而后续某个对象也包含"Param1": "20"，我们的目标是移除后续对象中的这个重复键值对，只保留第一次出现的。这要求我们遍历数组，并对每个对象的键值对进行去重判断，确保最终结果中的每个键值对都是全局唯一的（即在之前的对象中未出现过）。
考虑以下示例输入：
const arr1 = [
{ "Param1": "20", "Param2": "8", "Param3": "11", "Param4": "4", "Param5": "18", "Param6": "20", "Param7": "8" },
{ "Param6": "21", "Param7": "8", "Param8": "11", "Param9": "4", "Param10": "18" },
{ "Param1": "20", "Param2": "8", "Param3": "10" }
];我们期望的输出是：
立即学习“Java免费学习笔记（深入）”；
[
{ "Param1": "20", "Param2": "8", "Param3": "11", "Param4": "4", "Param5": "18", "Param6": "20", "Param7": "8" },
{ "Param6": "21", "Param8": "11", "Param9": "4", "Param10": "18" }, // "Param7": "8" 被移除，因为它在第一个对象中已出现
{ "Param3": "10" } // "Param1": "20" 和 "Param2": "8" 被移除，因为它们在第一个对象中已出现
];注意，去重是基于key和value的组合，并且是顺序敏感的——即如果一个键值对在数组中较早的对象中出现过，它在后续对象中就会被移除。
核心算法思路
为了实现上述目标，我们需要一个机制来追踪所有已经遇到的键值对。我们可以使用一个嵌套的映射结构（或JavaScript对象）来充当这个“已见”集合。
具体算法步骤如下：
- 初始化追踪器： 创建一个名为 seen 的空对象（或 Map），其结构为 { [key: string]: { [value: string]: boolean } }。这个结构将用于记录某个 key 对应某个 value 是否已经出现过。
- 初始化结果数组： 创建一个空的 result 数组，用于存放处理后的对象。
- 遍历输入数组： 逐个处理输入数组中的每个对象。
-
处理当前对象： 对于当前对象，遍历其所有的键值对。
- 对于每个 [key, value] 对：
- 首先，确保 seen 对象中存在 key 对应的内层对象。如果不存在，则初始化为 {}。
- 检查 seen[key][value] 是否为 true。
- 如果为 true，表示这个 key: value 对之前已经出现过，则忽略它（不将其添加到当前正在构建的新对象中）。
- 如果为 false 或 undefined，表示这个 key: value 对是首次出现。将其添加到当前正在构建的新对象中，并在 seen[key][value] 中标记为 true。
- 对于每个 [key, value] 对：
- 构建新对象并添加： 将所有通过筛选的键值对重新组合成一个新的对象，并将其添加到 result 数组中。
- 返回结果： 遍历完成后，返回 result 数组。
示例代码实现
在JavaScript中，Array.prototype.reduce() 方法非常适合这种需要遍历数组并累积结果的场景。我们将使用 reduce 来维护 seen 追踪器和 result 数组。
/**
* 从对象数组中移除重复的键值对。
* 如果一个键值对在数组中较早的对象中出现过，则在后续对象中将其移除。
*
* @param arr 包含待处理对象的数组。每个对象都是一个键值对集合。
* @returns 包含唯一键值对的新对象数组。
*/
const removeDuplicates = (arr: Record<string, string>[]) => {
// 使用 reduce 方法迭代数组并累积结果
return arr.reduce<{
seen: Record<string, Record<string, boolean>>; // 追踪已见键值对的映射
result: Record<string, string>[]; // 存储处理后对象的数组
}>(
(accumulator, currentItem) => {
// 为当前对象创建一个新的对象，只包含唯一的键值对
const uniqueItem = Object.fromEntries(
// 遍历当前对象的键值对，并进行过滤
Object.entries(currentItem).filter(([key, value]) => {
// 确保 seen[key] 存在，如果不存在则初始化为空对象
accumulator.seen[key] = accumulator.seen[key] ?? {};
// 检查当前键值对是否已在 seen 映射中标记为 true
if (accumulator.seen[key][value]) {
// 如果已存在，则过滤掉此键值对 (返回 false)
return false;
}
// 如果是首次出现，则标记为已见 (设置为 true)
accumulator.seen[key][value] = true;
// 保留此键值对 (返回 true)
return true;
}),
);
// 将处理后的唯一对象添加到结果数组中
accumulator.result.push(uniqueItem);
return accumulator;
},
// reduce 的初始值：一个包含空 seen 映射和空 result 数组的对象
{ seen: {}, result: [] },
).result; // 最后返回累加器中的 result 数组
};
// 示例使用
const arr1 = [
{ "Param1": "20", "Param2": "8", "Param3": "11", "Param4": "4", "Param5": "18", "Param6": "20", "Param7": "8" },
{ "Param6": "21", "Param7": "8", "Param8": "11", "Param9": "4", "Param10": "18" },
{ "Param1": "20", "Param2": "8", "Param3": "10" }
];
const uniqueArr = removeDuplicates(arr1);
console.log(uniqueArr);
/*
预期的输出：
[
{ "Param1": "20", "Param2": "8", "Param3": "11", "Param4": "4", "Param5": "18", "Param6": "20", "Param7": "8" },
{ "Param6": "21", "Param8": "11", "Param9": "4", "Param10": "18" },
{ "Param3": "10" }
]
*/代码解析：
- removeDuplicates 函数： 接收一个对象数组作为参数。
-
arr.reduce(...)： 这是核心的迭代和累积过程。
- accumulator (累加器)： 初始值为 { seen: {}, result: [] }。seen 对象用于存储已见的键值对，result 数组用于存储最终处理后的对象。
- currentItem： 当前正在处理的数组中的对象。
- Object.entries(currentItem)： 将当前对象转换为 [key, value] 对的数组。
-
.filter(([key, value]) => { ... })： 对 [key, value] 对进行过滤。
- accumulator.seen[key] = accumulator.seen[key] ?? {};：这是ES2020的空值合并运算符。它确保 accumulator.seen[key] 存在。如果 accumulator.seen[key] 是 null 或 undefined，则将其初始化为一个空对象 {}。
- if (accumulator.seen[key][value]) return false;：检查当前 key: value 对是否已经在 seen 映射中被标记为 true。如果是，则表示它已出现过，filter 返回 false 将其移除。
- accumulator.seen[key][value] = true;：如果当前 key: value 对是首次出现，则在 seen 映射中将其标记为 true，表示已见过。
- return true;：首次出现的键值对通过 filter 筛选。
- Object.fromEntries(...)： 将过滤后的 [key, value] 对数组重新组合成一个新的对象 uniqueItem。
- accumulator.result.push(uniqueItem);： 将新生成的 uniqueItem 添加到结果数组中。
- return accumulator;： 返回更新后的累加器，供下一次迭代使用。
- .result： reduce 方法执行完毕后，我们从最终的累加器中提取 result 数组，即为我们所需的结果。
注意事项与扩展
- 顺序敏感性： 此方案严格遵循输入数组的顺序。如果输入数组的顺序改变，输出结果也可能不同，因为“首次出现”的定义是基于遍历顺序的。
- 值类型： 示例中键值对的值是字符串。对于其他原始数据类型（如数字、布尔值），此方法同样适用，因为它们在JavaScript中可以直接作为对象键或属性值进行比较。但对于非原始值（如对象、数组），value 的比较将是引用比较，而不是深层内容比较。如果需要深层比较，则需要对 value 进行序列化（例如 JSON.stringify(value)）或实现自定义的深层比较逻辑。
-
性能考量：
- 时间复杂度：对于一个包含 N 个对象的数组，每个对象平均有 M 个键值对。reduce 迭代 N 次，每次迭代中 Object.entries 和 filter 都会遍历 M 个键值对。在 filter 内部，对象属性访问（如 seen[key][value]）通常是 O(1) 操作。因此，整体时间复杂度大致为 O(N * M)。
- 空间复杂度：seen 对象可能存储所有唯一的键值对，最坏情况下，如果所有键值对都唯一，则空间复杂度为 O(N * M)。
- TypeScript 类型： 示例代码使用了 TypeScript 类型注解 (Record<string, string>[])，这有助于提高代码的可读性和健壮性。在纯 JavaScript 环境中，可以直接移除类型注解。
总结
通过本教程，我们学习了一种在JavaScript中从对象数组中提取并保留唯一键值对的有效方法。利用 Array.prototype.reduce() 结合一个嵌套的 seen 对象作为追踪器，我们能够灵活且高效地处理复杂的数据去重需求。这种方法不仅清晰地解决了特定问题，也展示了 reduce 在数据转换和聚合方面的强大能力。在实际开发中，理解其顺序敏感性和对不同值类型的处理方式，将帮助我们更好地应用此模式。
