在日常编程中，我们经常会遇到数组去重的问题。今天，我们就来聊聊如何用JavaScript来优雅地解决这个问题。
问题描述给定一个包含重复元素的数组，我们希望创建一个新的数组，其中只包含原始数组中的唯一值。例如，如果我们有一个数组 [1, 2, 3, 2, 4, 1, 5]，期望的输出应该是 [1, 2, 3, 4, 5]。
方法一：最原始的方法我们可以使用最简单的方法——嵌套循环来解决这个问题。遍历每一个元素，检查它是否已经存在于新数组中，如果不存在则添加进去。
代码语言：javascript复制function removeDuplicates(arr) {
const result = [];
for (let i = 0; i < arr.length; i++) {
let isDuplicate = false;
for (let j = 0; j < result.length; j++) {
if (arr[i] === result[j]) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
result.push(arr[i]);
}
}
return result;
}
const myArray = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = removeDuplicates(myArray);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
这个方法虽然直观，但当数组很大时，效率会变得非常低，因为时间复杂度是 O(n²)。
方法二：使用indexOf和filter方法我们还可以使用 indexOf 方法配合 filter 方法来去重，这样看起来会简洁不少。
代码语言：javascript复制function removeDuplicates(arr) {
return arr.filter((item, pos) => arr.indexOf(item) === pos);
}
const myArray = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = removeDuplicates(myArray);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
在这个方法中，我们使用 filter 方法创建了一个新数组，只有满足条件的元素才会被包含进来。条件是当前元素的索引应该等于该元素在数组中第一次出现的位置。这种方法代码看起来更简洁，但是它的时间复杂度依然是 O(n²)，因为 indexOf 需要遍历整个数组来查找元素的位置。
使用对象特性优化在处理大数组去重时，我们可以利用对象的特性来提升性能。通过在对象中记录数组元素，可以有效减少重复元素的检查次数。
代码语言：javascript复制function removeDuplicates(arr) {
const seen = {};
return arr.filter((item) => {
if (seen[item]) {
return false;
} else {
seen[item] = true;
return true;
}
});
}
const myArray = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = removeDuplicates(myArray);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
这个方法创建了一个空对象 seen，然后通过 filter 方法遍历数组。每个元素都会检查是否已存在于 seen 对象中。如果存在，则跳过；否则，加入 seen 对象并保留在新数组中。这种方法对于大数组更高效，但存在一些缺点：
类型转换：对象键只能是字符串或符号，这导致数字和字符串形式的数字无法区分。例如，removeDuplicates([1, "1"]) 会返回 [1]。对象相等性：所有对象在这个解决方案中被认为是相等的。例如，removeDuplicates([{foo: 1}, {foo: 2}]) 会返回 [{foo: 1}]。如果你的数组只包含基本类型，并且不需要区分类型，这可以放心使用这个方法。
结合对象和数组的线性搜索我们可以结合对象和数组的线性搜索方法来解决上述问题。
代码语言：javascript复制function removeDuplicates(arr) {
const prims = { boolean: {}, number: {}, string: {} };
const objs = [];
return arr.filter((item) => {
const type = typeof item;
if (type in prims) {
if (prims[type].hasOwnProperty(item)) {
return false;
} else {
prims[type][item] = true;
return true;
}
} else {
if (objs.indexOf(item) >= 0) {
return false;
} else {
objs.push(item);
return true;
}
}
});
}
const myArray = [1, 2, 3, 2, 4, 1, 5, { foo: 1 }, { foo: 2 }];
const uniqueArray = removeDuplicates(myArray);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5, { foo: 1 }, { foo: 2 }]
主要优点分类存储：通过将基本类型和对象类型分别存储，减少了不同类型之间的冲突，逻辑清晰。高效处理基本类型：使用对象存储基本类型，查找和存储操作的时间复杂度为 O(1)，效率较高。存在的问题1、对象类型处理问题：引用比较：代码使用 indexOf 方法判断对象是否存在于数组中，这实际上是比较对象的引用而不是内容。即使两个对象内容相同，但引用不同，indexOf 也会返回 -1，导致内容相同但引用不同的对象被认为是不同的。例如，{ foo: 1 } 和另一个 { foo: 1 } 会被当作两个不同的对象。性能问题：对于大量对象类型的元素，由于 indexOf 方法需要遍历整个数组，时间复杂度为 O(n)，性能较差。2、不能深度比较：对于嵌套对象或数组，该方法无法进行深度比较。例如，{ foo: [1, 2] } 和 { foo: [1, 2] } 这样的对象，内容相同但引用不同，会被认为是不同的对象。最终方案：编写深度比较函数编写深度比较函数 isDeepDataStructureEquality，用来比较两个对象的内容是否相同。
代码语言：javascript复制function isDeepDataStructureEquality(a, b) {
let isEqual = Object.is(a, b);
if (!isEqual) {
if (Array.isArray(a) && Array.isArray(b)) {
isEqual = (a.length === b.length) && a.every(
(item, idx) => isDeepDataStructureEquality(item, b[idx])
);
} else if (
a && b
&& (typeof a === 'object')
&& (typeof b === 'object')
) {
const aKeys = Object.keys(a);
const bKeys = Object.keys(b);
isEqual = (aKeys.length === bKeys.length) && aKeys.every(
(key, idx) => isDeepDataStructureEquality(a[key], b[key])
);
}
}
return isEqual;
}
function removeDuplicates(arr) {
const primitives = { boolean: {}, number: {}, string: {} };
const objs = [];
return arr.filter(item => {
const type = typeof item;
if (type in primitives) {
if (primitives[type].hasOwnProperty(item)) {
return false;
} else {
primitives[type][item] = true;
return true;
}
} else {
if (objs.some(obj => isDeepDataStructureEquality(obj, item))) {
return false;
} else {
objs.push(item);
return true;
}
}
});
}
方法三：排序去重另一种去重方法是先排序数组，然后去除连续重复的元素。
代码语言：javascript复制function removeDuplicates(arr) {
return arr.sort().filter((item, pos, ary) => !pos || item !== ary[pos - 1]);
}
const myArray = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = removeDuplicates(myArray);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
这个方法首先使用 sort 方法对数组进行排序，然后使用 filter 方法去除连续的重复元素。虽然对已排序的数组很有效，但无法处理对象数组。
方法四：使用 Set 处理对象对于包含对象的数组，我们可以利用 Set 数据结构来高效去重。因为 Set 只存储唯一值，我们可以将数组转换为 Set，然后再转换回数组。
代码语言：javascript复制function removeDuplicates(arr) {
return [...new Set(arr)];
}
const myArray = [1, 2, 3, 2, 4, 1, 5, { foo: 1 }, { foo: 2 }];
const uniqueArray = removeDuplicates(myArray);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5, { foo: 1 }, { foo: 2 }]
这个方法通过 new Set(arr) 创建一个新的集合，然后使用扩展运算符 ... 将集合展开为数组，去重过程简单且高效。
优点简洁：代码非常简洁，只需一行代码即可实现数组去重。高效：Set 数据结构在插入元素时自动去重，性能较好，时间复杂度为 O(n)。存在的问题对象引用问题：Set 判断元素是否相等时，使用的是同一对象引用。例如，两个内容相同但引用不同的对象 { foo: 1 } 和 { foo: 1 } 会被视为不同的元素。总结在实际开发中，选择合适的数组去重方法非常重要。如果数组主要包含基本类型，使用 Set 是一种简洁高效的选择。如果数组中包含复杂结构的对象，可以结合深度比较函数来确保去重的准确性。
无论你选择哪种方法，都要根据具体的应用场景和数据特点来决定。希望这些方法能帮助你在实际开发中更优雅地解决数组去重问题。如果你有其他更好的方法或建议，欢迎在评论区分享哦！💬
如果你喜欢这篇文章，请点赞并关注，更多前端技巧和小妙招等着你哦！😊