怎么利用JavaScript实现数组去重的多种方法？-js教程-PHP中文网

数组去重的核心是提取唯一元素并保持顺序，常用方法包括Set、filter结合indexOf、reduce及哈希表。Set性能最优且代码简洁，适合基本类型；对象去重推荐基于唯一属性（如id）使用Map或Set记录已见值；复杂逻辑可用自定义比较函数配合findIndex或reduce。性能上，Set和哈希表为O(n)，优于filter+indexOf的O(n²)。选择时需权衡数据类型、规模、兼容性、可读性及是否需保持顺序，无统一最优方案，应依场景而定。

怎么利用javascript实现数组去重的多种方法？

JavaScript数组去重，说白了就是从一个数组里找出那些独一无二的元素，然后把它们重新组合成一个新的数组。这事儿在前端开发里挺常见的，比如处理后端返回的重复数据，或者用户输入时进行校验。实现方法有很多种，各有各的脾气和适用场景，没有哪个是绝对的“最好”，只有最适合你当前需求的那一个。

解决方案

在我看来，处理数组去重，我们手里有几把趁手的工具，从简洁优雅到灵活强大，都能找到对应的方案。

利用Set对象

这是ES6引入的一个非常简洁且高效的方法。Set 对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。它的去重能力是内置的，用起来特别顺手。

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

const originalArray = [1, 2, 2, 3, 'a', 'a', undefined, undefined, null, null, {}, {}];

// 最直接的方式
const uniqueArrayBySet = [...new Set(originalArray)];
console.log(uniqueArrayBySet);
// 输出: [1, 2, 3, "a", undefined, null, {}, {}]
// 注意：对于对象字面量 {}，Set会把它们当作不同的引用，所以会保留两个。

登录后复制

我个人非常喜欢Set，因为它代码量少，意图明确，而且在现代浏览器里性能也相当不错。但要注意，它默认是基于值和引用的唯一性判断，对于 {} 这种对象字面量，即使内容一样，只要引用不同，Set 也会认为它们是不同的。

使用filter()和indexOf()

这是在ES6之前比较常见的一种做法，理解起来也很直观。filter()方法会创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。indexOf()则返回数组中第一个匹配元素的索引。

const originalArray = [1, 2, 2, 3, 'a', 'a', undefined, undefined, null, null];

const uniqueArrayByFilter = originalArray.filter((item, index, self) => {
    // 如果当前元素的第一个出现位置的索引等于它当前的索引，
    // 说明它是第一次出现，也就是唯一的。
    return self.indexOf(item) === index;
});
console.log(uniqueArrayByFilter);
// 输出: [1, 2, 3, "a", undefined, null]

登录后复制

这种方法虽然不如Set那么简洁，但它的兼容性更好，几乎所有浏览器都支持。它的原理是，对于重复的元素，indexOf总是返回它第一次出现的索引，而不是当前迭代的索引，所以filter就会把它过滤掉。

通过reduce()方法

reduce()是一个非常强大的数组方法，它可以遍历数组并累积一个单一的结果。我们也可以用它来构建一个去重后的新数组。

const originalArray = [1, 2, 2, 3, 'a', 'a', undefined, undefined, null, null];

const uniqueArrayByReduce = originalArray.reduce((accumulator, current) => {
    // 如果累加器中还没有当前元素，就把它加进去
    if (!accumulator.includes(current)) {
        accumulator.push(current);
    }
    return accumulator;
}, []); // 初始值是一个空数组
console.log(uniqueArrayByReduce);
// 输出: [1, 2, 3, "a", undefined, null]

登录后复制

reduce()的这种用法，我觉得挺能体现函数式编程思想的。它通过不断地“折叠”数组，最终得到我们想要的结果。缺点嘛，就是代码可能看起来没那么直观，特别是对于刚接触reduce的开发者来说。

利用Map对象或普通对象作为哈希表

这种方法尤其适用于去重那些包含对象的数组，或者当你需要基于某个特定属性去重时。

const originalArray = [1, 2, 2, 3, 'a', 'a', undefined, undefined, null, null];
const seen = {}; // 用一个对象来记录已经出现过的元素

const uniqueArrayByHash = originalArray.filter(item => {
    // 将item转换为字符串作为key，避免对象引用问题
    const key = typeof item === 'object' && item !== null ? JSON.stringify(item) : item;
    if (!seen[key]) {
        seen[key] = true;
        return true;
    }
    return false;
});
console.log(uniqueArrayByHash);
// 输出: [1, 2, 3, "a", undefined, null]

登录后复制

用哈希表的方式，你可以灵活地定义“唯一”的标准。比如，如果你有一堆用户对象，你想根据id属性去重，那就可以把item.id作为seen对象的key。

哪种JavaScript数组去重方法在性能上表现最好？

说到性能，这总是绕不开的话题，尤其是在处理大量数据时。在我做过的项目中，性能考量确实会影响方法的选择。

通常情况下，Set方法在现代JavaScript引擎中表现最为出色。这是因为Set的底层实现通常是基于哈希表（hash table），查找、插入和删除操作的平均时间复杂度接近O(1)。这意味着无论数组有多大，Set去重的效率都非常高。它利用了引擎的C++原生优化，这通常是JavaScript代码无法比拟的。

相比之下，filter()结合indexOf()的方法，它的性能在数组规模较大时会显著下降。indexOf()本身在数组中查找元素的时间复杂度是O(n)，而filter()又会遍历整个数组，所以整体的时间复杂度是O(n²)。想象一下，一个10000个元素的数组，indexOf可能要执行10000次，每次又要遍历10000个元素，这开销可就大了。

reduce()方法结合includes()去重，其性能表现与filter + indexOf类似，因为includes()也是O(n)操作，整体也是O(n²)。如果reduce内部使用哈希表（比如我们上面用普通对象seen），那么性能就能提升到接近O(n)。

而使用Map或普通对象作为哈希表的方法，性能通常也非常好，接近O(n)。它避免了嵌套循环，通过空间换时间的方式，将查找操作的复杂度降低。

所以，如果你的目标环境支持ES6，并且对性能有较高要求，Set无疑是首选。对于那些需要自定义去重逻辑（比如对象去重）的场景，基于Map或普通对象的哈希表方法会更灵活，且性能也足够优秀。当然，对于小型数组（比如几十个元素），这些性能差异几乎可以忽略不计，这时候选择你觉得代码最清晰、最容易维护的方法就行。

如何处理包含对象的数组去重，而不仅仅是基本类型？

去重基本类型（数字、字符串、布尔值等）相对简单，Set、indexOf都能搞定。但如果数组里装的是对象，事情就变得有点意思了。因为JavaScript在比较对象时，默认是比较它们的引用地址，而不是它们的内容。这意味着，即使两个对象拥有完全相同的属性和值，如果它们是不同的内存地址，JS也会认为它们是不同的。

1. 基于特定属性去重（最常用）

Ai Mailer

使用Ai Mailer轻松制作电子邮件

查看详情

在实际项目中，我们经常需要根据对象的某个唯一标识符（比如id、sku等）来判断对象是否重复。

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

const uniqueUsers = [];
const seenIds = new Set(); // 使用Set来存储已见的ID

for (const user of users) {
    if (!seenIds.has(user.id)) {
        uniqueUsers.push(user);
        seenIds.add(user.id);
    }
}

console.log(uniqueUsers);
/*
输出:
[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]
*/

登录后复制

这种方法非常实用且高效。它遍历一次数组，用Set来快速检查id是否已存在。你也可以用reduce结合哈希表实现类似逻辑：

const uniqueUsersByReduce = users.reduce((acc, current) => {
    if (!acc.seenIds.has(current.id)) {
        acc.result.push(current);
        acc.seenIds.add(current.id);
    }
    return acc;
}, { seenIds: new Set(), result: [] }).result;
console.log(uniqueUsersByReduce);

登录后复制

2. 将对象序列化后去重（适用于简单对象，但有局限性）

如果你想比较两个对象的“内容”是否完全一致（即所有属性和值都相同），可以尝试将对象转换为字符串（JSON格式），然后用Set或哈希表去重。

const items = [
    { type: 'book', price: 20 },
    { type: 'pen', price: 5 },
    { type: 'book', price: 20 }, // 内容重复
    { type: 'pencil', price: 5 }
];

const uniqueItems = [];
const seenStrings = new Set();

for (const item of items) {
    const itemString = JSON.stringify(item); // 转换为字符串
    if (!seenStrings.has(itemString)) {
        uniqueItems.push(item);
        seenStrings.add(itemString);
    }
}
console.log(uniqueItems);
/*
输出:
[
  { type: 'book', price: 20 },
  { type: 'pen', price: 5 },
  { type: 'pencil', price: 5 }
]
*/

登录后复制

这种方法有个明显的缺点：JSON.stringify()对对象属性的顺序敏感。也就是说，{ a: 1, b: 2 }和{ b: 2, a: 1 }会被认为是不同的字符串。此外，它不能处理包含函数、undefined或循环引用的对象。所以，它只适用于结构简单且属性顺序固定的对象。

3. 自定义比较函数（更灵活，但更复杂）

如果你的对象比较逻辑很复杂，或者需要比较多个属性，那么你可能需要编写一个自定义的比较函数，并结合filter或reduce来使用。

const products = [
    { name: 'Laptop', brand: 'Dell', price: 1200 },
    { name: 'Mouse', brand: 'Logitech', price: 50 },
    { name: 'Laptop', brand: 'Dell', price: 1250 }, // name和brand重复，但price不同
    { name: 'Keyboard', brand: 'Logitech', price: 100 }
];

const uniqueProducts = products.filter((product, index, self) => {
    // 检查这个产品是否是第一次出现，根据name和brand判断
    return index === self.findIndex(p => p.name === product.name && p.brand === product.brand);
});
console.log(uniqueProducts);
/*
输出:
[
  { name: 'Laptop', brand: 'Dell', price: 1200 },
  { name: 'Mouse', brand: 'Logitech', price: 50 },
  { name: 'Keyboard', brand: 'Logitech', price: 100 }
]
*/

登录后复制

findIndex会在数组中找到第一个符合条件的元素的索引。如果当前元素的索引与findIndex找到的索引相同，就说明它是第一次出现。这种方式非常灵活，可以根据你的具体需求定义任何复杂的比较逻辑。

在实际项目中，选择数组去重方法时需要考虑哪些因素？

在真实的项目里，选择哪种去重方法，我觉得这真不是一道单选题，而是要综合考虑多方面因素。

1. 数据规模和性能要求

这是最直接的考量。如果你的数组元素数量不多（比如几十、几百个），那么大多数方法在性能上的差异几乎可以忽略不计。这时候，代码的可读性和简洁性可能更重要。但如果处理的是成千上万，甚至几十万的数据，那么性能就成了决定性因素。Set或基于哈希表的方案（如Map或普通对象）会是更明智的选择，它们的时间复杂度接近O(n)，而indexOf结合filter的O(n²)方案，在这种情况下可能会导致页面卡顿甚至崩溃。

2. 数组中元素的类型

这会极大地影响你的选择。

基本类型（字符串、数字、布尔值、null、undefined）：Set是最简洁、高效的选择。filter + indexOf也完全没问题。
对象类型：这是最复杂的情况。
- 如果你能根据对象的某个唯一标识属性（如id）去重，那么使用Set来存储已见的id值，然后遍历数组构建新数组，是最推荐的做法。
- 如果你需要比较整个对象的内容，并且对象结构简单、不含函数或循环引用，可以考虑JSON.stringify()后去重，但要小心属性顺序问题。
- 如果需要复杂的自定义比较逻辑，filter结合findIndex或reduce结合自定义比较函数会更合适。