JavaScript对象数组中提取唯一键值对的实用指南

本文探讨如何在javascript对象数组中，识别并移除跨对象重复的键值对。通过构建一个状态跟踪器（seen map），我们能够遍历数组中的每个对象及其属性，仅保留每个唯一键值组合的首次出现，从而生成一个优化后的新数组，确保每个键值对在其首次出现后不再重复。此方法提供了一种高效且结构化的数据去重策略，适用于需要精简数据结构或优化存储的应用场景。

引言：处理对象数组中的键值对重复问题

在JavaScript开发中，我们经常会遇到需要处理包含多个对象的数组。这些对象可能具有不同的结构，但有时会包含相同的键值对。例如，{ "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"
  }
];

我们的目标是处理 arr1，使其结果如下所示，其中重复的键值对（如 Param1: 20、Param2: 8、Param7: 8 等）在其首次出现后被移除：

const expectedResult = [
  {
    "Param1": "20",
    "Param2": "8",
    "Param3": "11",
    "Param4": "4",
    "Param5": "18",
    "Param6": "20",
    "Param7": "8"
  },
  {
    "Param6": "21",
    "Param8": "11",
    "Param9": "4",
    "Param10": "18"
  },
  {
    "Param3": "10"
  }
];

从 expectedResult 中可以看出，arr1 中第一个对象包含了 Param1: 20 和 Param2: 8。在第三个对象中，由于 Param1: 20 和 Param2: 8 已经出现过，它们被移除了，只保留了 Param3: 10。同样，Param7: 8 在第一个对象中出现，在第二个对象中被移除。

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

白瓜AI

白瓜AI，一个免费图文AI创作工具，支持 AI 仿写，图文生成，敏感词检测，图片去水印等等。

下载

核心算法与实现思路

要实现上述去重逻辑，我们需要一个机制来“记住”所有已经处理过的键值对。当遍历到新的键值对时，我们检查它是否已经出现过。如果出现过，则忽略；否则，保留并将其标记为已出现。

算法步骤：

1. 初始化跟踪器： 创建一个名为 seen 的对象（或 Map）作为跟踪器。seen 的结构可以设计为 { key: { value: boolean } }，用于记录某个键的特定值是否已经出现过。
2. 初始化结果数组： 创建一个空数组 result，用于存储去重后的新对象。
3. 遍历输入数组： 迭代 arr1 中的每一个对象。
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() 方法来优雅地实现这个算法，因为它允许我们在遍历数组的同时维护一个累加器状态（即我们的 seen 跟踪器和 result 数组）。

type KeyValueObject = Record; // 定义对象类型，键和值均为字符串

const removeDuplicates = (arr: KeyValueObject[]): KeyValueObject[] => {
    // 使用 reduce 方法遍历数组并维护状态
    return arr.reduce<{
        seen: Record>; // 跟踪器：记录已见的键值对
        result: KeyValueObject[];                   // 结果数组：存储去重后的对象
    }>(
        (accumulator, currentItem) => {
            // 对于当前对象，筛选其键值对
            const uniqueEntries = Object.entries(currentItem).filter(([key, value]) => {
                // 确保 seen[key] 存在，如果不存在则初始化为空对象
                accumulator.seen[key] = accumulator.seen[key] ?? {};

                // 检查当前键值对是否已见过
                if (accumulator.seen[key][value]) {
                    return false; // 已见过，过滤掉
                }

                // 未见过，标记为已见过
                accumulator.seen[key][value] = true;
                return true; // 保留此键值对
            });

            // 将筛选后的键值对重新组合成一个新对象，并添加到结果数组
            accumulator.result.push(Object.fromEntries(uniqueEntries));

            return accumulator; // 返回更新后的累加器
        },
        // reduce 的初始值
        { 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 processedArr = removeDuplicates(arr1);
console.log(processedArr);
/*
输出:
[
  {
    "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. Array.prototype.reduce()： 这是实现核心逻辑的关键。
   • 累加器 (accumulator)： reduce 的第一个参数是一个回调函数，它接收一个累加器和当前处理的元素。这里的累加器是一个对象，包含两个属性：
     • seen: 这是一个嵌套的对象，用于存储已见的键值对。例如，seen['Param1']['20'] = true 表示 Param1: 20 这个键值对已经出现过。
     • result: 这是一个数组，用于收集最终去重后的对象。
   • 初始值 { seen: {}, result: [] }： reduce 的第二个参数是累加器的初始状态。
3. Object.entries(currentItem).filter(...)：
   • Object.entries(currentItem) 将当前对象转换为一个包含 [key, value] 对的数组。
   • filter() 方法用于遍历这些键值对，并根据条件决定是否保留它们。
4. accumulator.seen[key] = accumulator.seen[key] ?? {};：
   • 这是JavaScript的空值合并运算符 (??) 的用法。它确保 accumulator.seen[key] 总是被初始化为一个对象。如果 accumulator.seen[key] 是 null 或 undefined，它会被赋值为一个新的空对象 {}。这样可以避免在访问 accumulator.seen[key][value] 时出现错误。
5. if (accumulator.seen[key][value]) return false;：
   • 如果 accumulator.seen[key][value] 已经为 true，说明这个键值对已经处理过，filter 回调返回 false，该键值对将被移除。
6. accumulator.seen[key][value] = true; return true;：
   • 如果键值对是首次出现，将其在 seen 跟踪器中标记为 true，并让 filter 回调返回 true，表示保留该键值对。
7. Object.fromEntries(uniqueEntries)： 将 filter 筛选后得到的 [key, value] 数组重新转换回一个JavaScript对象。
8. accumulator.result.push(...)： 将新生成的对象添加到 result 数组中。
9. return accumulator;： 在每次 reduce 迭代结束时，返回更新后的累加器，以便下一次迭代使用。
10. .result： 最后，从 reduce 返回的最终累加器对象中提取 result 数组，即为最终去重后的结果。

注意事项与扩展

• 数据类型限制： 当前实现假定对象的值都是字符串类型，因此可以直接作为 seen 对象的键。如果值是数字、布尔值或其他基本类型，此方法也适用。然而，如果值是复杂类型（如对象、数组），则需要更复杂的比较逻辑（例如，深度比较或序列化为字符串）才能正确地进行去重。
• 性能考量： 对于非常大的数组和/或包含大量键的对象，此方法的时间复杂度大致为 O(N * K)，其中 N 是数组的长度，K 是平均每个对象的键的数量。这通常是处理此类问题的有效方法。
• 键值对的唯一性定义： 本教程中“唯一”的定义是 key 和 value 的组合唯一。例如，{ "Param1": "20" } 和 { "Param1": "21" } 被视为两个不同的键值对。
• 保留顺序： 此方法会保留原始数组中对象的相对顺序，并且每个对象内部键值对的顺序也可能被 Object.entries 和 Object.fromEntries 影响（虽然在现代JavaScript中，对象属性的顺序通常是可预测的）。

总结

通过使用 Array.prototype.reduce() 结合一个状态跟踪器（seen 对象），我们能够高效地从JavaScript对象数组中移除重复的键值对。这种方法不仅解决了数据去重的问题，还提供了一个清晰、可维护的解决方案，适用于各种需要数据清理和优化的场景。理解并掌握这种模式，对于处理复杂数据结构和编写健壮的JavaScript代码至关重要。