JS数组去重方法全解析

在前端开发中，JavaScript数组去重是常见需求，但并非简单一个`Set`就能解决所有问题。本文深入探讨了多种数组去重方法，强调**没有绝对最佳方案，只有最适合当前情境的选择**。针对基本数据类型，`Set`以其简洁性和O(n)的时间复杂度成为首选。而对于对象数组，则需借助`reduce`结合`Map`或普通对象，利用唯一属性作为键来实现逻辑去重，其中`Map`能保持插入顺序且键类型更灵活。性能方面，小规模数组差异不大，中大规模下`Set`处理基本类型最优，对象数组则推荐`Map`或对象方案，避免`filter+indexOf`的O(n²)复杂度。本文旨在帮助开发者根据实际场景，选择最高效、最合适的JavaScript数组去重方案，并提供清晰的代码示例和性能考量，助力提升前端开发效率和用户体验。

JavaScript数组去重没有绝对最佳方法，只有最适合当前情境的方案，核心是通过机制判断元素唯一性并构建新数组；针对基本数据类型，Set因简洁性和O(n)时间复杂度成为首选，代码可读且性能优异；对于对象数组，因Set仅比较引用地址，需使用reduce结合Map或普通对象，利用唯一属性（如id）作为键来保证逻辑去重，其中Map能保持插入顺序且键类型更灵活；性能方面，小规模数组可忽略差异，中大规模下Set处理基本类型最优，对象数组则推荐Map或对象方案避免O(n²)的filter+indexOf方法，确保高效去重并维持代码清晰。

JavaScript数组去重，这在前端开发里简直是老生常谈了，但说实话，它远不止一个Set那么简单。不同的场景、不同的数据类型，甚至是不同的性能要求，都会让我们在选择去重方案时有那么一点点“纠结”。在我看来，没有绝对的“最佳”方法，只有“最适合”当前情境的方案。核心无非是利用某种机制来判断元素的唯一性，然后构建一个新的、不含重复元素的数组。

解决方案

谈到去重，我们手头可用的工具其实挺多的，从ES6的新特性到一些传统迭代方法，各有千秋。

1. 利用 Set 对象 这是最简洁、最现代的方法，尤其是处理基本数据类型（数字、字符串、布尔值、undefined、null）时。Set 集合本身就只存储唯一的值。

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

const strings = ['apple', 'banana', 'apple', 'orange'];
const uniqueStrings = Array.from(new Set(strings));
console.log(uniqueStrings); // ['apple', 'banana', 'orange']

2. 使用 filter 结合 indexOf 或 includes 这是一种非常经典的迭代方法，思路是遍历数组，只保留第一次出现的元素。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((item, index, self) => {
    return self.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

// 或者用 includes，逻辑类似
const uniqueArrIncludes = arr.filter((item, index, self) => {
    return index === 0 || !self.slice(0, index).includes(item);
});
console.log(uniqueArrIncludes); // [1, 2, 3, 4, 5]

indexOf 的方式更常见，它检查当前元素在数组中第一次出现的位置是否就是当前索引。如果不是，说明之前已经出现过了。

3. 利用 reduce 结合 Map 或普通对象 这种方法在处理对象数组去重时非常有用，因为它允许你根据对象的某个特定属性来判断唯一性，而不是对象引用本身。

// 使用 Map
const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 1, name: 'Alice' }, // 重复
    { id: 3, name: 'Charlie' }
];

const uniqueUsersMap = Array.from(
    users.reduce((map, user) => {
        if (!map.has(user.id)) {
            map.set(user.id, user);
        }
        return map;
    }, new Map()).values()
);
console.log(uniqueUsersMap);
/*
[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]
*/

// 使用普通对象
const uniqueUsersObj = Object.values(
    users.reduce((acc, user) => {
        acc[user.id] = user; // 后面出现的会覆盖前面同id的
        return acc;
    }, {})
);
console.log(uniqueUsersObj);
/*
[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]
*/

reduce 配合 Map 的方式能够保持原始元素的顺序，而普通对象因为键值对无序，可能无法保证原始顺序。

为什么Set是现代JavaScript去重的首选？

我个人觉得，Set之所以能成为现代JavaScript去重中的“明星”，主要是因为它实在太简洁了。一行代码就能搞定，这对于日常开发来说，效率提升是显而易见的。它的设计初衷就是为了存储不重复的值，所以用它来去重简直是顺理成章。

首先，代码可读性极高。new Set(arr) 这种写法，一眼就能看出它的意图，不需要额外的逻辑判断。然后 ... 扩展运算符或者 Array.from() 又能很方便地把它转回数组。这比写一个 filter 加上 indexOf 的回调函数要直观得多。

其次，性能表现优秀。对于基本数据类型，Set 的内部实现通常是哈希表，这意味着添加和检查元素是否存在的时间复杂度接近 O(1)。所以，即使是处理大规模的基本类型数组，Set 的表现也相当出色，远超 O(n^2) 的 indexOf 方案。当然，这只是针对基本类型，后面我们会聊到对象。

不过，Set 也有它的局限性。它判断值是否重复是基于“值相等”的原则。对于基本类型，这没问题。但对于对象，Set 判断的是对象的引用地址。也就是说，两个内容完全相同的不同对象，在 Set 看来也是两个不同的元素。

const objArr = [{a:1}, {a:2}, {a:1}];
const uniqueObjArr = [...new Set(objArr)];
console.log(uniqueObjArr); // [{a:1}, {a:2}, {a:1}] - 并没有去重，因为它们是不同的引用

所以，如果你的数组里全是基本类型，或者你根本不关心对象去重的问题，那么 Set 绝对是你的首选。

处理复杂对象数组去重时，有哪些实用技巧？

在实际项目里，我们经常会遇到数组里装的是一个个对象的情况，比如用户列表、商品信息等等。这时候，Set 就不那么给力了，因为它只认对象的内存地址。我们需要的，往往是根据对象内部的某个或某几个属性来判断“唯一性”。

这里，Map 对象或者一个普通的 JavaScript 对象就能派上大用场了。它们的核心思路都是利用键值对的唯一性。

技巧一：利用 Map 对象存储唯一标识

Map 比普通对象更强大的一点是它的键可以是任何类型，而且能保持插入顺序。我们可以遍历对象数组，然后用每个对象的唯一ID（或者你认为可以代表其唯一性的属性组合）作为 Map 的键，对象本身作为值。

const products = [
    { id: 'p001', name: 'Laptop', price: 1200 },
    { id: 'p002', name: 'Mouse', price: 25 },
    { id: 'p001', name: 'Laptop', price: 1250 }, // id重复，但价格不同
    { id: 'p003', name: 'Keyboard', price: 75 }
];

const uniqueProducts = Array.from(
    products.reduce((map, product) => {
        // 关键：用id作为Map的key，Map会自动处理key的唯一性
        // 如果key已存在，新的值会覆盖旧的值。这里我们只在key不存在时才添加
        if (!map.has(product.id)) {
            map.set(product.id, product);
        }
        return map;
    }, new Map()).values()
);
console.log(uniqueProducts);
/*
[
  { id: 'p001', name: 'Laptop', price: 1200 }, // 注意这里保留的是第一次出现的p001
  { id: 'p002', name: 'Mouse', price: 25 },
  { id: 'p003', name: 'Keyboard', price: 75 }
]
*/

如果想保留后面出现的重复项，只需将 if (!map.has(product.id)) 判断移除即可，map.set(product.id, product) 会自动覆盖。

技巧二：利用普通对象属性作为唯一标识

这和 Map 的思路很像，只是用普通对象的属性来做键。但要注意，普通对象的键只能是字符串或 Symbol。

const articles = [
    { slug: 'js-dedupe', title: 'JS去重', author: 'Leo' },
    { slug: 'react-hooks', title: 'React Hooks', author: 'Anna' },
    { slug: 'js-dedupe', title: 'JS去重进阶', author: 'Leo' } // slug重复
];

const uniqueArticles = Object.values(
    articles.reduce((acc, article) => {
        // 利用slug作为键，后面的同slug会覆盖前面的
        acc[article.slug] = article;
        return acc;
    }, {})
);
console.log(uniqueArticles);
/*
[
  { slug: 'js-dedupe', title: 'JS去重进阶', author: 'Leo' }, // 保留了后面出现的
  { slug: 'react-hooks', title: 'React Hooks', author: 'Anna' }
]
*/

这种方法简洁，但有个小问题：它会保留最后一个出现的重复项。如果你需要保留第一个，那还是 Map 配合 if (!map.has(key)) 更灵活。另外，普通对象无法保证键的顺序，所以结果数组的顺序可能与原始数组不同。

性能考量：在大量数据面前，如何选择最合适的去重方法？

当我们面对的数组规模达到几万、几十万甚至上百万时，性能就不是一个可以忽略的问题了。这时，选择一个合适的去重方法，可能直接决定了你的页面会不会卡顿，或者后端接口会不会超时。

在我看来，性能上的选择，主要看两个方面：数据类型和算法复杂度。

1. 基本数据类型（数字、字符串等）

   • Set 方法：这是毫无疑问的王者。它的内部实现通常是哈希表，平均时间复杂度接近 O(n)。这意味着无论数组多大，它都能以非常高的效率完成去重。对于大规模基本类型数组，这是我的首选。
   • filter + indexOf：这个方法在小规模数组时看起来很优雅，但它的时间复杂度是 O(n^2)。因为 indexOf 在每次迭代时都要遍历数组的一部分。想象一下，一个10万元素的数组，100000 * 100000 是一个天文数字。所以，对于大数据量，坚决避免这种方式。

2. 复杂对象数组

   • Map 或 Object 结合 reduce：这些方法的平均时间复杂度是 O(n)。它们通过一个哈希结构（Map 或普通对象）来存储已经处理过的唯一键，每次查找和插入都是常数时间。这使得它们在处理大规模对象数组时表现出色。
     • Map 在键值是对象或需要保持插入顺序时更优。
     • 普通对象在键是字符串且对顺序不敏感时，也能提供类似性能，但要注意键名冲突的风险（例如，'1' 和 1 在对象键中都是字符串 '1'）。

一个不那么严谨的总结：

• 小规模数组（几百以内）：其实怎么去重都行，可读性、代码简洁度优先。Set 依然是首选，filter + indexOf 也无伤大雅。
• 中等规模数组（几千到几万）：
  • 基本类型：Set 独领风骚。
  • 对象数组：Map 或 Object 方案。
• 大规模数组（几万以上）：
  • 基本类型：Set 是唯一且最佳选择。
  • 对象数组：Map 或 Object 方案，确保你的唯一键生成逻辑是高效的。

最后，一个小的提醒：在实际项目中，如果去重逻辑特别复杂，或者性能要求极高，可以考虑对数据进行预处理，或者利用Web Worker来避免阻塞主线程。但对于大多数前端去重场景，上述方法已经足够应对了。

到这里，我们也就讲完了《JS数组去重方法全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于性能,map,set,reduce,JavaScript数组去重的知识点！