🧑💻秒杀！前端常见手写题！-HowieCong
一、数组去重
-
数组去重是指将数组中重复的元素去除，只保留一个
-
实现思路有多种，常见的包括使用 ES6 的
Set数据结构、利用对象的属性唯一性、双重循环比较、filter方法结合indexOf
二、实现方法
（1）使用Set数据结构（ES6）
Set是 ES6 引入的一种新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值
function uniqueArray(arr){
// 将数组转换为Set去除元素
const uniqueSet = new Set(arr);
// 再将Set转换会数组
return Array.from(uniqueSet);
}
// 测试
const testArr1 = [1, 2, 2, 3, 4, 4];
console.log(uniqueArray(testArr1));
（2）利用对象的属性唯一性
- 对象的属性名是唯一的，通过遍历数组，将数组元素作为对象的属性名，再根据对象属性的存在情况来决定是否添加到结果数组中
function uniqueArray(arr){
const obj = {};
const result = [];
for(let i = 0; i < arr.length; i++){
// 判断对象是否已经存在该属性
if（!obj[arr[i]]）{
// 如果对象不存在，将元素添加到结果数组中
result.push(arr[i]);
// 并将该元素作为对象的属性，值设为 true
obj[arr[i]] = true;
}
}
return result;
}
// 测试
const testArr2 = [1, 2, 2, 3, 4, 4];
console.log(uniqueArray(testArr2));
（3）双层循环比较
- 通过两层循环，外层循环遍历数组元素，内层循环检查该元素是否在前面已经出现过，如果没有出现过则添加到结果数组中
function unqiueArray(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(!isDupicate){
result.push(arr[i])
}
}
return result;
}
// 测试
const testArr3 = [1, 2, 2, 3, 4, 4];
console.log(uniqueArray(testArr3));
（4）filter方法结合indexOf
-
filter方法用于创建一个新数组，其包含通过所提供函数实现的测试的所有元素 -
indexOf方法返回某个指定的字符串值在字符串中首次出现的位置。通过filter过滤出元素首次出现的位置和当前索引相同的元素
function uniqueArray(arr){
return arr.filter((item,index) => {
// 检查元素首次出现的位置是否和当前索引相同
return arr.indexOf(item) === index;
}
}
// 测试
const testArr4 = [1, 2, 2, 3, 4, 4];
console.log(uniqueArray(testArr4));
三、讨论
（1）Set的优缺点
-
优点：代码简洁，实现起来非常方便，性能较高，因为
Set内部的去重机制是基于哈希表实现的，查找和插入操作的时间复杂度接近 O (1) -
兼容性方面，在一些较旧的浏览器中不支持 ES6 的
Set数据结构。而且Set只能处理基本数据类型的去重，如果数组中包含对象等引用类型，无法直接去重
（2）对象属性唯一性去重时数组元素是对象出现的问题
- 当数组元素是对象时，对象会被转换为字符串
[object Object]作为对象的属性名，这样所有的对象都会被当作同一个属性，导致最终结果只能保留一个对象，无法正确去重
（3）双重循环比较去重的时间复杂度
- 双重循环比较去重的时间复杂度是O(n^2)
（4）处理大数据量的数组去重选择哪种方法去重?
-
优先选择使用
Set方法，因为Set基于哈希表实现，插入和查找操作的时间复杂度接近O(1)，整体去重的时间复杂度为O(n)，性能较好 -
双重循环比较的时间复杂度是O(n^2)，在大数据量下性能会明显下降
-
利用对象属性唯一性去重虽然也能达到O(n)的时间复杂度，但在处理复杂数据类型时可能会有问题
❓其他
1. 疑问与作者HowieCong声明
-
如有疑问、出错的知识，请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong
-
若想让作者更新哪些方面的技术文章或补充更多知识在这篇文章，请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong
-
声明：作者HowieCong目前只是一个前端开发小菜鸟，写文章的初衷只是全面提高自身能力和见识；如果对此篇文章喜欢或能帮助到你，麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧，欢迎大家来交流！
