JavaScript Set如何去除数组中的重复项？

Question

在JavaScript开发中，如何高效去除数组中的重复项是一个常见需求。使用Set对象是目前最简洁和高效的方法之一。但实际应用中可能会遇到一些问题，例如：当数组中包含复杂数据类型（如对象或数组）时，Set的去重机制是否仍然有效？ Set通过值的唯一性来存储数据，对于基本数据类型（如字符串、数字），它能很好地去重。然而，对于引用数据类型（如对象、数组），Set判断的是引用地址而非内容，因此即使两个对象内容相同，Set也会视其为不同元素。 解决这一问题的方法是先将复杂数据类型序列化（如用JSON.stringify），再利用Set去重，最后根据需要反序列化还原数据。这种方法虽然可行，但在性能和适用场景上需谨慎评估。

Answer 1

JavaScript数组去重的深入解析

1. 基础概念：Set对象在数组去重中的一般应用

在JavaScript中，去除数组中的重复项是一个常见的需求。使用Set对象是目前最简洁和高效的方法之一。对于基本数据类型（如字符串、数字），Set能够很好地去重。

例如：

const arr = [1, 2, 3, 2, 4, 1];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // 输出: [1, 2, 3, 4]

然而，当数组中包含复杂数据类型（如对象或数组）时，问题就变得复杂了。

2. 深入分析：Set对复杂数据类型的处理机制

Set通过值的唯一性来存储数据。对于引用数据类型（如对象、数组），Set判断的是引用地址而非内容。这意味着即使两个对象的内容相同，Set也会视其为不同的元素。

以下是一个例子：

const arr = [{id: 1}, {id: 1}, {id: 2}];
const set = new Set(arr);
console.log([...set]); 
// 输出: [{id: 1}, {id: 1}, {id: 2}]，第二个{id: 1}仍然存在

这是因为Set只比较引用地址，而不是对象的实际内容。

3. 解决方案：序列化与反序列化

解决这一问题的一种方法是先将复杂数据类型序列化（如使用JSON.stringify），再利用Set去重，最后根据需要反序列化还原数据。

以下是实现步骤：

1. 将数组中的每个对象转换为字符串形式。
2. 使用Set去重。
3. 将去重后的字符串数组转换回原始对象形式。

代码示例：

const arr = [{id: 1}, {id: 1}, {id: 2}];
const stringifiedArr = arr.map(item => JSON.stringify(item));
const uniqueStringifiedArr = [...new Set(stringifiedArr)];
const uniqueArr = uniqueStringifiedArr.map(item => JSON.parse(item));
console.log(uniqueArr); // 输出: [{id: 1}, {id: 2}]

4. 性能与适用场景评估

虽然上述方法可行，但在性能和适用场景上需谨慎评估。序列化和反序列化过程会带来额外的计算开销，尤其在处理大规模数据时可能影响性能。

以下表格对比了不同方法的优缺点：

方法	优点	缺点
直接使用Set	简单、高效	无法处理复杂数据类型
序列化+Set	可以处理复杂数据类型	性能开销较大

5. 流程图：复杂数据类型去重的整体流程

以下是整个复杂数据类型去重的流程图：

graph TD;
    A[输入数组] --> B{是否包含复杂数据类型};
    B --是--> C[序列化];
    B --否--> D[直接使用Set];
    C --> E[使用Set去重];
    D --> E;
    E --> F[反序列化];
    F --> G[输出结果];