过滤 javascript 数组中的重复项有多种方法,1. 基础循环结合 indexof 检查,简单但性能差;2. 利用 es6 的 set 结构,代码简洁且效率高,适用于基本数据类型;3. 使用 filter 结合 indexof 或 includes,可保持原始顺序;4. 对象数组去重需基于唯一键使用 set 和自定义逻辑;5. set 能正确区分 null 和 undefined;6. 大型数组推荐使用 set 或 map 以获得 o(1) 查找性能;7. 若需保持顺序,可结合 set 与循环或使用 filter 方法。这些方法根据数据类型和性能需求选择使用,最终均能实现数组去重的目标。

过滤 JavaScript 数组中的重复项,本质上就是去重。有很多方法可以实现,从简单粗暴的循环判断,到利用 ES6 的 Set 数据结构,甚至还有更高级的利用 Map 的方式。选择哪种,主要看你的具体需求,比如数组大小、数据类型,以及对性能的要求。
解决方案
最基础的方法,就是用一个循环,然后每次检查当前元素是否已经存在于一个“已存在”的数组里。如果不存在,就把它加进去。这种方法简单直接,但效率相对较低,特别是对于大型数组。
function uniqueArray(arr) {
const result = [];
for (let i = 0; i < arr.length; i++) {
if (result.indexOf(arr[i]) === -1) {
result.push(arr[i]);
}
}
return result;
}
const myArray = [1, 2, 2, 3, 4, 4, 5];
const unique = uniqueArray(myArray);
console.log(unique); // 输出: [1, 2, 3, 4, 5]ES6 引入了 Set 数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值。利用 Set 去重,代码简洁,效率也更高。
function uniqueArrayWithSet(arr) {
return [...new Set(arr)];
}
const myArray = [1, 2, 2, 3, 4, 4, 5];
const unique = uniqueArrayWithSet(myArray);
console.log(unique); // 输出: [1, 2, 3, 4, 5]还可以使用
filter方法结合
indexOf或
includes实现去重。
filter方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。
function uniqueArrayWithFilter(arr) {
return arr.filter((item, index) => arr.indexOf(item) === index);
}
const myArray = [1, 2, 2, 3, 4, 4, 5];
const unique = uniqueArrayWithFilter(myArray);
console.log(unique); // 输出: [1, 2, 3, 4, 5]更进一步,如果数组中的元素是对象,那么简单的
indexOf或 Set 就不好使了,因为对象是引用类型,即使属性值相同,它们在内存中的地址也不同。这时候,就需要自定义比较函数。
function uniqueArrayWithObjects(arr, key) {
const seen = new Set();
return arr.filter(item => {
const k = item[key];
return seen.has(k) ? false : seen.add(k);
});
}
const myArray = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 1, name: 'a'}];
const unique = uniqueArrayWithObjects(myArray, 'id');
console.log(unique); // 输出: [{id: 1, name: 'a'}, {id: 2, name: 'b'}]如何处理包含 null
或 undefined
的数组去重?
如果数组中包含
null或
undefined,需要特别注意。因为
null == undefined为 true,但
null === undefined为 false。使用
Set可以很好地处理这种情况,因为
Set认为
null和
undefined是不同的值。如果使用
indexOf,需要额外判断。
function uniqueArrayWithNullUndefined(arr) {
return [...new Set(arr)];
}
const myArray = [1, 2, null, undefined, 2, null, 3];
const unique = uniqueArrayWithNullUndefined(myArray);
console.log(unique); // 输出: [1, 2, null, undefined, 3]在大型数组中,哪种去重方法性能最佳?
在大数据量的数组中,使用 Set 的性能通常是最好的。这是因为 Set 的
has方法的时间复杂度是 O(1),而
indexOf的时间复杂度是 O(n)。这意味着,随着数组大小的增加,
indexOf的性能会急剧下降。当然,如果数组非常小,或者去重操作不是性能瓶颈,那么使用哪种方法都无所谓。
如何保持去重后数组元素的原始顺序?
如果需要保持去重后数组元素的原始顺序,使用 Set 可能不是最佳选择,因为它不保证元素的顺序。在这种情况下,可以使用
filter方法,或者手动循环并记录已存在的元素。
function uniqueArrayWithOrder(arr) {
const seen = new Set();
const result = [];
for (let i = 0; i < arr.length; i++) {
if (!seen.has(arr[i])) {
result.push(arr[i]);
seen.add(arr[i]);
}
}
return result;
}
const myArray = [5, 2, 2, 3, 4, 4, 1];
const unique = uniqueArrayWithOrder(myArray);
console.log(unique); // 输出: [5, 2, 3, 4, 1]










