JS数组去重有哪些方法-js教程-PHP中文网

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

JS数组去重有哪些方法

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

登录后复制

对象存储唯一标识

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

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))

登录后复制

更灵活。另外，普通对象无法保证键的顺序，所以结果数组的顺序可能与原始数组不同。

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

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

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

基本数据类型（数字、字符串等）
- Set
  登录后复制
  方法：这是毫无疑问的王者。它的内部实现通常是哈希表，平均时间复杂度接近
```
O(n)
```
  登录后复制
  。这意味着无论数组多大，它都能以非常高的效率完成去重。对于大规模基本类型数组，这是我的首选。
- filter
  登录后复制
  +
  indexOf
  登录后复制
  ：这个方法在小规模数组时看起来很优雅，但它的时间复杂度是
```
O(n^2)
```
  登录后复制
  。因为
```
indexOf
```
  登录后复制
  在每次迭代时都要遍历数组的一部分。想象一下，一个10万元素的数组，
```
100000 * 100000
```
  登录后复制
  是一个天文数字。所以，对于大数据量，坚决避免这种方式。
复杂对象数组
- Map
  登录后复制
  或
  Object
  登录后复制
  结合
  reduce
  登录后复制
  ：这些方法的平均时间复杂度是
```
O(n)
```
  登录后复制
  。它们通过一个哈希结构（
```
Map
```
  登录后复制
  或普通对象）来存储已经处理过的唯一键，每次查找和插入都是常数时间。这使得它们在处理大规模对象数组时表现出色。
  - ```
  Map
```
  登录后复制
  在键值是对象或需要保持插入顺序时更优。
- 普通对象在键是字符串且对顺序不敏感时，也能提供类似性能，但要注意键名冲突的风险（例如，
```
  '1'
```
  登录后复制
  和
```
  1
```
  登录后复制
  在对象键中都是字符串
```
  '1'
```
  登录后复制
  ）。

一个不那么严谨的总结：

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