「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」。
有个学弟问我js数组去重的几种方法,说是在视频面试要求手写的时候脑子一下模糊,只记得new set方法,其他方法全都模糊了。回去我就跟他说了一下根据自己理解浅薄的几种数组去重的方法,可能不够很全,但是应对面试应该也是足够了。
那么接下来讲一下数组去重的几种方法。
1.ES6中的Set方法。
先简单介绍一下ES6中的Set语法。允许存储任何类型的唯一值,无论是原始值或者是对象引用。从官方介绍的唯一值我们可以知道Set中存储的数据是唯一的,那么用来做去重则再方便不过了。
let arr = [1,2,6,99,8,99,8]
let arr2 = new Set(arr)
console.log(arr2) //Set {1, 2, 6, 99, 8} 可以得到一个类数组的一个数据
let arr3 = [...arr2]//对数据进行...展开语法,
console.log(arr3)// [1, 2, 6, 99, 8]
2.利用indexOf查找到数组的第一个数据并返回,不在继续查找(据说消耗性能并且不能去掉重复的复杂数据类型,同时还会去掉所有的NaN)
1.filter过滤
let arr = [1,2,6,99,8,99,8]
let arr2 = arr.filter((item,index,array)=>{//利用过滤找出满足条件的值
return array.indexOf(item) == index//indexOf的用法,可找到相应值所在的索引
})
console.log(arr2)
2.map //通过可以通过map返回值来获取
let arr = [1,2,6,99,8,99,8]
let arr3 = []
let arr2 = arr.map((item,index,array)=>{
if(array.indexOf(item) == index)
return item
})
for(let i=0;i<arr2.length;i++){ //并对其进行筛选
if(arr2[i]) arr3.push(arr2[i])
}
console.log(arr3)
3.那么既然indexOf可以进行数组的去重,includes也必然可以,因为includes是返回是否能够找到该值
let arr = [1,2,6,99,8,99,8]
let arr2 = []
arr.forEach((item) =>{
if(!arr2.includes(item)) arr2.push(item)
//如果arr2中不存在那个项,arr中的每一个循环出来的项,不存在就添加
})
console.log(arr2)
4.利用对象的唯一性
let arr = [1,2,6,99,8,99,8]
let arr2 = []
let obj = {}
arr.forEach((item) =>{
if(!obj[item]){ //当对象中没有数组这一项值作为属性名时
arr2.push(item) //则意味着数组这一项为唯一,推入数组arr2中
obj[item] = true
}
})
console.log(arr2)
5.双重for循环去除数组
let arr=[1,2,2,3,1,4,4,8,8,8,8,5,5,6,6,7,7,8]
for(let i=0;i<arr.length;i++){//循环数组中的每一项
for(let j=i+1;j<arr.length;j++){//循环数组每一项的第二项
if(arr[i]==arr[j]){//如果响铃相同则删除该数据,
arr.splice(i,1)
i--;//因为删除了一个数据,所以循环的下标也要-1
j--;
}
}
}
//去重完成以后,数组数据在控制台输出
console.log(arr)
其实中的来说去除循环的方法我个人总结出来就3种
- 根据for循环和indexOf,includes这种能够查询数组唯一值来作判断
- 根据对象的属性名唯一做判断
- 新增语法中唯一的键值对做判断
其他不同的方法都是以上三种的延伸和利用不同的方法来进行的,虽然外表利用了不同的方法,但是用的是相同的原理。
感谢读者大大的阅读,作为一个前端小白,写作的内容多少会有点瑕疵,如果写的文章有不好值得纠正的地方,欢迎各位读者大大们的指正和探讨。