JavaScript：从对象数组中提取并保留唯一键值对

本教程旨在详细阐述如何在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的组合，并且是顺序敏感的——即如果一个键值对在数组中较早的对象中出现过，它在后续对象中就会被移除。

Lumen5

一个在线视频创建平台，AI将博客文章转换成视频

下载

核心算法思路

为了实现上述目标，我们需要一个机制来追踪所有已经遇到的键值对。我们可以使用一个嵌套的映射结构（或JavaScript对象）来充当这个“已见”集合。

具体算法步骤如下：

1. 初始化追踪器： 创建一个名为 seen 的空对象（或 Map），其结构为 { [key: string]: { [value: string]: boolean } }。这个结构将用于记录某个 key 对应某个 value 是否已经出现过。
2. 初始化结果数组： 创建一个空的 result 数组，用于存放处理后的对象。
3. 遍历输入数组： 逐个处理输入数组中的每个对象。
4. 处理当前对象： 对于当前对象，遍历其所有的键值对。
   • 对于每个 [key, value] 对：
     • 首先，确保 seen 对象中存在 key 对应的内层对象。如果不存在，则初始化为 {}。
     • 检查 seen[key][value] 是否为 true。
       • 如果为 true，表示这个 key: value 对之前已经出现过，则忽略它（不将其添加到当前正在构建的新对象中）。
       • 如果为 false 或 undefined，表示这个 key: value 对是首次出现。将其添加到当前正在构建的新对象中，并在 seen[key][value] 中标记为 true。
5. 构建新对象并添加： 将所有通过筛选的键值对重新组合成一个新的对象，并将其添加到 result 数组中。
6. 返回结果： 遍历完成后，返回 result 数组。

示例代码实现

在JavaScript中，Array.prototype.reduce() 方法非常适合这种需要遍历数组并累积结果的场景。我们将使用 reduce 来维护 seen 追踪器和 result 数组。

/**
 * 从对象数组中移除重复的键值对。
 * 如果一个键值对在数组中较早的对象中出现过，则在后续对象中将其移除。
 *
 * @param arr 包含待处理对象的数组。每个对象都是一个键值对集合。
 * @returns 包含唯一键值对的新对象数组。
 */
const removeDuplicates = (arr: Record[]) => {
    // 使用 reduce 方法迭代数组并累积结果
    return arr.reduce<{
        seen: Record>; // 追踪已见键值对的映射
        result: Record[]; // 存储处理后对象的数组
    }>(
        (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" }
]
*/

代码解析：

1. removeDuplicates 函数： 接收一个对象数组作为参数。
2. 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;： 返回更新后的累加器，供下一次迭代使用。
3. .result： reduce 方法执行完毕后，我们从最终的累加器中提取 result 数组，即为我们所需的结果。

注意事项与扩展

1. 顺序敏感性： 此方案严格遵循输入数组的顺序。如果输入数组的顺序改变，输出结果也可能不同，因为“首次出现”的定义是基于遍历顺序的。
2. 值类型： 示例中键值对的值是字符串。对于其他原始数据类型（如数字、布尔值），此方法同样适用，因为它们在JavaScript中可以直接作为对象键或属性值进行比较。但对于非原始值（如对象、数组），value 的比较将是引用比较，而不是深层内容比较。如果需要深层比较，则需要对 value 进行序列化（例如 JSON.stringify(value)）或实现自定义的深层比较逻辑。
3. 性能考量：
   • 时间复杂度：对于一个包含 N 个对象的数组，每个对象平均有 M 个键值对。reduce 迭代 N 次，每次迭代中 Object.entries 和 filter 都会遍历 M 个键值对。在 filter 内部，对象属性访问（如 seen[key][value]）通常是 O(1) 操作。因此，整体时间复杂度大致为 O(N * M)。
   • 空间复杂度：seen 对象可能存储所有唯一的键值对，最坏情况下，如果所有键值对都唯一，则空间复杂度为 O(N * M)。
4. TypeScript 类型： 示例代码使用了 TypeScript 类型注解 (Record[])，这有助于提高代码的可读性和健壮性。在纯 JavaScript 环境中，可以直接移除类型注解。

总结

通过本教程，我们学习了一种在JavaScript中从对象数组中提取并保留唯一键值对的有效方法。利用 Array.prototype.reduce() 结合一个嵌套的 seen 对象作为追踪器，我们能够灵活且高效地处理复杂的数据去重需求。这种方法不仅清晰地解决了特定问题，也展示了 reduce 在数据转换和聚合方面的强大能力。在实际开发中，理解其顺序敏感性和对不同值类型的处理方式，将帮助我们更好地应用此模式。