JavaScript 中从对象数组中提取并优化唯一键值对

本教程详细介绍了如何在JavaScript中处理一个包含多个对象的数组，并从中移除重复的键值对。通过构建一个高效的算法，利用 `reduce` 和一个 `seen` 映射来跟踪已出现的键值组合，最终生成一个仅包含唯一键值对的新对象数组，从而实现数据清洗和优化。

在处理复杂的数据结构时，我们经常会遇到需要对数据进行去重和优化的场景。特别是在 JavaScript 中，当一个数组包含多个对象，并且这些对象内部可能存在重复的键值对时，如何高效地提取出唯一的键值对，成为一个常见的编程挑战。本教程将深入探讨这一问题，并提供一个清晰、专业的解决方案。

问题场景描述

假设我们有一个对象数组，每个对象都包含一组键值对。我们的目标是遍历这个数组，对于每个对象，只保留那些在整个数组中尚未出现过的特定键值对。如果一个 key:value 组合已经存在于之前处理过的对象中，那么当前对象中的该键值对就应该被移除。

考虑以下示例输入数组：

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

const arr1 = [
  {
    "Param1": "20",
    "Param2": "8",
    "Param3": "11",
    "Param4": "4",
    "Param5": "18",
    "Param6": "20",
    "Param7": "8"
  },
  {
    "Param6": "21",
    "Param7": "8", // 注意这里 Param7: "8" 与第一个对象重复
    "Param8": "11",
    "Param9": "4",
    "Param10": "18"
  },
  {
    "Param1": "20", // 注意这里 Param1: "20" 与第一个对象重复
    "Param2": "8",  // 注意这里 Param2: "8" 与第一个对象重复
    "Param3": "10"
  }
];

我们期望的输出结果是：

[
  {
    "Param1": "20",
    "Param2": "8",
    "Param3": "11",
    "Param4": "4",
    "Param5": "18",
    "Param6": "20",
    "Param7": "8"
  },
  {
    "Param6": "21", // Param7: "8" 被移除，因为它在第一个对象中已出现
    "Param8": "11",
    "Param9": "4",
    "Param10": "18"
  },
  {
    "Param3": "10" // Param1: "20" 和 Param2: "8" 被移除
  }
]

核心算法解析

解决此问题的关键在于建立一个有效的机制来跟踪已经“见过”的键值对。我们可以使用一个嵌套的哈希表（或 JavaScript 中的对象）作为 seen 映射，其结构为 { key: { value: boolean } }。

Onlook

专为前端设计师和开发者打造的视觉编辑工具

下载

算法步骤如下：

1. 初始化追踪器： 创建一个名为 seen 的空对象，用于记录所有已经处理过的 key:value 组合。
2. 初始化结果数组： 创建一个名为 result 的空数组，用于存储处理后的新对象。
3. 遍历输入数组： 迭代输入 arr1 中的每一个对象。
4. 遍历对象键值对： 对于当前对象，获取其所有键值对。
5. 检查唯一性并添加：
   • 对于每个 key:value 对，首先检查 seen[key] 是否已存在。如果不存在，则初始化 seen[key] 为一个空对象。
   • 接着，检查 seen[key][value] 是否为 true。如果为 true，表示该 key:value 组合之前已经见过，应从当前对象中忽略。
   • 如果 seen[key][value] 不存在或为 false，则表示这是一个新的、未见过的 key:value 组合。此时，将该键值对添加到当前正在构建的新对象中，并设置 seen[key][value] = true，将其标记为已见。
6. 构建新对象： 将筛选后的键值对重新组合成一个新的对象，并将其添加到 result 数组中。
7. 返回结果： 循环结束后，result 数组即为包含唯一键值对的最终输出。

JavaScript/TypeScript 实现

为了实现上述算法，我们可以利用 Array.prototype.reduce() 方法，它提供了一种简洁且函数式的方式来迭代数组并构建累加器。

type KeyValueObject = Record;

const removeDuplicates = (arr: KeyValueObject[]): KeyValueObject[] => {
    // 使用 reduce 迭代数组，并维护一个累加器 (accumulator)
    // 累加器包含两部分：seen 映射用于追踪已见键值对，和 result 数组用于存储最终结果
    return arr.reduce<{
        seen: Record>; // { param: { value: boolean } } 结构
        result: KeyValueObject[];
    }>(
        (acc, currentItem) => {
            // 对于当前对象，筛选出唯一的键值对
            const uniqueEntries = Object.entries(currentItem).filter(([key, value]) => {
                // 确保 seen[key] 存在，如果不存在则初始化为一个空对象
                acc.seen[key] = acc.seen[key] ?? {}; 

                // 检查当前 key:value 组合是否已经见过
                if (acc.seen[key][value]) {
                    // 如果见过，则过滤掉此键值对 (返回 false)
                    return false;
                }

                // 如果未见过，则标记为已见 (设置 seen[key][value] 为 true)
                acc.seen[key][value] = true;

                // 保留此键值对 (返回 true)
                return true;
            });

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

            // 返回更新后的累加器
            return acc;
        },
        // reduce 的初始值：一个空的 seen 映射和一个空的结果数组
        { seen: {}, result: [] },
    ).result; // 最后返回累加器中的 result 数组
};

代码示例与运行结果

让我们使用提供的 arr1 数组来测试 removeDuplicates 函数：

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 optimizedArr = removeDuplicates(arr1);
console.log(optimizedArr);

运行上述代码，将得到以下输出：

[
  {
    "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. seen 映射的结构： 使用 Record> 这样的嵌套结构 ({ key: { value: boolean } }) 是至关重要的。它允许我们精确地追踪 key 和 value 的组合，而不是仅仅追踪 key 或 value。例如，{ "Param1": { "20": true } } 表示 Param1: "20" 已经见过。
2. ?? 空值合并运算符： acc.seen[key] = acc.seen[key] ?? {}; 这行代码使用了 ES2020 引入的空值合并运算符。它确保在访问 acc.seen[key][value] 之前，acc.seen[key] 已经被初始化为一个对象，避免了因尝试访问 undefined 的属性而导致的错误。
3. 函数式编程： 解决方案采用了 reduce、Object.entries、filter 和 Object.fromEntries 等函数式方法。这种风格使得代码更具可读性、可维护性，并且避免了对原始数据的直接修改（保持了数据不可变性）。
4. 性能考量： 对于非常庞大的数组和对象，嵌套的迭代（数组迭代、对象键值对迭代）可能会有性能开销。然而，对于大多数常见用例，这种方法是高效且易于理解的。如果遇到极端性能瓶颈，可能需要考虑更底层的优化，例如使用 Map 代替普通对象作为 seen 映射，因为 Map 在某些场景下对键值对的操作可能更高效。
5. 类型安全： 示例代码使用了 TypeScript 类型注解（如 KeyValueObject）。这在大型项目中非常推荐，可以提高代码的健壮性和可维护性。

总结

通过本教程，我们学习了如何在 JavaScript 中有效地从对象数组中提取并优化唯一的键值对。核心思想是利用一个 seen 映射来跟踪已处理的 key:value 组合，并结合 Array.prototype.reduce() 等函数式方法来构建一个清晰、高效且易于理解的解决方案。这种技术在数据清洗、状态管理和构建去重逻辑时非常有用，能够帮助开发者维护数据的整洁性和一致性。